Question

我这里有两个表单，第一个是select下拉选择，当发布时会生成另一个表单，根据所选的数字创建一个数量输入框。然后，第二种形式将输入框中的数据放入2个数组中。所有这一切都很完美，但我试图在第二个表单上的提交按钮中添加额外的功能。我创建了一个函数'showcontet（）'来显示和隐藏id为'table'的div中的内容。当在表单外部的按钮上使用时，这非常有效。当在表单内的提交按钮上使用时，您可以看到内容大约1秒钟，然后再次消失。

    <head>
      <script type="text/javascript">
           showcontent = function(){
              var content = document.getElementById('tabl');
              content.style.display = 'inline';
           }

      </script>
        <?php 
    $userkey = array();
    $userval = array();
    $usernum = $_POST['usernum'];
    $total = 0;
    ?>


        <form action='MYPIE.PHP' method='POST'>
                HOW MANY SECTIONS?
                    <select name="usernum" value="<?php echo $usernum;?>">
                          <option>1</option>
                          <option>2</option>
                          <option>3</option>
                          <option>4</option>
                          <option>5</option>
                          <option>6</option>
                          <option>7</option>
                          <option>8</option>
                          <option>9</option>
                    </select>
                <input type="submit" name="submitnum" value="submit selection" />
        </form>


    <form action='MYPIE.PHP' method='POST'>     
        <?php 
            for ($i=1; $i<$usernum+1; $i++){
                echo '<input type="hidden" value="' .$usernum.'" name="usernum" />';
                echo "<br>insert key:   <input name='key".$i."' value='".$userkey[$i]."'>   insert value:   <input name='val".$i."' >";

            $userkey[$i] = $_POST["key".$i];
            $userval[$i] = $_POST["val".$i];
            }

        ?>
        </br>
        <input type="submit" value="submit" name="submit keys" onclick="showcontent()" />
    </form>

    </table>


    <div id="tabl" style="display:none;">
    content
    </div>

对于糟糕的缩进道歉，我对这个＆amp;谢谢你的帮助

Answer 1

您需要从事件处理程序return false来阻止浏览器提交表单并加载页面。

Answer 2

让你的第二个按钮不是“提交”按钮，而是一个常规的“按钮” 否则它将触发表单的提交......

或

在表单'onsubmit'事件上设置'showcontent（）'函数，让该函数返回false：

onsubmit="return showcontent()"

function showcontent(){
    var content = document.getElementById('tabl');
    content.style.display = 'inline';

    $.ajax({
        type: "POST",
        url: "MYPIE.PHP",
        data: { usernum: $("select[name='usernum'] option:selected").val() }
        }).done(function() {
            alert('data posted');
    });

    return false;
}

Answer 3

您需要添加e.preventDefault（）;到事件处理程序，以防止浏览器提交表单并加载页面。

不要使用return false，因为这是您可能不想要的其他副作用。见http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/

表单提交仅运行Javascript函数一秒钟

3 个答案: