JavaScript / Ajax：一个脚本的多个表单。如何只考虑提交的？

Question

我在一个页面上有多个表单，这些表单具有不同的 ID，这些表单通过 AJAX:

执行

<form action="comment.php" class="testForm" id="1" method="POST">
    <input type="text" name="name">
    <input type="text" name="comment">
    <input type="submit">
</form>

<form action="comment.php" class="testForm" id="2" method="POST">
    <input type="text" name="name">
    <input type="text" name="comment">
    <input type="submit">
</form>

AJAX 实际上运行良好，但只考虑第一种形式的输入值。我很确定这是因为它们都是相同的 class 并且 ID (1,2..)

之间没有区别

<script>
$(document).ready(function() {

    $('.testForm').submit(function(event) {

        var formData = {
            'name'      : $('input[name=name]').val(),
            'comment'   : $('input[name=comment]').val()
        };

        $.ajax({
            type        : 'POST', 
            url         : 'comment.php', 
            data        : formData, 
            dataType    : 'json',
            encode      : true
        })

            .done(function(data) {
                console.log(data); 

                if (data.success) {
                    $('.testForm input[type="submit"]').addClass('red');
                }

            });

        event.preventDefault();

    });

});
</script>

我只想在已点击的提交按钮上添加 class red。

很抱歉我缺乏知识，我对此很陌生，我找不到有用的东西。

Answer 1

只需使用 this.id:

$('.testForm#'+form.id+' input[type="submit"]').addClass('red');

$(document).ready(function() {

  $('.testForm').submit(function(event) {
    var form = this; // capture correct this
    console.log(form.id) // should be 1 or 2 depending on the form

    var formData = {
      'name': $(form).find('input[name=name]').val(),
      'comment': $(form).find('input[name=comment]').val()
    };
    
    console.log(JSON.stringify(formData));

    $.ajax({
        type: 'POST',
        url: './',
        data: formData,
        dataType: 'json',
        encode: true
      })

      .done(function(data) {
        console.log(data);
        console.log(form.id)

        if (data.success) {
          $(form).find('input[type=submit]').addClass('red')
        }

      });

    event.preventDefault();

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="comment.php" class="testForm" id="1" method="POST">
  <input type="text" name="name" value="n1">
  <input type="text" name="comment" value="c1">
  <input type="submit">
</form>

<form action="comment.php" class="testForm" id="2" method="POST">
  <input type="text" name="name" value="n2">
  <input type="text" name="comment" value="c2">
  <input type="submit">
</form>

<form action="comment.php" class="testForm" id="3" method="POST">
  <input type="text" name="name" value="n3">
  <input type="text" name="comment" value="c3">
  <input type="submit">
</form>

<form action="comment.php" class="testForm" id="4" method="POST">
  <input type="text" name="name" value="n4">
  <input type="text" name="comment" value="c4">
  <input type="submit">
</form>

您还可以使用 jQuery 的 $.fn.find() 获取正确的形式，就像 @pschichtel 在他的评论中写道：

$(form).find('input[type=submit]').addClass('red')

JavaScript / Ajax：一个脚本的多个表单。如何只考虑提交的？

JavaScript / Ajax: Multiple Forms for one Script. How to consider only the submited one?

javascript

php

forms

ajax

submit