2017-09-07 22 views
-1

この質問は、そこにいる他の人のように聞こえるが、私は初心者でどこでも適切な解決策を見つけることができない。私は複数のサブミットボタンを持つバスケットフォームに追加しました。私はマルチベンダーの顧客に、オプションに基づいて異なる製品をバスケットに追加する機会を与えたいと思っています。JQuery:どのサブミットボタンがクリックされたかを検出

私が探しているのは、.submit()ハンドラを作成すると、実際にクリックされたボタンにアクセスできないようです。

ここでボタンを使用しようとするコードの最新の反復は.clickだ()ハンドラ:.clickを適用する以外に

enter image description here

$('#button-cart').on('click', function() { 
 
    $.ajax({ 
 
    url: 'index.php?route=checkout/cart/add', 
 
    type: 'post', 
 
    data: $('#product input[type=\'text\'], #product input[type=\'hidden\'], #product input[type=\'radio\']:checked, #product input[type=\'checkbox\']:checked, #product select, #product textarea'), 
 
    dataType: 'json', 
 
    beforeSend: function() { 
 
     $('#button-cart').button('loading'); 
 
    }, 
 
    complete: function() { 
 
     $('#button-cart').button('reset'); 
 
    }, 
 
    success: function(json) { 
 
     $('.alert-dismissible, .text-danger').remove(); 
 
     $('.form-group').removeClass('has-error'); 
 

 
     if (json['error']) { 
 
     if (json['error']['option']) { 
 
      for (i in json['error']['option']) { 
 
      var element = $('#input-option' + i.replace('_', '-')); 
 

 
      if (element.parent().hasClass('input-group')) { 
 
       element.parent().after('<div class="text-danger">' + json['error']['option'][i] + '</div>'); 
 
      } else { 
 
       element.after('<div class="text-danger">' + json['error']['option'][i] + '</div>'); 
 
      } 
 
      } 
 
     } 
 

 
     if (json['error']['recurring']) { 
 
      $('select[name=\'recurring_id\']').after('<div class="text-danger">' + json['error']['recurring'] + '</div>'); 
 
     } 
 

 
     // Highlight any found errors 
 
     $('.text-danger').parent().addClass('has-error'); 
 
     } 
 

 
     if (json['success']) { 
 
     $('.breadcrumb').after('<div class="alert alert-success alert-dismissible">' + json['success'] + '<button type="button" class="close" data-dismiss="alert">×</button></div>'); 
 

 
     $('#cart > button').html('<span id="cart-total"><i class="fa fa-shopping-cart"></i> ' + json['total'] + '</span>'); 
 

 
     $('html, body').animate({ 
 
      scrollTop: 0 
 
     }, 'slow'); 
 

 
     $('#cart > ul').load('index.php?route=common/cart/info ul li'); 
 
     } 
 
    }, 
 
    error: function(xhr, ajaxOptions, thrownError) { 
 
     alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText); 
 
    } 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
<div id="product"> 
 
    <h3>Available Options</h3> 
 
    <div class="form-group scrolly required "> 
 
     <div id="input-option230"> 
 
     <div class="radio" style="display: inline-block;"> 
 
      <label> 
 
      <input type="radio" name="option[230]" value="32"> 
 
      Pink </label> 
 
     </div> 
 
     <div class="radio" style="display: inline-block;"> 
 
      <label> 
 
      <input type="radio" name="option[230]" value="31"> 
 
      Green </label> 
 
     </div> 
 
     <div class="radio" style="display: inline-block;"> 
 
      <label> 
 
      <input type="radio" name="option[230]" value="30"> 
 
      Blue </label> 
 
     </div> 
 
     <div class="radio" style="display: inline-block;"> 
 
      <label> 
 
      <input type="radio" name="option[230]" value="33"> 
 
      Red </label> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="form-group required "> 
 
     <div id="input-option229"> 
 
     <input type="hidden" name="product_id" value="53"> 
 
     <table> 
 
      <thead> 
 
       <tr> 
 
        <th>Bra Size</th> 
 
        <th>Price</th> 
 
        <th>Qty</th> 
 
        <th></th> 
 
       </tr> 
 
      </thead> 
 
      <tbody> 
 
       <tr> 
 
        <td style="padding: 0 10px;"> 
 
        <div class="checkbox"> 
 
         <label> 
 
         <input type="checkbox" name="option[229][]" value="26"> 
 
         70B </label> 
 
        </div> 
 
        </td> 
 
        <td>(-2$)</td> 
 
        <td><input type="text" name="quantity" value="1" size="2" id="input-quantity" class="form-control"></td> 
 
        <td><button type="button" id="button-cart-229-25" data-loading-text="Loading..." class="btn btn-primary btn-lg btn-block"><i class="fa fa-cart-plus" aria-hidden="true"></i></button></td> 
 
       </tr> 
 
       <tr> 
 
        <td style="padding: 0 10px;"> 
 
        <div class="checkbox"> 
 
         <label> 
 
         <input type="checkbox" name="option[229][]" value="27"> 
 
         75B </label> 
 
        </div> 
 
        </td> 
 
        <td>(-1$)</td> 
 
        <td><input type="text" name="quantity" value="1" size="2" id="input-quantity" class="form-control"></td> 
 
        <td><button type="button" id="button-cart-229-26" data-loading-text="Loading..." class="btn btn-primary btn-lg btn-block"><i class="fa fa-cart-plus" aria-hidden="true"></i></button></td> 
 
       </tr> 
 
       <tr> 
 
        <td style="padding: 0 10px;"> 
 
        <div class="checkbox"> 
 
         <label> 
 
         <input type="checkbox" name="option[229][]" value="28"> 
 
         80B </label> 
 
        </div> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
        <td style="padding: 0 10px;"> 
 
        <div class="checkbox"> 
 
         <label> 
 
         <input type="checkbox" name="option[229][]" value="29"> 
 
         85B </label> 
 
        </div> 
 
        </td> 
 
        <td>(+1$)</td> 
 
        <td><input type="text" name="quantity" value="1" size="2" id="input-quantity" class="form-control"></td> 
 
        <td><button type="button" id="button-cart-229-27" data-loading-text="Loading..." class="btn btn-primary btn-lg btn-block"><i class="fa fa-cart-plus" aria-hidden="true"></i></button></td> 
 
       </tr> 
 
      </tbody> 
 
     </table> 
 
     </div> 
 
    </div> 
 
    <div class="form-group hidden"> 
 
     <label class="control-label" for="input-quantity">Qty</label> 
 
     <input type="text" name="quantity" value="1" size="2" id="input-quantity" class="form-control"> 
 
     <input type="hidden" name="product_id" value="53"> 
 
     <br> 
 
     <button type="button" id="button-cart" data-loading-text="Loading..." class="btn btn-primary btn-lg btn-block">Add to Cart</button> 
 
    </div> 
 
</div>

()イベント各ボタンには、どの送信ボタンがクリックされたかを判断する方法がありますか?

クラスの
+3

識別子が__unique__しなければならない、あなたが '' idは=「ボタン-カート」を使用していますあなたのHTMLを無効にする複数回。 'ID Selector'を使っているので、イベントハンドラはDOM – Satpal

+0

の最初の要素にのみ添付されます.jqueryを使用しているので簡単にDOMをナビゲートできます – jidexl21

答えて

2

変更ID'sとウィッヒボタンを識別するためにthisを使用しますが、このような何か、クリックしている:HTMLで

$('.button-cart').on('click', function() { 
    $(this).button('loading'); 
}); 
+1

ありがとう、たくさんの男! – Kardo

関連する問題