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で送信した後にフォームをクリアする

答えて

関連する問題