2017-04-14 87 views
-1

我有一個while循環內部。我正在用ajax處理它。它只在第一個工作而不在其他結果上工作。請看一看。窗體內部while循環只處理第一個結果

<?php while($a = $stmt->fetch()){ ?> 
    <form method="post" action=""> 
     <input type="hidden" value="<?php echo $mbs_id; ?>" class="memid"> 
     <select class="validity" class="upgrade-valsel"> 
      <?php while($mv = $mval->fetch()){ extract($mv); ?> 
       <option value="<?php echo $mv_id; ?>"><?php echo $mv_validity; if($mv_validity == 1){ echo " month"; }else{ echo " months"; } ?></option> 
      <?php } ?> 
     </select> 
     <input type="submit" value="Upgrade" class="submit"> 
     <div class="center-align" style="margin-left: -20px"><img src="images/loading.gif" width="auto" id="loading-rent" style="margin-right: 0px; height: 40px"></div> 
    </form> 
<?php } ?> 

當我點擊第一個結果的提交按鈕時,它會處理結果。但是當我點擊其他按鈕時,它只是刷新頁面。我嘗試用CLASS替換所有的ID,但之後甚至沒有第一個工作。請幫幫我。

腳本

$(document).ready(function() { 
    $(".submit").click(function() { 
     var dataString = { 
      memid: $(".memid").val(), 
      validity: $(".validity").val() 
     }; 
     $.confirm({ 
     title: 'Confirm!', 
     content: 'Are you sure you want to upgrade your membership to <?php echo $mbs_name; ?>?', 
     buttons: { 
     confirm: function() { 
        $.ajax({ 
         type: "POST", 
         dataType : "json", 
         url: "upgrade-process.php", 
         data: dataString, 
         cache: true, 
         beforeSend: function(){ 
          $("#submit").hide(); 
          $("#loading-rent").show(); 
          $(".message").hide(); 
         }, 
         success: function(json){ 
          setTimeout(function(){ 
           $(".message").html(json.status).fadeIn(); 
           $("#submit").show(); 
           $("#loading-rent").hide(); 
          },1000); 
         } 
        }); 
     }, 
     cancel: function() { 
      $.alert('<span style="font-size: 23px">Upgrade Cancelled!</span>'); 
     } 
     } 
     }); 
     return false; 
    }); 
}); 
+1

這是因爲你沒有使用'$(this)' –

+0

在哪裏?你能解釋更多還是正確答案? –

+0

js不知道你想要使用哪種形式/輸入,因爲'$(「。memid」)'返回所有這些。 – Jeff

回答

2

至於@Alive死,傑夫試圖解釋它,您可以使用選擇,當你在這個組對象使用一個函數返回幾個對象,因此,jQuery的只有使用這組的第一個對象。

您必須使用「本」上的環境中工作:

$(".submit").click(function(e) { 
    e.preventDefault(); 
    // $(this) : your input with class .submit (the one you click) 
    // parent() : the parent of $(this) (the form) 
    // and then find the child with the unique class you want 
    var dataString = { 
     memid: $(this).parent().find(".memid").val(), 
     validity: $(this).parent().find(".validity").val() 
    }; 
    // EDIT: Get the loading image (you should use a class instead of this selector) 
    var loader = $(this).parent().find("> div"); 
    // After you can use loader in this function and all sub functions 
    loader.hide(); 
    // And then the rest of your code with the same logic... 
}); 

注重每個功能都有不同的$(這)與它的執行上下文。

+0

有剛過提交按鈕..它應顯示的點擊,但其僅低於第一個結果的按鈕顯示無論從哪個結果被點擊了哪個按鈕的特定按鈕下方加載圖像...請幫助。 。 –

0

使用preventDefault(),以阻止該網頁刷新當您單擊submit按鈕。使用this來獲取當前表單的值。更改您的dataString以使用this獲取當前表單的值。

$(document).ready(function() { 
$(".submit").click(function(e) { 
    e.preventDefault(); 
    var dataString = { 
     memid: $(this).parent().find(".memid").val(), 
     validity: $(this).parent().find(".validity").val() 
    }; 
    $.confirm({ 
    title: 'Confirm!', 
    content: 'Are you sure you want to upgrade your membership to <?php echo $mbs_name; ?>?', 
    buttons: { 
    confirm: function() { 
       $.ajax({ 
        type: "POST", 
        dataType : "json", 
        url: "upgrade-process.php", 
        data: dataString, 
        cache: true, 
        beforeSend: function(){ 
         $("#submit").hide(); 
         $("#loading-rent").show(); 
         $(".message").hide(); 
        }, 
        success: function(json){ 
         setTimeout(function(){ 
          $(".message").html(json.status).fadeIn(); 
          $("#submit").show(); 
          $("#loading-rent").hide(); 
         },1000); 
        } 
       }); 
    }, 
    cancel: function() { 
     $.alert('<span style="font-size: 23px">Upgrade Cancelled!</span>'); 
       } 
      } 
     }); 
     return false; 
    }); 
}); 
相關問題