HTML Form Output and Validation

Question

我将 onclickevent 添加到按钮，但它仍然没有正确输出我的表单。

Answer 1

By default, buttons inside a form have a type of submit , which means that the button will automatically submit the form when clicked.

To fix, the quickest way would be to add a type="button" property to your button:

 function clearErrors() { document.getElementById("firstnameError").innerHTML = ""; document.getElementById("lastnameError").innerHTML = ""; document.getElementById("usernameError").innerHTML = ""; } function processForm() { clearErrors(); var output = ""; if (document.getElementById("firstname").value == "") { document.getElementById("firstnameError").innerHTML = "First name required"; } if (document.getElementById("lastname").value == "") { document.getElementById("lastnameError").innerHTML = "Last name required"; } output += "The form would submit the following information:" output += "\\nFirst name: " + document.getElementById("firstname").value; output += "\\nLast name: " + document.getElementById("lastname").value; if (document.getElementById("male").checked == true) { output += "\\nSex: Male"; } else { output += "\\nSex: Female"; } if (document.getElementById("car").checked == true) { output += "\\nI have a car"; } var education = document.getElementById("education"); output += "\\nEducation: " + education.options[education.selectedIndex].text; document.getElementById("output").value = output; }

 <div id="header"> <h1>HTML Forms</h1> </div> <div id="content"> <form id="detailsForm"> <p> First name&#58;<input type="text" name="firstname" id="firstname" />* <span id="firstnameError"></span><br /> Last name&#58;<input type="text" name="lastname" id="lastname" />* <span id="lastnameError"></span><br /> Username&#58; <input type="text" name="username" id="username" />* <span id="usernameError"></span><br /> Male <input type="radio" name="sex" value="male" id="male" /> Female<input type="radio" name="sex" value="female" id="female" checked /> <br /> I have a car&#58;<input type="checkbox" name="vehicle" value="Car" id="car" /><br /> Select a Level of Education&#58;<br /> <select name="education" id="education"> <option value="Secondary School">Secondary School</option> <option value="University">University</option> </select> <br /> <button type="button" onclick="processForm()">Click me</button> </p> <p> <textarea name="output" id="output" rows="10" cols="100"></textarea> </p> </form> </div>

Answer 2

I recreated your code as a snippet. It's working fine.

(Modified your code to have the eventListener() added in JS and not in HTML.)

 function clearErrors() { document.getElementById("firstnameError").innerHTML = ""; document.getElementById("lastnameError").innerHTML = ""; document.getElementById("usernameError").innerHTML = ""; } function processForm() { clearErrors(); var output = ""; if (document.getElementById("firstname").value == "") { document.getElementById("firstnameError").innerHTML = "First name required"; } if (document.getElementById("lastname").value == "") { document.getElementById("lastnameError").innerHTML = "Last name required"; } output += "The form would submit the following information:" output += "\\nFirst name: " + document.getElementById("firstname").value; output += "\\nLast name: " + document.getElementById("lastname").value; if (document.getElementById("male").checked == true) { output += "\\nSex: Male"; } else { output += "\\nSex: Female"; } if (document.getElementById("car").checked == true) { output += "\\nI have a car"; } var education = document.getElementById("education"); output += "\\nEducation: " + education.options[education.selectedIndex].text; document.getElementById("output").value = output; } var btnSubmit = document.getElementById('btnSubmit') btnSubmit.addEventListener('click', function(e) { e.preventDefault() processForm() })

 <div id="header"> <h1>HTML Forms</h1> </div> <div id="content"> <form id="detailsForm"> <p> First name&#58;<input type="text" name="firstname" id="firstname" />* <span id="firstnameError"></span><br /> Last name&#58;<input type="text" name="lastname" id="lastname" />* <span id="lastnameError"></span><br /> Username&#58; <input type="text" name="username" id="username" />* <span id="usernameError"></span><br /> Male <input type="radio" name="sex" value="male" id="male" /> Female<input type="radio" name="sex" value="female" id="female" checked /> <br /> I have a car&#58; <input type="checkbox" name="vehicle" value="Car" id="car" /><br /> Select a Level of Education&#58;<br /> <select name="education" id="education"> <option value="Secondary School">Secondary School</option> <option value="University">University</option> </select> <br /> <button id="btnSubmit">Click me</button> </p> <p> <textarea name="output" id="output" rows="10" cols="100"></textarea> </p> </form> </div>