stackoom
  简体   繁体   中英

How to add div panel in html and javascript when clicking submit button in html form?

 原文  2018-07-11 15:04:19  8   3    javascript/ html/ css

Question

I am stuck on an issue in past 3 to 4 days. I have created a student registration form by html and javascript . I have first included validation via javascript and then i included string concatenation in javascript to submit all the values of the form and show it's submission via alert. Now the problem here is that i want to show all submission value in div panel but i am not able to do that because i am an amateur in this field i need little guidance and help in making javascript and html code to include div panel on submit button. I am trying to follow this site: W3schools link to make div panel . Can anybody please help me out to include w3schools code in my code .

My HTML Code: 

 <!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>

My Javascript Code: 

 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); }

Pls help me in resolving this issue?

3 answers

solution1
 1  2018-07-11 15:16:50

Simply you can add div with some id property like this : <div id="formData"></div>

Then whenever you want to display something : 

var firstname = document.getElementById('inputfirstname'); //input
document.getElementById('formData').innerText = 'First Name : ' + firstname.value;

solution2
 0  2018-07-11 15:44:50

you can make a row and inside it 5 cells. then in showme() function you can assign values to these cells. 

                       <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";
               }

solution3
 0 ACCPTED  2018-07-11 15:48:07

Check this code 

 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>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Clicking submit button of an HTML form by a Javascript code How to add submit button to an HTML form with JavaScript function? How to re-load a form into the same html div after clicking the submit button? HTML Form: Make div as submit button HTML, Javascript, and JSP: Form not engaging in “action” when submit button is clicked Disable submit form button when the timer stops Javascript Html How do I implement a “Submit” button on a Javascript/HTML calculation form? how do I create a javascript function that changes the html when a form submit button is pushed in django Not able tor redirect upon clicking on submit button in HTML form HTML and JS basics, filling form after clicking submit button
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM