Php 表单在未提交的情况下被提交

Question

我想在我的网站上做一个调查，因为我正在设计一个 php 表格表格看起来像这样。

<?php    
    function survey(){
?>
        <script>
          $(document).ready(function(){
                $("intro").show();
                $("q1").hide();
                $("q2").hide();
            $("#continue").click(function(){
              $("intro").hide();
              $("q1").show();
            });
            $("#continue1").click(function(){
              $("intro").hide();
              $("q1").hide();
              $("q2").show();
            });
            $("#continue2").click(function(){
              $("q2").hide();
            });
          });
        </script>
        <intro>
          <p>Understanding of ...</p>
          <button id="continue">Continue</button>
        </intro>
        <form name="survey" action="<?php echo $_SERVER['PHP_SELF'];?>" id="survey">
          <q1>
            <p>[Q01]A balloon ...?</p>
            <input type="radio" name="q1" value="r">(a) The internal energy of the gas decreases from its initial value, but the enthalpyremains constant<br>
            <input type="radio" name="q1" value="w">(b) The internal energy of the gas increases from its initial value, but the enthalpyremains constant<br>
            <input type="radio" name="q1" value="w">(c) Both internal energy and enthalpy of the gas remain constant</br>
            <input type="radio" name="q1" value="w">(d) Both internal energy and enthalpy of the gas increase</br>
            <input type="radio" name="q1" value="w">e) Nothing can be inferred because the system is not in equilibrium</br>
            <button id="continue1">Continue</button>
          </q1>
          <q2>
            <p>[Q02] A system is ...</p>
            <input type="radio" name="q2" value="w">(a) Q1 = Q2 b.  W1<br>
            <input type="radio" name="q2" value="w">(b) W1 + Q1 = Q2 + W2</br>
            <input type="radio" name="q2" value="w">(c) W1 = W2 d.  Q1</br>
            <input type="radio" name="q2" value="r">(d) Q1 – W1 = Q2 – W2</br>
            <button id="continue2">Continue</button>
            <input type="submit" value="submit" id="submit">
          </q2>
        </form>
<?php
  }
?>

在另一个 php 页面中，我调用此函数来显示此表单。

表单应该像这样工作 当用户加载页面时 div 将显示，当用户按下继续按钮时 div 将加载它，预计将继续这样。

但是到底发生了什么 当用户在介绍中按下继续按钮时，表单将按我们预期的方式工作，然后用户再次按下继续按钮，介绍将隐藏并且 q1 将当用户再次显示时，按下继续按钮表单正在提交而没有按下提交按钮这有什么问题以及如何解决这个问题？

只有在按下提交按钮后才会提交表单。

Answer 1

没有声明 type 的 <button> 将默认为 type="submit"。您可以通过将其更改为 type="button"

来避免意外提交

<button type="button" id="continue1">Continue</button>

或者在您的点击处理程序中，您可以阻止默认事件

$("#continue1").click(function(evt){
    evt.preventDefault();

    /* other code*/
});

我看不出任何 hide/show 代码如何工作，因为您所有的 jQuery 选择器都是无效的。他们都在寻找不存在的标记名。

$("q1") 将匹配 <q1> 标记而不是您在表单中的元素。你应该花点时间在 selectors section of jQuery API

Php 表单在未提交的情况下被提交

Php form is getting submitted without submitting

html

php

forms

jquery