使用 jquery $.ajax 提交表单 - 第一次提交

Submitting forms using jquery $.ajax - oly the first submits

本文关键字：提交 表单 第一次 ajax jquery 使用      更新时间：2023-09-26

我在提交 AJAX 表单时遇到问题 - 使用本教程。

我的表单是div#upform的，当我尝试通过$.ajax提交其中任何一个时，它只提交第一个，这是代码：

$(function() {  
    $(".button").click(function() {  
        var txt = $(".tekst#test").val();  
        var dataString = 'tekst='+ tekscior;
        $.ajax({  
            type: "POST",  
            url: "upload/base",  
            data: dataString,  
            success: function() {  
                $('#upform').html("<div id='message'></div>");  
                $('#message').html("<h2>described!</h2>")  
                    .append("<p>thanks!</p>")  
                    .hide()  
                    .fadeIn(1500, function() {  
                        $('#message').append("<img id='checkmark' src='http://artivia-dev2/i/check.png' />");  
                    });  
            }  
        });  
        return false; 
    });  
});

以下是我的表格：

<!-- ONLY THIS ONE IS SUBMITTED, EVEN WHEN I'M SUBMITTING THE SECOND ONE! -->
<div class="slidingDiv">
    <div id="upform">
        <form name="contact" action="">  
            <input type="text" value="TESTFORM" class="tekst" id="test">
            <input type="submit" name="submit" class="button" id="submit" value="Send" />
        <form>
    </div> 
    <div class="slidingDiv">
        <div id="upform">
            <form name="contact" action=""> 
                <input type="text" value="TESTFORM" class="tekst" id="test">
                <input type="submit" name="submit" class="button" id="submit" value="Send" />
            <form>
        </div>

@@UPDATE

问题，当我提交一个表单时 - 这很好 - 但是当提交这个表单后我想提交第二个表单时 - 数据已正确提交，但成功消息在两种表单中都刷新，这就是修复程序，我已经尝试使用，但它不起作用：

    $.ajax({  
          type: "POST",  
          url: "upload/base",  
          data: dataString,  
          success: function() {  
        upform.html("<div class='message'></div>");  
             var mess =  $(this).closest('.message');
             mess.html("<h2>Described</h2>")  
            .append("<p>Thanks!</p>")  
            .hide()  
            .fadeIn(1500, function() {  
            mess.append("<img id='checkmark' src='http://ar-dev2/i/check.png' />");  
            });  

          }  
        });

首先，您不应该对多个元素使用相同的id。相反，您可以使用class或name或data属性。

$(".button").click(function() {  
   var upform = $(this).closest('.upform'); // keep reference of upform
    var txt = $(this).prev(".tekst").val();  // this will retrieve the value of input
                                             // nearest to the button
    var dataString = 'tekst='+ tekscior;
    ......
    $.ajax({
      type: "POST",  
      url: "upload/base",  
      data: dataString,
      success: function() {
        upform.html();
        .....
      }
    });
});

var txt = $(".tekst#test");选择器的问题：

它

已经开始从顶部搜索，当它找到匹配项时，它会停止旅程并返回值，您始终会获得第一个的值。如果您使用

var txt = $(".tekst");没有id，您将面临同样的问题。

ID 是单数的。您不能在页面上多次使用相同的 ID！

如果要重复标识符，请使用名称。

您应该为两个表单使用不同的 ID。两个表单具有相同的 ID upform

相关文章：