0

我正在做三件事：

我正在使用此表格发送信息。

<form method="post" id="myForm" action="includes/functions.php">
    <input type="hidden" name="group_id" value="$group_id" />
    <input type="hidden" name="submit_join"/>
    <button class="request" id="sub" name="submit_join">Join</button>
</form>

这个 jQuery 脚本运行一个 PHP 脚本。

$("#sub").click(function() {
 $.post( $("#myForm").attr("action"), 
         $("#myForm :input").serializeArray(), 
         function(){ $("#sub").html("Applied").fadeIn().addClass("applied").removeClass("request"); 
   });
});
$("#myForm").submit(function() {
  return false; 
});

这就是 PHP 脚本的作用。（不是准备好的声明）

if (isset($_POST['submit_join'])) {
  //User ID
  $user_id = $_SESSION['user_id'];
  $group_id = $_POST['group_id'];

  $sql="INSERT INTO group_assoc (user_id, group_id, permission, dateTime) VALUES ('$user_id', '$group_id', 0, now())";
  if (!mysqli_query($connection, $sql)) {
    die('Error: ' . mysqli_error($connection));
  }
}

- 当有人单击按钮一次时，它工作得很好。

  • 它触发 jQuery 脚本
  • jQuery 脚本触发 PHP 脚本
  • PHP 完成了它的工作
  • jQuery 删除类“请求”并放置一个类“应用”

问题： 当同一个用户单击另一个按钮（意味着他们刚刚单击的按钮的副本）时，页面会忽略 jQuery 脚本并执行通常会执行的操作，刷新页面。这是不需要的过程。

为什么有几个表格，因此为什么有几个按钮？我正在为网站中的每个组执行 PHP while 循环，每个表单都包含一个按钮（加入），允许您加入组并使用上面的 jQuery 脚本更改数据库上的值。

问题：如何重新绑定 jQuery 脚本，以便在单击另一个按钮 ( <button class="request" id="sub" name="submit_join">Join</button>) 时不会忽略 jQuery 脚本？

4

3 回答 3

1

问题似乎是您正在使用重复的 ID，请尝试使用 classes 而不是 id

<form method="post" class="myForm" action="includes/functions.php">
    <input type="hidden" name="group_id" value="$group_id" />
    <input type="hidden" name="submit_join" />
    <button class="request" class="sub" name="submit_join">Join</button>
</form>

和

$(document).on('submit', '.myForm', function () {
    return false;
})
$(document).on('submit', '.sub', function () {
    var $form = $(this).closest('form');
    $.post($form.attr("action"),
    $form.serializeArray(), function () {
        $("#sub").html("Applied").fadeIn().addClass("applied").removeClass("request");
    });
})
于 2013-09-27T03:20:43.820 回答
0

将事件传递给事件处理程序总是一个好主意，并event.preventDefault()避免浏览器对元素的默认行为。

$("#myForm").submit(function(event) {
  event.preventDefault(); 
});

对于多个表单，您可以使用一个处理程序来处理表单提交。$('#sub')将只绑定到页面上的第一个按钮，使用一个类来附加到相同类型的多个按钮，这仍然是低效的。这是一个示例：

$('.subbtn').click(function(e){
    var $form = $(this).parents('form'),
        subUrl = $form.attr('action');    

    e.preventDefault();
    $.post(...)  ;  
})

该处理程序应满足您的要求。但是，您可以使用附加到表单的通用包装器（最坏情况下为“正文”）的单个处理程序来提高效率。

于 2013-09-27T03:26:48.693 回答
0

就像 jagzviruz 所说的那样，最好使用提交事件的事件处理程序来防止页面刷新。此外，请确保您没有任何重复的元素 ID。

我的方法是这样的：（未经测试）

HTML

<form method="post" class="myForm" action="includes/functions.php">
<input type="hidden" name="group_id" value="$group_id" />
<input type="hidden" name="submit_join"/>
<button class="request" class="submit" name="submit_join">Join</button>

JS

$(".myForm").each(function() {
    var $form = $(this),
        action = $form.attr('action'),
        $submit = $form.find('.submit');

    $form.submit(function(event) {
        event.preventDefault();

        return false;
    });

    $submit.click(function(event) {
        event.preventDefault();

        $.post(...);
    });
});

这与 jagzviruz 提出的解决方案几乎相同，但.each()为了清楚起见，我更喜欢在 an 内部做这样的事情。

于 2013-09-27T05:11:21.990 回答