2017-06-17 57 views
0

我在我的HTML頁面的頂部有一個表單,我希望在提交表單後消失。我的代碼(下面)雖然暫時隱藏了表單,但堅持要再次成形。任何幫助,將不勝感激。如何在JavaScript中使表單在提交時消失

感謝,

歐文·沃克

<!DOCTYPE html> 
<html> 
<body> 

<form id="form" onsubmit="myFunction()"> 
    Enter name: <input type="text" name="fname"> 
    <input type="submit" value="Submit"> 
</form> 

<div id="first_div" style="visibility:hidden">Second</div> 

<script> 
function myFunction() { 
    alert("The form was submitted"); 
    document.getElementById("form").style.display = "none"; 
    document.getElementById("first_div").style.visibility = "visible"; 
alert("after"); 
} 
</script> 

</body> 
</html> 

回答

0

你沒有做任何事情來阻止你的表單被提交,並重新加載頁面。表格行更改爲:

<form id="form" onsubmit="return myFunction()"> 

,並在你的函數警報之後添加:

return false; 
+0

謝謝!這兩個改變完美運作。 (不知道爲什麼。) –

+0

因爲要停止提交事件,您需要返回false。 – j08691

0

我會建議你使用jQuery,因爲它是做這種類型的東西,而不麻煩的有力工具... 遠遠就能

<!DOCTYPE html> 
<html> 
<body> 

<form id="form" onsubmit="myFunction()"> 
    Enter name: <input type="text" name="fname"> 
    <input type="submit" id="submit" value="Submit"> 
</form> 

<div id="first_div" style="visibility:hidden">Second</div> 

<script> 
// using JQuery 
$(document).ready(function(){ 
     $("#submit").click(function(e){ 
       e.preventDefault(); 
       $("#form").submit(); 
       $("#form").hide(); 
       alert("Your form was successfully submitted"); 
      }); 
    }); 
</script> 

</body> 
</html> 

` 注意使用的preventDefault(的)做以這種方式來阻止其提交表單當您單擊小號ubmit。