1

このチュートリアルを使用して、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>

@@アップデート

問題、1つのフォームを送信すると-それは素晴らしいです-しかし、この1つの送信後に2番目を送信したい場合-データは正しく送信されますが、両方のフォームで成功メッセージが更新されます。これが修正です。使用しますが、機能しません:

    $.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' />");  
            });  


          }  
        });
4

3 に答える 3

6

idまず、同じ要素を複数の要素に使用しないでください。その代わりにclassornameまたは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ば、同じ問題に直面します。

于 2012-05-25T12:04:21.650 に答える
2

ID は単数です。ページに同じ ID を複数持つことはできません。

識別子を繰り返したい場合は、name を使用します。

于 2012-05-25T12:04:30.117 に答える
0

両方のフォームに異なる ID を使用する必要があります。両方のフォームの ID が同じですupform

于 2012-05-25T12:05:44.823 に答える