Jquery - 同じ特性を持つ複数のフォームから1つのフォーム（およびその値）を選択してください

Question

同様の特性（idは一意にします）を持つページ上にいくつかのフォームjQueryとAJAX（.click）を使ったアクション。私の問題は、jQueryで欲しいフォームを選択することです。私が最初のフォームを選択する限り、私は現時点では問題はありません。私はダイナミックセレクターの設定に助けが必要です、どうすればいいですか？事前にどうもありがとうございました！

マイHTML：

Form 1: 
<form name="smsform-1" id="smsform-1" method='post' class="form-inline"> 
    <input type='hidden' name='id' id='id' value='1'> 
    <input type='hidden' name='sms' id='sms' value="Sample Text 1"> 
    <input type='hidden' name='phoneno' id='phoneno' value='1111'> 
    <input type='submit' value='SMS' id='send_sms' data-id='1' class="btn btn-primary btn-xs"> 
</form> 

Form 2: 
<form name="smsform-2" id="smsform-2" method='post' class="form-inline"> 
    <input type='hidden' name='id' id='id' value='2'> 
    <input type='hidden' name='sms' id='sms' value="Sample Text 2"> 
    <input type='hidden' name='phoneno' id='phoneno' value='2222'> 
    <input type='submit' value='SMS' id='send_sms' data-id='2' class="btn btn-primary btn-xs"> 
</form> 

Form 3: 
<form name="smsform-3" id="smsform-3" method='post' class="form-inline"> 
    <input type='hidden' name='id' id='id' value='3'> 
    <input type='hidden' name='sms' id='sms' value="Sample Text 3"> 
    <input type='hidden' name='phoneno' id='phoneno' value='3333'> 
    <input type='submit' value='SMS' id='send_sms' data-id='3' class="btn btn-primary btn-xs"> 
</form> 

のjQuery：

$(document).ready(function() { 
    $('#send_sms').click(function(e) { 
     e.preventDefault(); 
    var elem = $(this), orderid = elem.attr('data-id'); 
     var testid = $("#id").val(); 
     var testsms = $("#sms").val(); 
    var testphoneno = $("#phoneno").val(); 
     console.log(orderid); 
     console.log(testid);    
     console.log(testsms); 
    console.log(testphoneno); 
    alert(orderid + +testid + testsms + testphoneno); 
    }); 
}); 

と作業jsFiddle - https://jsfiddle.net/nitadesign/cjqwkrh0/9/

Answer 1

あなたのボタンは、私はそれらを見つけるために、このセレクタを使用し、常にあなたが望む隠しフィールドの ... 兄弟ですので。

私はあなたのHTMLを簡素化するために自由を取ったことをお知らせします。
名前とIDの代わりにクラスを使用して、それを判断しました。
次に、each()ループがそれぞれの値を取得できます。

はまた、私はclick()機能外varを宣言し気づきます。
これはあなたのAjax関数（表示されていません）の後に実行されます。

$(document).ready(function() { 
 
\t var orderid; 
 
\t var sms; 
 
\t var phoneno; 
 
\t 
 
\t $('.send_sms').click(function(e) { 
 
\t \t e.preventDefault(); 
 
\t \t 
 
\t \t $(this).siblings().each(function(){ 
 
\t \t \t if($(this).hasClass("orderid")){ 
 
\t \t \t \t orderid = $(this).val(); 
 
\t \t \t \t console.log(orderid); 
 
\t \t \t } 
 
\t \t \t if($(this).hasClass("sms")){ 
 
\t \t \t \t sms = $(this).val(); 
 
\t \t \t \t console.log(sms); 
 
\t \t \t } 
 
\t \t \t if($(this).hasClass("phoneno")){ 
 
\t \t \t \t phoneno = $(this).val(); 
 
\t \t \t \t console.log(phoneno); 
 
\t \t \t } 
 
\t \t }); 
 
\t \t alert("OrderId: " +orderid+ " Message: " +sms+ " phone number: " +phoneno); 
 
\t }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
Form 1: <form name="smsform-1" method="post" class="form-inline"> 
 
\t <input type="hidden" class="orderid" value="1"> 
 
\t <input type="hidden" class="sms" value="Sample Text 1"> 
 
\t <input type="hidden" class="phoneno" value="1111"> 
 
\t <input type="submit" value='SMS' class="btn btn-primary btn-xs send_sms"> 
 
</form> 
 

 
Form 2: <form name="smsform-2" method="post" class="form-inline"> 
 
\t <input type="hidden" class="orderid" value="2"> 
 
\t <input type="hidden" class="sms" id="sms_2" value="Sample Text 2"> 
 
\t <input type="hidden" class="phoneno" value="2222"> 
 
\t <input type="submit" value='SMS' class="btn btn-primary btn-xs send_sms"> 
 
</form> 
 

 
Form 3: <form name="smsform-3" method="post" class="form-inline"> 
 
\t <input type="hidden" class="orderid" value="3"> 
 
\t <input type="hidden" class="sms" value="Sample Text 3"> 
 
\t <input type="hidden" class="phoneno" value="3333"> 
 
\t <input type="submit" value='SMS' class="btn btn-primary btn-xs send_sms"> 
 
</form>

Answer 2

$(document).ready(function() { 
 
    //change of selector 
 
\t $("input[id='send_sms']").click(function(e) { 
 
\t \t e.preventDefault(); 
 
    var elem = $(this), \t orderid = elem.attr('data-id'); 
 
\t \t var testid = $("#id").val(); 
 
\t \t var testsms = $("#sms").val(); 
 
    var testphoneno = $("#phoneno").val(); 
 
\t \t console.log(orderid); 
 
\t \t console.log(testid); \t \t \t 
 
\t \t console.log(testsms); 
 
    console.log(testphoneno); 
 
    alert(orderid + +testid + testsms + testphoneno); 
 
\t }); 
 
});

Form 1: <form name="smsform-1" id="smsform-1" method='post' class="form-inline"> 
 
\t <input type='hidden' name='id' id='id' value='1'> 
 
    <input type='hidden' name='sms' id='sms' value="Sample Text 1"> 
 
    <input type='hidden' name='phoneno' id='phoneno' value='1111'> 
 
    <input type='submit' value='SMS' id='send_sms' data-id='1' class="btn btn-primary btn-xs"> 
 
</form> 
 

 
Form 2: <form name="smsform-2" id="smsform-2" method='post' class="form-inline"> 
 
\t <input type='hidden' name='id' id='id' value='2'> 
 
    <input type='hidden' name='sms' id='sms' value="Sample Text 2"> 
 
    <input type='hidden' name='phoneno' id='phoneno' value='2222'> 
 
    <input type='submit' value='SMS' id='send_sms' data-id='2' class="btn btn-primary btn-xs"> 
 
</form> 
 

 
Form 3: <form name="smsform-3" id="smsform-3" method='post' class="form-inline"> 
 
\t <input type='hidden' name='id' id='id' value='3'> 
 
    <input type='hidden' name='sms' id='sms' value="Sample Text 3"> 
 
    <input type='hidden' name='phoneno' id='phoneno' value='3333'> 
 
    <input type='submit' value='SMS' id='send_sms' data-id='3' class="btn btn-primary btn-xs"> 
 
</form>

今すぐ、セレクタを変更しました

Answer 3

jQueryの.closest()関数をチェックしてください。それはあなたがそれを与える式と一致する要素の第一の親を探します。フォームがクリックされています。それはあなたが探しているものだ場合、クリックイベント内の

は、あなたが、あなたは、フォームのidを持つ変数があるでしょう

var clicked_button_form_id = elem.closest('form').attr('id');

を追加することができます。

Answer 4

これを試してください。あなたはsubmitにclickイベントを結合してそのparent formを取得し、parent form

$(document).ready(function() { 
     $('input[type="submit"]').click(function (e) { 
      e.preventDefault(); 
      var elem = $(this), orderid = elem.attr('data-id'); 
      var form = $(this).parent(); 


      var testid = form.find("input[name='id']").val(); 
      var testsms = form.find("input[name='sms']").val(); 
      var testphoneno = form.find("input[name='phoneno']").val(); 
      console.log(orderid); 
      console.log(testid); 
      console.log(testsms); 
      console.log(testphoneno); 
      alert(orderid + +testid + testsms + testphoneno); 
     }); 
    }); 

Answer 5

に関してinputの値は、ルック添付スニペットを持って見つけることができます。

$(document).ready(function() { 
 
\t $('.btn').click(function(e) { 
 
\t \t e.preventDefault(); 
 
    var elem = $(this), \t orderid = elem.attr('data-id'); 
 
\t \t var testid = $("#id_"+orderid).val(); 
 
\t \t var testsms = $("#sms_"+orderid).val(); 
 
    var testphoneno = $("#phoneno_"+orderid).val(); 
 
\t \t //console.log(orderid); 
 
\t \t //console.log(testid); \t \t \t 
 
\t \t //console.log(testsms); 
 
    //console.log(testphoneno); 
 
    alert(orderid + +testid + testsms + testphoneno); 
 
\t }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
Form 1: <form name="smsform-1" id="smsform-1" method='post' class="form-inline"> 
 
\t <input type='hidden' name='id' id='id_1' value='1'> 
 
    <input type='hidden' name='sms' id='sms_1' value="Sample Text 1"> 
 
    <input type='hidden' name='phoneno' id='phoneno_1' value='1111'> 
 
    <input type='submit' value='SMS' id='send_sms' data-id='1' class="btn btn-primary btn-xs"> 
 
</form> 
 

 
Form 2: <form name="smsform-2" id="smsform-2" method='post' class="form-inline"> 
 
\t <input type='hidden' name='id' id='id_2' value='2'> 
 
    <input type='hidden' name='sms' id='sms_2' value="Sample Text 2"> 
 
    <input type='hidden' name='phoneno' id='phoneno_2' value='2222'> 
 
    <input type='submit' value='SMS' id='send_sms' data-id='2' class="btn btn-primary btn-xs"> 
 
</form> 
 

 
Form 3: <form name="smsform-3" id="smsform-3" method='post' class="form-inline"> 
 
\t <input type='hidden' name='id' id='id_3' value='3'> 
 
    <input type='hidden' name='sms' id='sms_3' value="Sample Text 3"> 
 
    <input type='hidden' name='phoneno' id='phoneno_3' value='3333'> 
 
    <input type='submit' value='SMS' id='send_sms' data-id='3' class="btn btn-primary btn-xs"> 
 
</form>