提交表单并显示form2时隐藏表单

时间:2015-05-07 23:01:53

标签: jquery forms

我在页面中有两个表单,form1在加载页面时出现,表单提交时,出现form2。问题是我想在form2出现时隐藏form1,所以我一次只能看到表单。我相信我可以通过jquery实现这一目标但不知道如何实现。我的代码示例如下所示

<form name="form1" action="<?php $_SERVER['PHP_SELF'];?> " method="post" id="button">
      <label for="student_id" class="select"> Month of the Year </label>
      <select name="months" id="months">
      <option value="01">Jan</option>
      <option value="02">Feb</option>
      <option value="03">Mar</option>
      </select> 
      <input type="submit" id="form1" name="button" value=" Display Day">
</form>

<?php if (isset($_POST['form1'])){

echo"<form name=\"form2\" action=\"form.php\" method=\"post\" >
      <label for=\"day\" class=\"select\">Day of the Month</label>
      <select name=\"month\" id=\" month \">
      <option value=\"01\"> Monday </option>
      <option value=\"02\"> Tuesday </option>
      <option value=\"03\">Wednesday</option>
      </select> 
      <input type=\"submit\" name=\"link\" value=\" Display Month\">
</form>";
}
?>

由于

4 个答案:

答案 0 :(得分:0)

$(document).ready(function(){
     $('#form1').on('submit',function(){
      // make your form1 check here
      // hide form1
      $('#form2').slideDown(500);
      $(this).slideUp(500);
      return false;
     });
});

别忘了包含jquery库

答案 1 :(得分:0)

你可以通过JQuery来实现,但这并不是必需的,因为如果第一个表单已提交,你只会写第二个表单。在PHP中将其设为if / else,您的问题就解决了......

<?php if (isset($_POST['form1'])){

echo"<form name=\"form2\" action=\"form.php\" method=\"post\" >
      <label for=\"day\" class=\"select\">Day of the Month</label>
      <select name=\"month\" id=\" month \">
      <option value=\"01\"> Monday </option>
      <option value=\"02\"> Tuesday </option>
      <option value=\"03\">Wednesday</option>
      </select> 
      <input type=\"submit\" name=\"link\" value=\" Display Month\">
</form>";
} else {
echo"<form name=\"form1\" action=\"".$_SERVER['PHP_SELF']."\" method=\"post\" id=\"button\">
      <label for=\"student_id\" class=\"select\"> Month of the Year </label>
      <select name=\"months\" id=\"months\">
      <option value=\"01\">Jan</option>
      <option value=\"02\">Feb</option>
      <option value=\"03\">Mar</option>
      </select> 
      <input type=\"submit\" id=\"form1\" name=\"button\" value=\" Display Day\">
</form>";
}
?>

答案 2 :(得分:0)

你可以在没有jquery的情况下完成。

首先你可以在php中启动然后编写html然后在它下面写下右括号。 第二,你应该把你的第一个表格放在另一个表格下。

<?php if (!isset($_POST['form1'])){ ?>
<form name="form1" action="<?php $_SERVER['PHP_SELF'];?> " method="post" id="button">
      <label for="student_id" class="select"> Month of the Year </label>
      <select name="months" id="months">
      <option value="01">Jan</option>
      <option value="02">Feb</option>
      <option value="03">Mar</option>
      </select> 
      <input type="submit" id="form1" name="button" value=" Display Day">
</form>
<?php } ?>

<?php if (isset($_POST['form1'])){ ?>

      <form name="form2" action="form.php" method="post" >
      <label for="day" class="select">Day of the Month</label>
      <select name="month" id=" month ">
      <option value="01"> Monday </option>
      <option value="02"> Tuesday </option>
      <option value="03">Wednesday</option>
      </select> 
      <input type="submit" name="link" value=" Display Month">
</form>
<?php } ?>

答案 3 :(得分:0)

是的,您可以使用jQuery将处理程序绑定到第一个表单submit event

$("FIRST FORM SELECTOR").submit(function(event) {
    $("SECOND FORM SELECTOR").show();
    $( this ).hide();
}

要最初隐藏第二个表单,请使用以下内容:

<form style="visibility: hidden;">...</form>