jQuery表单提交不会返回false答案

【问题标题】：jQuery form submission will not return falsejQuery表单提交不会返回false
【发布时间】：2013-10-20 00:42:47
【问题描述】：

目前 jQuery 有点问题。我有一个表，我的目标是有一个删除按钮，当单击它时，它会从 mySQL 后端删除它。我在功能方面没有问题，我的问题是我无法让 jQuery 返回 false，它一直重定向到我在表单标记中指向的 php 脚本。如果您发现代码有问题，请告诉我。

我设置了一个表结构，这只是为了显示从 mysql 查询返回的所有行。也许我没有正确设置表单。

<?php
if (sizeof($rows5) > 0) {
    foreach($rows5 as $row5):
    echo"
<tr class='tableRowClass2'>
<td>{$row5['PackingSlipStarmontID']}</td>
<td>{$row5['fullStarmont']}</td>
<form action='delete/starmont.php' method='post' name='deletestarmontForm' id='deletestarmontForm'>
<td>
    <button id='button3'>Remove</button>
    <input type='hidden' id='PackingSlipStarmontID' name='PackingSlipStarmontID' value='{$row5['PackingSlipStarmontID']}'/>
</td>
</form>
</tr>";
    endforeach;
}
?>

这里是 jQuery，它假设一旦提交表单就会停止页面重定向。

$(document).ready( function() {
    $("#button3").click( function() {
        $.post( $("#deletestarmontForm").attr("action"), 
            $("#deletestarmontForm :input").serializeArray(), 
            function(info){
                $("#result4").html(info); 
           });
        });
        $("#deletestarmontForm").submit( function() {
            return false;   
        });
        function clearInput() {
        $("#deletestarmontForm :input").each( function() {
           $(this).val('');
        });
    }
});

所以这段代码在调用 php 脚本和 SQL 查询的意义上是有效的。问题是它重定向到那个 php 页面，而不是在提交时返回 false。

*编辑*** 谢谢大家的帮助。在这和实验之间，我已经解决了这个问题。似乎问题与重复的 ID 有关。我使用的代码与我发布的相同，但我没有使用 ID 选择器，而是通过将其更改为类选择器来解决它

【问题讨论】：

e.preventDefault() 在你返回 false 之前？
Id 应该始终是唯一的。
event.preventDefault(); 将在点击功能中完成工作
为什么你对按钮使用click 处理程序而不是对所有事情都使用submit 处理程序？然后你可以添加e.preventDefault 作为该处理程序中的第一行代码。
所以不是 .click，而是使用 .submit 并将 e.preventDefault 添加为第一行？

标签： javascript php jquery mysql forms

【解决方案1】：

您不能多次使用同一个 ID。所以，请注意我已将 ID 更改为 Class。

<?php
if (sizeof($rows5) > 0) {
    foreach($rows5 as $row5):
    echo"
<tr class='tableRowClass2'>
<td>{$row5['PackingSlipStarmontID']}</td>
<td>{$row5['fullStarmont']}</td>
<td>
    <button class='button3'>Remove</button>
    <input type='hidden' id='PackingSlipStarmontID' name='PackingSlipStarmontID' value='{$row5['PackingSlipStarmontID']}'/>
</td>
</tr>";
    endforeach;
}
?>

然后，您需要更改 jQuery 代码。您需要阻止按钮的默认行为。

$(document).ready( function() {
    $(".button3").click( function(event) {
     event.preventDefault();
     var value = $(this).siblings('input[type=hidden]').val();
     $.post( "/your/path", 
             { value : value }, 
             function(info){ $("#result4").html(info); 
       });
    });
});

表单会被$.post提交，但是event.prevenDefault()会抑制表单提交。

【讨论】：

不幸的是，这不起作用。我相信这与 foreach 循环内的表单有关。不过我可能是错的？
你是对的。我更新了答案。请告诉我它是如何工作的。
这确实有效，但它似乎没有传递隐藏文本框的值。有没有办法可以明确告诉它输入框的id，即'PackingSlipStarmontID...我说的是当它重定向时，SQL语句的执行是成功的，现在它失败了

【解决方案2】：

你可以试试这个e.preventDefault()

$("#button3").click( function(e) {
    e.preventDefault(); // <-- prevents default action
    // rest of the code
});

【讨论】：

【解决方案3】：

默认操作是转到您要阻止的表单页面。

$("#button3").click( function(e) {
    e.preventDefault();
    // rest of submit stuffs
});

【讨论】：

【解决方案4】：

$("#button3").click( function(e) {
    e.preventDefault();
});

【讨论】：

【解决方案5】：

表单操作导致它转到 php 页面。我们使用 jQuery 来抑制默认操作，因为您正在让按钮运行您的功能。

 $("#deletestarmontForm").submit( function() {
  return false;
  event.preventDefault();
});

我想会的。

【讨论】：

【解决方案6】：

虽然所有其他答案都很好地说明了使用e.preventDefault，但我认为这不是您问题的原因。 return false; 应该做你想做的就好了。您可以看到您的代码在此fiddle 中有效。我的猜测是您的代码还有其他问题。可能是一个 JS 错误（检查你的控制台），它阻止了处理程序的正确行为，因此回退行为是原始表单提交。

【讨论】：