在JavaScript中提交後的清除表單

我看到這已被多次詢問，但在嘗試所有不同的組合後，仍然無法在提交時清除表單。在JavaScript中提交後的清除表單

我只是一個HTML和JS的初學者，所以我的代碼有點不一致，而且沒有很好的縮進。

<html> 
<body> 
<style> 
body{ background-color:powderblue;} 
h1{text-align:center} 
h1{color:purple;} 
</style> 
<h1>Fill up the details</h1> 
<form name="myform"> 
Name: <input type="text" value="" name="name"\> 
<br> 
<br> 
Class: <input type="text" value="" ></td> 
<br> 
<br> 
Register No.: <input type="number" value="" > 
<br> 
<br> 
Username: <input type="text" value="" name="username"\> 
<br> 
<br> 
Password: <input type="password" value="" name="password1"\> 
<br> 
<br> 
Re-enter Password: <input type="password" value="" name="password2"\> 
<br> 
<br> 
Mobile No.: <input type="number" value="" \> 
<br> 
<br> 
Email: <input type="text" value="" \> 
<br> 
<br> 
</form> 
<script type="text/javascript"> 
function show_alert() 
{ 
var name=document.myform.name.value; 
var password1=document.myform.password1.value; 
var password2=document.myform.password2.value; 
if (name==null || name=="") 
{ 
alert("Name can't be blank"); 

} 
else if(password1!=password2) 
{ 
alert("password must be same!"); 
return false; 
} 
else if(password1.length<6) 
{ 
alert("Password must be at least 6 characters long."); 
return false; 
} 
else 
{ 
alert("Your account has been created!!!!!"); 
return false; 
} 
function reset() 
{ 
var form=document.getElementById("myform"); 
form.reset(); 
alert("Form has been reset."); 
} 
} 
</script> 
<input type="button" value="Submit" onclick="show_alert()"/> 
<input type="button" value="Reset" onclick="reset()"/> 
</body> 
</html>

來源

2016-08-02 vks2910

重複這一個：http://stackoverflow.com/questions/14589193/clearing-my-form-inputs-after-submission –

讓表單的ID和使用下面的腳本

<script> 
function myFunction() { 
    document.getElementById("myForm").reset(); 
} 
</script>

演示

<form id="myForm"> 
 
    First name: <input type="text" name="fname"><br> 
 
    Last name: <input type="text" name="lname"><br><br> 
 
    <input type="button" onclick="myFunction()" value="Reset form"> 
 
</form> 
 

 
<script> 
 
function myFunction() { 
 
    document.getElementById("myForm").reset(); 
 
} 
 
</script>

來源

2016-08-02 18:29:04 bhansa

由於某種原因，它仍然不清除窗體關閉這一頁。我照你說的做了，但仍然不適合我。 – vks2910

你沒有將ID設置爲您的形式，但用它在Javascript代碼:)

<html> 
 
    <body> 
 
    <style> 
 
     body{ background-color:powderblue;} 
 
     h1{text-align:center} 
 
     h1{color:purple;} 
 
    </style> 
 
    <h1>Fill up the details</h1> 
 
    <form name="myform" id="myform"> 
 
     Name: <input type="text" value="" name="name"\> 
 
     <br> 
 
     <br> 
 
     Class: <input type="text" value="" ></td> 
 
    <br> 
 
    <br> 
 
    Register No.: <input type="number" value="" > 
 
    <br> 
 
    <br> 
 
    Username: <input type="text" value="" name="username"\> 
 
    <br> 
 
    <br> 
 
    Password: <input type="password" value="" name="password1"\> 
 
    <br> 
 
    <br> 
 
    Re-enter Password: <input type="password" value="" name="password2"\> 
 
    <br> 
 
    <br> 
 
    Mobile No.: <input type="number" value="" \> 
 
    <br> 
 
    <br> 
 
    Email: <input type="text" value="" \> 
 
    <br> 
 
    <br> 
 
    </form> 
 
    <script type="text/javascript"> 
 
    function show_alert() 
 
    { 
 
     var name=document.myform.name.value; 
 
     var password1=document.myform.password1.value; 
 
     var password2=document.myform.password2.value; 
 
     if (name==null || name=="") 
 
     { 
 
     alert("Name can't be blank"); 
 

 
     } 
 
     else if(password1!=password2) 
 
     { 
 
     alert("password must be same!"); 
 
     return false; 
 
     } 
 
     else if(password1.length<6) 
 
     { 
 
     alert("Password must be at least 6 characters long."); 
 
     return false; 
 
     } 
 
     else 
 
     { 
 
     alert("Your account has been created!!!!!"); 
 
     reset(); 
 
     return false; 
 
     } 
 
    } 
 

 
    function reset(){ 
 
     console.log('reset called'); 
 
     var form=document.getElementById("myform"); 
 
     form.reset(); 
 
     alert("Form has been reset."); 
 
    } 
 
    </script> 
 
    <input type="button" value="Submit" onclick="show_alert()" /> 
 
    <input type="reset" value="Reset" onclick="reset()" /> 
 
    </body> 
 
</html>

PS。您也可以使用<input type='reset'>重置表單。更多的信息在這裏：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

來源

2016-08-02 18:33:28

在JavaScript中提交後的清除表單

回答

相關問題