Question

使用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的新手。

Answer 1

您需要使用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 DEMO

更新：显示表单

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



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

Answer 2

如果您希望表单提交并且不打算使用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 }

使用JavaScript隐藏表单

2 个答案: