Hide Form Using Javascript

Javascript: function next(a) { if(a==1) { document.getElementById('form1').style.display='none'; } } HTML:

Solution 1:

You need to use return false

<form onsubmit="return next(1)" action="add.php" method="post"id="form1">

Then

functionnext(a)
{
  if(a==1){
    document.getElementById("form1").style.display="none";
    returnfalse;
  }
}

FIDDLE DEMO

UPDATE: To Show the form

<input type="Submit" value="Show"class="button"  
 onclick="return showForm()" name="show"/>



functionshowForm()
{
    document.getElementById("form1").style.display="block";
    returnfalse;
}

Solution 2:

If you want the form to submit and are not plann9ing to use AJAX, you need the PHP to do the hiding when reloading the page

if(isset($_POST['b1']))  { // name of your submit button$hide = true;
 ?>
 <input type="button" id="button1 value="click to show form again" />
<? } ?>

  <form id="form1" class="<?echo$hide?"hidden":"shown";?>"></form>

and add

$(function() {
  $("#button1").on("click",function() {
    $("#form1").prop("class","shown");
  });
});

plus a css

.hidden { display:none }
.shown { display:block }

Share

You may like these posts

• 
  When Should I Use Html5 Sessionstorage?
• 
  Update Browser's Url Without Reloading The Page
• 
  Css: Can't Place Two Divs Beside Each Other
• 
  Vue.js Component Not Working