チェックボックスの値と選択オプションの値を結合します

Question

チェックボックスと選択肢のリストを持つフォームがあります。これは基本的に注文フォームです。顧客がチェックボックスをクリックすると、Select Optionの値とチェックボックスの値をフォームと共に送信したいと思います。

私は本当にAJAXを知らない。私はすべてのデータをPHPファイルに取得するために私が見つけたスクリプトを使用しています。オプションを作るためにjqueryに追加する必要があるものと、チェックされたすべての項目のチェックボックスの値が1つの変数として結合されますか？

<table> 
    <tr> 
     <td> 
      <select class="qty" name="qty" id="qty"> 
      <option value="1">1</option> 
      </select> 
     </td> 
    </tr> 
    <tr> 
     <td>  
     <input id="Part1_1" name="Part[]" type="checkbox" value="Part 1"> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <select class="qty" name="qty" id="qty1"> 
      <option value="1">1</option> 
      <option value="2">2</option> 
      </select> 
     </td> 
    </tr> 
    <tr> 
     <td>  
     <input id="Part1_2" name="Part[]" type="checkbox" value="Part 2"> 
     </td> 
    </tr> 
</table> 

<script> 
    $(document).ready(function(){ 
    $("#contact-form").on("submit",function(e){ 
     e.preventDefault(); 
      var sendData = $(this).serialize(); 
      $.ajax({ 
       type: "POST", 
       url: "orderform.php", 
       data: sendData, 
       success: function(data){ 
        $(".response_msg").text(data); 
        $(".response_msg").slideDown();      
       }   
      }); 

    }); 
    }); 
    </script> 

EDIT： 私は、PHPに各パートの変数を一緒に渡したいと思います。したがって、パート1がチェックされている場合、チェックボックスの値と数量の値は一緒にグループ化されます。

Answer 1

ComboBoxとSelectリストの値を追加して、それをajaxリクエストで送信できるFormDataオブジェクトを使用できます。

チェックこのFormData

Answer 2

あなたはselect値をこのように追加する必要があります。また、サーバー上のメソッドに新しいパラメーターを追加する必要があります。この例では、私はselect_paramという名前を付けました。

$(document).ready(function() { 
    $("#contact-form").on("submit", function(e) { 
     e.preventDefault(); 
     var sendData = $(this).serialize(); 
     $.ajax({ 
      type: "POST", 
      url: "orderform.php", 
      data: sendData + "&select_param1=" + $("#qty option:selected").text() + 
          "&select_param2=" + $("#qty1 option:selected").text(), 
      success: function(data) { 
       $(".response_msg").text(data); 
       $(".response_msg").slideDown(); 
      } 
     }); 

    }); 
});