最初の結果のみで作業中のwhileループを作成する

Question

私はwhileループの中からaを持っています。私は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 } ?> 

最初の結果で[送信]ボタンをクリックすると、結果が処理されます。しかし、私は他のボタンをクリックするだけでそのページをリフレッシュします。私はすべてのIDをCLASSに置き換えようとしましたが、その後も第1のものでさえも動作していません。私を助けてください。

スクリプト

$(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

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

ご注意を各機能は、その実行コンテキストにリンクされている別の$（this）を持っています。

Answer 2

使用preventDefault()あなたがsubmitボタンをクリックしたときにリフレッシュからページを防ぐために。現在のフォームの値を取得するには、thisを使用します。 dataStringをthisに変更して、現在のフォームの値を取得します。 @Aliveとして

$(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; 
    }); 
});