使用JavaScript隐藏表单 - hide form using JavaScript

hide form using JavaScript

本文关键字：表单隐藏 JavaScript 使用 | 更新日期: 2023-09-27

Javascript:

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

HTML:

<form onsubmit="next(1)" action="add.php" method="post" id="form1">
    <center>Add New Survey</center>
     <p>&nbsp;</p>
    <p align="left"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Title:    </p>
    <textarea name="title" cols="2" class="inputs" id="title"></textarea>
    <p align="left"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Discription: (Optional)    </p>
    <textarea name="dis" cols="2" class="inputs" id="dis"></textarea>
     <p align="left"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Number of questions:    </p>

          <input type="Submit" value="Next" class="button" name="b1"/>
      </p>
  </form>

这是我的密码。当我提交表格时，它把表格隐藏了几秒钟，然后又出现了。我想隐藏它，直到按下另一个按钮，调用另一个javascript函数来显示表单。请帮帮我。我是javascript的新手。

您需要使用return false

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

然后

function next(a)
{
  if(a==1){
    document.getElementById("form1").style.display="none";
    return false;
  }
}

FIDDLE演示

更新：显示表单

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

function showForm()
{
    document.getElementById("form1").style.display="block";
    return false;
}

如果您希望表单提交，并且不打算使用AJAX，则需要PHP在重新加载页面时进行隐藏

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>

并添加

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

加上一个css

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