Question

我对提交 AJAX 表格有异议 - 使用 < a href=" http://net.tutsplus.com/tutorics/javascript-ajax/submit- a-form- a-form- non-page-refresh-using-jquery/" rel=“nofollow” > 辅导。

我的表格在 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  />");  
            });  


          }  
        });

Answer 1

首先,您不应对多个元素使用相同的 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();
        .....
      }
    });
});

Problem with `var txt = $(".tekst#test");` selector:

它开始从顶部搜索, 当它发现匹配时, 当它发现匹配时, 它停止旅程, 返回值, 然后返回第一个值, 您总是得到第一个值。如果您使用

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

Answer 2

身份识别码是单数的。您不能在页面上重复使用相同的身份识别码!

如果您想要重复标识符,请使用名称。

Answer 3

您应该对两种窗体使用不同的代号。您的两种窗体都有相同的 ID appform 。

Problem with var txt = $(".tekst#test"); selector:

友情链接

Problem with `var txt = $(".tekst#test");` selector: