jquery :input selector not selecting :select elements?

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>
javascript jquery html
Rakesh

Answers 1

Submit Answer
  • Sunil Patel

    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/

Related Articles