單擊html表單中的提交按鈕時，如何在html和javascript中添加div面板？
[英]How to add div panel in html and javascript when clicking submit button in html form?
問題描述
我在過去3到4天內陷入了一個問題。 我已經通過html和javascript創建了學生注冊表格。 我首先通過javascript進行了驗證，然后在javascript中包括了字符串連接以提交表單的所有值並通過警報顯示其提交。 現在的問題是，我想在div面板中顯示所有提交值，但我無法做到這一點，因為我是該領域的業余愛好者，我幾乎不需要指導和幫助來制作javascript和html代碼以在提交時包括div面板按鈕。 我正在嘗試關注此網站： W3schools鏈接以制作div面板 。 誰能幫我在我的代碼中包括w3schools代碼。
我的HTML代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Reg Form</title> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script type="text/javascript" src="reg.js"></script> </head> <body onload="document.registration.inputfirstname.focus();"> <div class="container"> <div class="row"> <form class="form-horizontal" name="registration" onSubmit="return formValidation();"> <fieldset> <legend> <center>Registration</center> </legend> <div class="form-group"> <label class="col-md-4 control-label" for="inputfirstname">First Name</label> <div class="col-md-5"> <input type="text" name="firstname" id="inputfirstname" placeholder="First Name" class="form-control input-md"> </div> </div> <div class="form-group"> <label class="col-md-4 control-label" for="inputlastname">Last Name</label> <div class="col-md-5"> <input type="text" name="lastname" id="inputlastname" placeholder="Last Name" class="form-control input-md"> </div> </div> <div class="form-group"> <label class="col-md-4 control-label" for="inputrollno">Roll No</label> <div class="col-md-5"> <input type="text" name="textinput" id="inputrollno" placeholder="Roll No" class="form-control input-md"> </div> </div> <div class="form-group"> <label class="col-md-4 control-label" for="inputclass">Class</label> <div class="col-md-5"> <input type="text" name="textinput" id="inputclass" placeholder="Class" class="form-control input-md"> </div> </div> <div class="form-group"> <label class="col-md-4 control-label" for="inputemail">Email</label> <div class="col-md-5"> <input type="text" name="email" id="inputemail" placeholder="E-Mail" class="form-control input-md"> </div> </div> <div class="form-group"> <label class="col-md-4 control-label" for="submit"></label> <div class="col-md-4"> <button id="submit" onclick="showme()" name="submit" class="btn btn-success">Submit</button> </div> </div> </fieldset> </form> </div> </div> </body> </html>
我的Javascript代碼：
function formValidation() { var inputfirstname = document.registration.inputfirstname; var inputlastname = document.registration.inputlastname; var inputrollno = document.registration.inputrollno; var inputclass = document.registration.inputclass; var inputemail = document.registration.inputemail; if (firstname_validation(inputfirstname, 5, 12)) { if (lastname_validation(inputlastname, 6, 12)) { if (allnumeric(inputrollno)) { if (alphanumeric(inputclass)) { if (ValidateEmail(inputemail)) { alert('Form Successfully Submitted'); return true; } } } } } return false; } function firstname_validation(inputfirstname, mx, my) { var input_firstname_len = inputfirstname.value.length; if (input_firstname_len == 0 || input_firstname_len >= my || input_firstname_len < mx) { alert("First Name should not be empty / length should be between " + mx + " to " + my); inputfirstname.focus(); return false; } return true; } function lastname_validation(inputlastname, mx, my) { var inputlastname_len = inputlastname.value.length; if (inputlastname_len == 0 || inputlastname_len >= my || inputlastname_len < mx) { alert("Last Name should not be empty / length should be between " + mx + " to " + my); inputlastname.focus(); return false; } return true; } function allnumeric(inputrollno) { var numbers = /^[0-9]+$/; if (inputrollno.value.match(numbers)) { return true; } else { alert('Roll No must be in numbers only'); inputrollno.focus(); return false; } } function alphanumeric(inputclass) { var letters = /^[0-9a-zA-Z]+$/; if (inputclass.value.match(letters)) { return true; } else { alert('Class must have alphanumeric characters only'); inputclass.focus(); return false; } } function ValidateEmail(inputemail) { var mailformat = /^\\w+([\\.-]?\\w+)*@\\w+([\\.-]?\\w+)*(\\.\\w{2,3})+$/; if (inputemail.value.match(mailformat)) { return true; } else { alert("You have entered an invalid email address!"); inputemail.focus(); return false; } } var button = document.getElementById('submit'); function showme() { var firstname = document.getElementById('inputfirstname'); var lastname = document.getElementById('inputlastname'); var rollno = document.getElementById('inputrollno'); var Class = document.getElementById('inputclass'); var email = document.getElementById('inputemail'); var str = 'Hello ' + inputfirstname.value + inputlastname.value +', Your Roll no is' + inputrollno.value +',You have successfully registered for this course'; alert(str); }
請幫我解決這個問題？
3 個解決方案
解決方案1
1 2018-07-11 15:16:50
只需添加具有以下id屬性的<div id="formData"></div> ： <div id="formData"></div>
然后，只要您想顯示一些東西：
var firstname = document.getElementById('inputfirstname'); //input
document.getElementById('formData').innerText = 'First Name : ' + firstname.value;
解決方案2
0 2018-07-11 15:44:50
您可以排成一行，並在其中放置5個單元格。 然后在showme（）函數中可以為這些單元格分配值。
<div class="row" id="studentDetail" sytle="display:
none;">
<div class="col-sm-2" id="firstName"></div>
<div class="col-sm-2" id="lastName"></div>
<div class="col-sm-2" id="rolNo"></div>
<div class="col-sm-2" id="class"></div>
<div class="col-sm-2" id="email"></div>
</div>
function showme() {
var firstname = document.getElementById('inputfirstname');
var lastname = document.getElementById('inputlastname');
var rollno = document.getElementById('inputrollno');
var Class = document.getElementById('inputclass');
var email = document.getElementById('inputemail');
//now set these values to div elements of the row
document.getElementById("firstName").text(firsname.value);
document.getElementById("lastName").text(lastname.value);
document.getElementById("rolNo").text(rollno.value);
document.getElementById("class").text(Class.value);
document.getElementById("email").text(email.value);
//now show the hidden div
document.getElementById("studentDetail").style.display = "block";
}
解決方案3
0 已采納 2018-07-11 15:48:07
檢查此代碼
function formValidation() { var inputfirstname = document.registration.inputfirstname; var inputlastname = document.registration.inputlastname; var inputrollno = document.registration.inputrollno; var inputclass = document.registration.inputclass; var inputemail = document.registration.inputemail; if (firstname_validation(inputfirstname, 5, 12)) { if (lastname_validation(inputlastname, 6, 12)) { if (allnumeric(inputrollno)) { if (alphanumeric(inputclass)) { if (ValidateEmail(inputemail)) { alert('Form Successfully Submitted'); return true; } } } } } return false; } function firstname_validation(inputfirstname, mx, my) { var input_firstname_len = inputfirstname.value.length; if (input_firstname_len == 0 || input_firstname_len >= my || input_firstname_len < mx) { alert("First Name should not be empty / length should be between " + mx + " to " + my); inputfirstname.focus(); return false; } return true; } function lastname_validation(inputlastname, mx, my) { var inputlastname_len = inputlastname.value.length; if (inputlastname_len == 0 || inputlastname_len >= my || inputlastname_len < mx) { alert("Last Name should not be empty / length should be between " + mx + " to " + my); inputlastname.focus(); return false; } return true; } function allnumeric(inputrollno) { var numbers = /^[0-9]+$/; if (inputrollno.value.match(numbers)) { return true; } else { alert('Roll No must be in numbers only'); inputrollno.focus(); return false; } } function alphanumeric(inputclass) { var letters = /^[0-9a-zA-Z]+$/; if (inputclass.value.match(letters)) { return true; } else { alert('Class must have alphanumeric characters only'); inputclass.focus(); return false; } } function ValidateEmail(inputemail) { var mailformat = /^\\w+([\\.-]?\\w+)*@\\w+([\\.-]?\\w+)*(\\.\\w{2,3})+$/; if (inputemail.value.match(mailformat)) { return true; } else { alert("You have entered an invalid email address!"); inputemail.focus(); return false; } } var button = document.getElementById('submit'); function showme() { var firstname = document.getElementById('inputfirstname'); var lastname = document.getElementById('inputlastname'); var rollno = document.getElementById('inputrollno'); var classInput = document.getElementById('inputclass'); var email = document.getElementById('inputemail'); var str = 'Hello s ' + inputfirstname.value + inputlastname.value +', Your Roll no is' + inputrollno.value +',You have successfully registered for this course'; //alert(str); document.getElementById('formData').innerHTML = 'First Name : ' + firstname.value + '<br>Last Name : ' + lastname.value + '<br>Roll No : ' + rollno.value +'<br>Class : ' + classInput.value + '<br>Email : ' + email.value ; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Reg Form</title> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script type="text/javascript" src="reg.js"></script> </head> <body onload="document.registration.inputfirstname.focus();"> <div class="container"> <div class="row"> <form class="form-horizontal" name="registration" onSubmit="return formValidation();"> <fieldset> <legend> <center>Registration</center> </legend> <div class="form-group"> <label class="col-md-4 control-label" for="inputfirstname">First Name</label> <div class="col-md-5"> <input type="text" name="firstname" id="inputfirstname" placeholder="First Name" class="form-control input-md"> </div> </div> <div class="form-group"> <label class="col-md-4 control-label" for="inputlastname">Last Name</label> <div class="col-md-5"> <input type="text" name="lastname" id="inputlastname" placeholder="Last Name" class="form-control input-md"> </div> </div> <div class="form-group"> <label class="col-md-4 control-label" for="inputrollno">Roll No</label> <div class="col-md-5"> <input type="text" name="textinput" id="inputrollno" placeholder="Roll No" class="form-control input-md"> </div> </div> <div class="form-group"> <label class="col-md-4 control-label" for="inputclass">Class</label> <div class="col-md-5"> <input type="text" name="textinput" id="inputclass" placeholder="Class" class="form-control input-md"> </div> </div> <div class="form-group"> <label class="col-md-4 control-label" for="inputemail">Email</label> <div class="col-md-5"> <input type="text" name="email" id="inputemail" placeholder="E-Mail" class="form-control input-md"> </div> </div> <div class="form-group"> <label class="col-md-4 control-label" for="submit"></label> <div class="col-md-4"> <button id="submit" onclick="showme()" name="submit" class="btn btn-success">Submit</button> </div> </div> </fieldset> </form> </div> <div id="formData"></div> </div> </body> </html>
如何使用 JavaScript 函數向 HTML 表單添加提交按鈕？
[英]How to add submit button to an HTML form with JavaScript function?
單擊提交按鈕后，如何將表單重新加載到同一個 html div 中？
[英]How to re-load a form into the same html div after clicking the submit button?
HTML，Javascript和JSP：單擊提交按鈕時，表單不參與“操作”
[英]HTML, Javascript, and JSP: Form not engaging in “action” when submit button is clicked
如何在Javascript / HTML計算表單上實現“提交”按鈕？
[英]How do I implement a “Submit” button on a Javascript/HTML calculation form?
我如何創建一個 javascript function 在按下表單提交按鈕時更改 html
[英]how do I create a javascript function that changes the html when a form submit button is pushed in django
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
通過 Javascript 代碼單擊 HTML 表單的提交按鈕
如何使用 JavaScript 函數向 HTML 表單添加提交按鈕？
單擊提交按鈕后，如何將表單重新加載到同一個 html div 中？
HTML表單：將div作為提交按鈕
HTML，Javascript和JSP：單擊提交按鈕時，表單不參與“操作”
當計時器停止Javascript HTML時禁用提交表單按鈕
如何在Javascript / HTML計算表單上實現“提交”按鈕？
我如何創建一個 javascript function 在按下表單提交按鈕時更改 html
單擊HTML表單中的“提交”按鈕后無法重定向
HTML和JS基礎知識，點擊提交按鈕后填寫表單
相關標簽