javascript - 带有两个按钮的表单

Question

我正在尝试创建多个具有两个按钮的表单，每个按钮都会将表单提交到不同的脚本，一个通过ajax，第二个只会提交表单。

<?php foreach($objects as $object) : ?>      
<div class="card-body">
   <form id="edit-form" action="#" method="POST">
      <input name="subject" value="<?=$object['subject']?>" type="text" id="title" class="input-xxlarge">
      <textarea id="content" name="content" rows="25"><?=$object['content']?></textarea>
      <button type="button" id="send-button" class="btn btn-primary">Send</button>
      <input type="submit" id="submit-button" value="Submit"/>
   </form>
</div>
<?php endforeach; ?>

首先，我试图获取当前的表单，但我遇到了问题。 console.log 仅在第一个表单上显示某些内容，如果我单击其他表单中的按钮，那么它不会执行任何操作。

$('#send-button').on('click', function(e) {
        e.defaultPrevented;
        $form = $(this);
        $url = $form.attr('action');
        $data = $form.serialize(); console.log($form);
        console.log($url);
    });

是因为我的按钮对于每个表单都有相同的 ID 吗？

Answer 1

您不应在同一页面上多次使用 ID。尝试针对这种情况使用一个类。另外，如注释中所述，使用 e.preventDefault(); 来停止事件。

$(this) 将导致 #send-button 成为目标。要访问表单，您需要找到最接近的 form 元素，如下所示:

$form = $(this).closest('form');