表单清除/提交Javascript
[英]Form Clear/Submit Javascript
问题描述
So I have a HTML form, I need to clear the form inputs when a key is pressed and default content gets deleted as well. 
因此，我有一个HTML表单，我需要在按下键并清除默认内容时清除表单输入。 If reset is clicked, the form resets to its default "Enter ect" and you have to input something again. 如果单击了reset，则表单将重置为其默认的“ Enter ect”，并且您必须再次输入一些内容。 Also, if submit is clicked without one of the fields entered, it should display an error saying one of my fields are empty, how would I do that using JS? 另外，如果在没有输入任何字段的情况下单击了提交，它将显示一个错误，表明我的一个字段为空，我该如何使用JS做到这一点？
I tried using JS to clear the default form but all of them get deleted at once rather than the one that gets clicked on. 我尝试使用JS清除默认表单，但是所有这些表单都会立即被删除，而不是被单击的表单。
HTML: HTML：
<!doctype html>
<html lang="en">
<head>
<title> Forms </title>
<style>
span {
padding-left: 10px;
display: block;
float: left;
width: 20%;
}
button { margin-left: 10px; }
body {
width: 80%; margin: auto; font-family: sans-serif;
border: 1px solid black;
}
</style>
<meta charset="utf-8">
<script src="prototype.js"></script>
<script src="formsubmit.js"></script>
</head>
<body>
<h1> Task 2: Keyboard Events and Form Submit </h1>
<p> <span>Name:</span> <input id="input1" value="Enter Name" name="Name"></p>
<p> <span>Id:</span> <input id="input2" value="Enter ID" name="ID"></p>
<p> <span>Email:</span> <input id="input3" value="Enter Email" name="Email"></p>
<p>
<button id="submitButton" type="button"> Submit </button>
<input type="reset" value="Reset">
</p>
<p style="color:red" id="ErrorMessage"> </p>
</form>
</body>
</html>
JS: JS：
window.onload=function(){
document.getElementById('input1').value = "";
document.getElementById('input2').value = "";
document.getElementById('input3').value = "";
}
1 个解决方案
解决方案1
2 已采纳 2018-11-05 06:54:37
<!doctype html> <html lang="en"> <head> <title> Forms </title> <script> //window.onload = Reset(); function reset(){ document.getElementById('input1').value = ""; document.getElementById('input2').value = ""; document.getElementById('input3').value = ""; document.getElementById('ErrorMessage').innerHTML = ""; } function submit(){ var inp1 = document.getElementById('input1').value; var inp2 = document.getElementById('input2').value; var inp3 = document.getElementById('input3').value; if(inp1 == "" || inp2 == "" || inp3 == "") { document.getElementById('ErrorMessage').innerHTML = "Please enter all fields"; } else{ //do your code here document.getElementById('ErrorMessage').innerHTML = ""; } } </script> <style> span { padding-left: 10px; display: block; float: left; width: 20%; } button { margin-left: 10px; } body { width: 80%; margin: auto; font-family: sans-serif; border: 1px solid black; } </style> <meta charset="utf-8"> <script src="prototype.js"></script> <script src="formsubmit.js"></script> </head> <body> <h1> Task 2: Keyboard Events and Form Submit </h1> <p> <span>Name:</span> <input id="input1" value="" placeholder="Enter Name" name="Name"></p> <p> <span>Id:</span> <input id="input2" value="" placeholder="Enter ID" name="ID"></p> <p> <span>Email:</span> <input id="input3" value="" placeholder="Enter Email" name="Email"></p> <p> <button id="submitButton" type="button" onclick="submit()"> Submit </button> <button id="resetButton" type="button" onclick="reset()"> Reset </button> </p> <p style="color:red" id="ErrorMessage"> </p> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.