Ảnh bởi & nbsp; Rachel VineMỤC LỤC- Bước 01 - Ở đây một cách bạn có thể làm ...
- Bước 02 - Một cách khác bạn có thể làm ...
- Bước 03 - Thực hiện theo mã này ...
- Bước 04 - Bạn cũng có thể thực hiện nó mà không có hình thức
- Bước 05 - Ở đây bạn có thể sử dụng nút hoặc nút
- Bước 06 - Không cần thiết lập
- Bước 07 - Lần này cho JavaScript
- Sự kết luận
Ở đây một cách bạn có thể làm điều này
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script language="JavaScript">
function showInput() {
document.getElementById('display').innerHTML =
document.getElementById("user_input").value;
}
</script>
</head>
<body>
<form>
<label><b>Enter a Message</b></label>
<input type="text" name="message" id="user_input">
</form>
<input type="submit" onclick="showInput();"><br/>
<label>Your input: </label>
<p><span id='display'></span></p>
</body>
</html>
Một cách khác bạn có thể làm điều đó. Điểm cần lưu ý loại đầu vào là nút
<input type="button" onclick="showMessage()" value="submit" >
Thực hiện theo mã này:
<!DOCTYPE html>
<html>
<head>
<title>HTML JavaScript output on same page</title>
<script type="text/JavaScript">
function showMessage(){
var message = document.getElementById("message").value;
display_message.innerHTML= message;
}
</script>
</head>
<body>
<form>
Enter message: <input type="text" id = "message">
<input type="button" onclick="showMessage()" value="submit" />
</form>
<p> Message is: <span id = "display_message"></span> </p>
</body>
</html>
Bạn cũng có thể làm cho nó mà không có hình thức:
<!DOCTYPE html>
<html>
<head>
<title>HTML JavaScript output on same page</title>
<script type="text/JavaScript">
function showMessage(){
var message = document.getElementById("message").value;
display_message.innerHTML= message;
}
</script>
</head>
<body>
Enter message: <input type="text" id = "message">
<input type="submit" onclick="showMessage()" value="submit" />
<p> Message is: <span id = "display_message"></span> </p>
</body>
</html>
Tại đây bạn có thể sử dụng một trong hai nút hoặc nút:
<input type="submit" onclick="showMessage()" value="submit" />
Không cần thiết lập return false ;
Một cách khác mà bạn có thể thử. Điều này sẽ hoạt động
<html>
<head>
<script type = "text/javascript">
function write_below(form)
{
var input = document.forms.write.input_to_write.value;
document.getElementById('write_here').innerHTML="Your input was:"+input;
return false;
}
</script>
</head>
<!--Insert more code here-->
<body>
<form name='write' onsubmit='return write_below(this);'>
<input type = "text" name='input_to_write'>
<input type = "button" value = "submit" />
</form>
<div id='write_here'></div>
</body>
</html>
Lần này cho JavaScript: /**
* Class for getting form content
*
* @version 1.0.0
*/
class FormContent{
/**
* Create new form content object
*
* @param {HTMLFormElement} formElement Single form element
* @param {string} inputSelectors Selectors for elements which will be used to read and display data (like jQuery selectors: # for IDs, . for classes and so on). Separate multiple selectors with comas.
* @param {HTMLButtonElement | HTMLInputElement} submitButton Submit button to display form data (although the type should be always 'button')
* @param {Element} outputSection Section where the form data is displayed
* @since 1.0.0
*/
constructor(formElement, inputSelectors, submitButton, outputSection){
/**
* Disabled elements (values will not be shown in output). Values can be tag names, attribute 'type' values or certain element (inside form)
*
* @type {Array}
* @since 1.0.0
*/
this.disabledElements = ["button", "reset", "submit"];
/**
* Input elements node list (created by inputSelectors)
*
* @type {NodeList}
* @since 1.0.0
*/
var inputElements = formElement.querySelectorAll(inputSelectors);
/**
* Get input elements
*
* @see inputElements
* @return {NodeList} Input elements
* @since 1.0.0
*/
this.getInputElements = function(){ return inputElements; };
/**
* Get submit button
*
* @return {HTMLButtonElement} Submit button
* @since 1.0.0
*/
this.getSubmitButton = function(){ return submitButton; };
/**
* Get output section
*
* @see outputSection
* @return {NodeList} Output section
* @since 1.0.0
*/
this.getOutputSection = function(){ return outputSection; };
/**
* Empty input's alternative (print) value
*
* @type {string}
* @since 1.0.0
*/
this.emptyValueMessage = "Unknown";
/**
* Error message (when there is empty required fields)
*
* @type {string}
* @since 1.0.0
*/
this.errorMessage = "<h4 style='color:#FF0000;'>Please fill all the required inputs!</h4>";
/**
* Instance for this class
*
* @type {FormContent}
* @since 1.0.0
*/
var thisInstance = this;
if(submitButton && outputSection){
submitButton.onclick = function(){
thisInstance.onSubmitButtonClick();
};
}
}
/**
* When submit button is clicked
*
* @since 1.0.0
*/
onSubmitButtonClick(){
var outputMessage = (this.areRequiredInputsFilled()) ? this.getFormattedFormContent() : this.errorMessage;
this.printToOutput(outputMessage);
}
/**
* Are all the required inputs/fields filled?
*
* @return {boolean}
* @since 1.0.0
*/
areRequiredInputsFilled(){
for(var node of this.getInputElements()){
if(node.required && !node.value){
return false;
}
}
return true;
}
/**
* Print/display form data to output element
*
* @see getOutputSections()
* @since 1.0.0
*/
printToOutput(content){
this.getOutputSection().innerHTML = content;
}
/**
* Get form content/data which is formatted
*
* @return {string} Formatted form content
* @since 1.0.0
*/
getFormattedFormContent(){
var formContent = "";
var formData = this.getFormData();
for(var input in formData){
formContent += "<b>" + input + "</b>: " + formData[input] + "<br />";
}
return formContent;
}
/**
* Get raw form data
*
* @return {json} Form data
* @since 1.0.0
*/
getFormData(){
var formData = {};
var noNameCounter = 0;
var formInputs = this.getFormInputs();
for(var input of formInputs){
let inputName = input.name || "no_name_element_" + noNameCounter;
let inputValue = input.data || input.value || this.emptyValueMessage;
if(!input.name){
noNameCounter++;
}
formData[inputName] = inputValue;
}
return formData;
}
/**
* Get all the form input elements
*
* @return {Array} Inputs and values (form data)
* @since 1.0.0
*/
getFormInputs(){
var formInputs = [];
for(var input of this.getInputElements()){
if(!this.disabledElements.includes(input.tagName.toLowerCase()) && !this.disabledElements.includes(input.type) && !this.disabledElements.includes(input)){
if(input.type === "radio"){
if(input.checked){
formInputs.push(input);
}
}else if(input.type === "checkbox"){
input.value = (input.checked) ? true : false;
formInputs.push(input);
}else if(input.multiple){
formInputs.push(this.getMultipleInput(input));
}else if(input.value || input.innerHTML){
formInputs.push(input);
}else{
formInputs.push(input);
}
}
}
return formInputs;
}
/**
* Get input which has attribute multiple
*
* @param {HTMLInputElement} multipleInput Input with attribute multiple
* @return {HTMLInputElement} Input instance
* @since 1.0.0
*/
getMultipleInput(multipleInput){
var inputInstance = document.createElement("input");
inputInstance.name = multipleInput.name;
var values = [];
if(multipleInput.type !== "file"){
for(var option of multipleInput){
if(option.selected){
values.push(option.value);
}
}
}else{
for(var file of multipleInput.files){
values.push(file.name);
}
}
inputInstance.data = values.toString();
return inputInstance;
}
}
var forms = document.getElementsByTagName("form");
for(var form of forms){
let inputSelectors = "input, select, textaera";
let submitButton = form.querySelector("#submit-button");
let outputSection = form.querySelector("#output");
new FormContent(form, inputSelectors, submitButton, outputSection);
}
Sự kết luậnỞ đây một cách bạn có thể làm điều này
Làm thế nào tôi có thể hiển thị dữ liệu biểu mẫu sau khi gửi?
Thuộc tính FormTarget chỉ định tên hoặc từ khóa cho biết nơi hiển thị phản hồi nhận được sau khi gửi biểu mẫu. Thuộc tính FormTarget ghi đè thuộc tính đích của phần tử. Lưu ý: Thuộc tính FormTarget là mới cho phần tử có loại = "Gửi" trong HTML5.. The formtarget attribute overrides the target attribute of the
Làm thế nào dữ liệu bảng hiển thị sau khi nhấp vào nút Gửi trong HTML?
Bạn có thể hiển thị Datagrid trong khi nhấp vào nút Gửi của biểu mẫu.Điều này có thể đạt được bằng cách hiển thị DataGrid bên trong biểu mẫu Sự kiện Sub Sured và ngăn chặn hành động gửi mặc định bằng cách sử dụng phương thức PRECTERDEFAULT.displaying the DataGrid inside the form “submit” event and prevent the default submit action by using the “preventDefault” method.
Điều gì xảy ra khi một biểu mẫu được gửi trong JavaScript?
Trình kích hoạt sự kiện khi biểu mẫu được gửi, nó thường được sử dụng để xác thực biểu mẫu trước khi gửi nó đến máy chủ hoặc hủy bỏ việc gửi và xử lý nó trong JavaScript. when the form is submitted, it is usually used to validate the form before sending it to the server or to abort the submission and process it in JavaScript.
Phương pháp nào được sử dụng để hiển thị dữ liệu ở dạng bằng JavaScript?
JavaScript có thể "hiển thị" dữ liệu theo các cách khác nhau: ghi vào phần tử HTML, sử dụng InternalHTML.Viết vào đầu ra HTML bằng document.write ().Viết vào một hộp cảnh báo, sử dụng window.alert ().document.write() . Writing into an alert box, using window.alert() . | 
