Question

目前有一些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选择器，而是通过将其更改为类选择器来解决它

Answer 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（）将禁止提交表单。

Answer 2

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

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

Answer 3

您可以尝试此e.preventDefault()

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

Answer 4

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

Answer 5

表单操作导致它进入php页面。我们使用jQuery来抑制默认操作，因为你有按钮运行你的功能。

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

我认为会这样。

Answer 6

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

jQuery表单提交不会返回false

6 个答案: