Question

我在一页上有多个表单，这些表单具有使用AJAX执行的不同ID：

<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实际上运行良好，但仅考虑第一种形式的输入值。我很确定这是因为它们都是相同的类，并且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>

我只希望在提交按钮上添加类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：一个脚本具有多种形式。如何只考虑提交的？

1 个答案: