窗體內部while循環只處理第一個結果

Question

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

<?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; 
    }); 
}); 

Answer 1

至於@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... 
}); 

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

Answer 2

使用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; 
    }); 
});