jquery：入力セレクタ非選択：要素を選択しますか？

Question

jQueryを使用して入力フィールドのテーブルを反復し、各値を取得して文字列に連結しようとしています。送信ボタンをクリックすると、:inputと:selectという入力フィールドを連結したいと思います。私はjqueryの入力セレクタも選択フィールドを選択することを読んだが、それはここではそう思わない。私はfind()に複数のタイプを渡そうとしましたが、そのどちらかの作業はありません。任意のヒント？ここで

jQueryのは、あなたがここにevent.preventDefault();を使用してきたように、あなたは$("#SubmitButton").click(function(){あなたがなeventHandlerを使用しながら、あなたがすべき

$("#SubmitButton").click(function(event){に変更する必要があり

$("#SubmitButton").click(function(){ 
    var Teams = $(".NewTeam").length; //working 
    event.preventDefault(); 
    alert("clicked lets do ajax"); 
    for (var i=0; i < Teams; i++){ 
     $('.NewTeam').eq(i).find('input').each(function() { 
     alert(this.value); // "this" is the current element in the loop 
     }); 
    } 
}); 

HTMLマークアップ

<div class = "teams"> 
    <fieldset class="vfb-fieldset vfb-fieldset-1 str8-sports-roster-upload NewTeam" style = "display: none"> 
    <table class = "PlayerInfoTable"> 
     <tr class = "PlayerRow"> 
     <td><strong style = "vertical-align:top">Player Info: </strong></td> 
     <td><input class="teamInput" name = "player[]" type="text" placeholder="Player Full Name" required/></td> 
     <td><input class="teamInput" name = "player[]" type="text" placeholder="Player Number" required/> </td> 
     <td><select class="teamInput" name = "player[]" type="text" placeholder="Jersey Size" required/><option selected = "selected">Jersey Size</option><option>Youth Small</option><option>Youth Medium</option><option>Youth Large</option><option>Youth X-Large</option><option>Small</option><option>Medium</option><option>Large</option><option>Extra Large</option> </td> 
     <td><select class="teamInput" name = "player[]" type="text" placeholder="Short Size"><option selected = "selected">Short Size</option><option>Youth Small</option><option>Youth Medium</option><option>Youth Large</option><option>Youth X-Large</option><option>Small</option><option>Medium</option><option>Large</option><option>Extra Large</option></select> </td> 
     <td><select class="teamInput" name = "player[]" type="text" placeholder="Male/Female" required</select> <option>Male</option><option>Female</option> </td> 
     </tr> 
    </table> 
    </fieldset> 
    <fieldset class="vfb-fieldset vfb-fieldset-1 str8-sports-roster-upload NewTeam" style = "display: none"> 
    <table class = "PlayerInfoTable"> 
     <tr class = "PlayerRow"> 
     <td><strong style = "vertical-align:top">Player Info: </strong></td> 
     <td><input class="teamInput" name = "player[]" type="text" placeholder="Player Full Name" required/></td> 
     <td><input class="teamInput" name = "player[]" type="text" placeholder="Player Number" required/> </td> 
     <td><select class="teamInput" name = "player[]" type="text" placeholder="Jersey Size" required/><option selected = "selected">Jersey Size</option><option>Youth Small</option><option>Youth Medium</option><option>Youth Large</option><option>Youth X-Large</option><option>Small</option><option>Medium</option><option>Large</option><option>Extra Large</option> </td> 
     <td><select class="teamInput" name = "player[]" type="text" placeholder="Short Size"><option selected = "selected">Short Size</option><option>Youth Small</option><option>Youth Medium</option><option>Youth Large</option><option>Youth X-Large</option><option>Small</option><option>Medium</option><option>Large</option><option>Extra Large</option></select> </td> 
     <td><select class="teamInput" name = "player[]" type="text" placeholder="Male/Female" required</select> <option>Male</option><option>Female</option> </td> 
     </tr> 
    </table> 
    </fieldset> 
</div> 

Answer 1

ですパラメータを追加します。あなたのHTMLで

は、あなたも、あなたが選択したタグの両方が必要ボックス、開始と終了を利用した変更を、作る、あなたが起動していないと、適切にタグを終了する必要があり、ここでその行が

です

<select class="teamInput" name = "player[]" placeholder="Male/Female" required><option>Male</option><option>Female</option></select> 

そしてまた、あなたはすべての要素に共通するよう.teamInputを持っているあなたのクラスセレクタを利用することができると

<select class="teamInput" name = "player[]" type="text" placeholder="Male/Female" required</select> <option>Male</option><option>Female</option> 

変更。

jQueryに続いて簡単に追加できます。

$("#SubmitButton").click(function(event){ 
    event.preventDefault(); 
    $(".teamInput:input:visible").each(function() { 
     alert($(this).val()); 
    }); 
}); 

ワーキングフィドル：https://jsfiddle.net/qffL6dsp/1/

Answer 2

単に

$('.NewTeam').eq(i).find(':input').each(function() { 

inputで

$('.NewTeam').eq(i).find('input').each(function() { 

を交換し:inputは、他のform-input elementsを選択し、入力のみのタグを選択します。

Answer 3

まず、あなたのクリック機能にパラメータとしてイベントを渡す必要があり、その後、あなたはまた、「入力」などのselect要素は要素だけを選択し、入力要素を見つけてはありませんし.eachためのセレクタを変更する必要があります。

$("#SubmitButton").click(function(event){ 
    var Teams = $(".NewTeam").length; //working 
    event.preventDefault(); 
    alert("clicked lets do ajax"); 
    for (var i=0; i < Teams; i++){ 
     $('.NewTeam').eq(i).find('input, select').each(function() { 
      alert(this.value); // "this" is the current element in the loop 
      console.info($(this).text()); this will print in console in blue color the text of <option> as you have not assigned value attribute 
     }); 
    } 
});