jquery：输入选择器不选择：选择元素？

Question

I am trying to use jQuery to iterate through a table of input fields, taking each value and concatenating to a string. On click of the submit button, I would like to concatenate input fields that are :input and :select . I read up that jquery input selector also selects select fields as well, but that doesnt seem to be the case here. I have tried passing multiple types into find() but that didnt work either. Any tips?

Here is the jQuery

 $("#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 Markup

 <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

As you have used event.preventDefault(); here, you should change $("#SubmitButton").click(function(){ to $("#SubmitButton").click(function(event){

while you use eventHandler, you should add up a parameter.

In Your HTML, you should also make a change, where you have utilized select box, which requires both the tags, start and end, you haven't started and ended the tag properly, here is that line

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

change to

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

And Additionally, you can utilize your Class selector, where you have .teamInput as common in every element.

So easily you can just add up, following jQuery to see it working.

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

Working Fiddle : https://jsfiddle.net/qffL6dsp/1/

Answer 2

Replace

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

with simply

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

input selects only input tags, :input selects other form-input elements as well.

Answer 3

First you need to pass event as parameter to your click function and then you need to modify the selector for .each to also find select element as 'input' will only find input elements and not select elements :

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