Jquery and Multiple Fields with same Name

Question

I have this HTML code :

<table>
<tr>
    <td colspan="2">
    <input type="radio" name="lineChoice"   id="lineChoiceA"    value="A"><label for="lineChoiceA">Line A</label>
    <input type="radio" name="lineChoice"   id="lineChoiceB"    value="B"><label for="lineChoiceB">Line B</label>
    </td>
</tr>
<tr id="lineA" style="display: none;">
    <td>List A : </td>
    <td>
    <select name="mySelect" id="mySelect">
    <option value=""></option>
    <option value="A0">A0</option>
    <option value="A1">A1</option>
    <option value="A2">A2</option>
    </select>
    </td>
</tr>
<tr id="lineB" style="display: none;">
    <td>List B : </td>
    <td>
    <select name="mySelect" id="mySelect">
    <option value=""></option>
    <option value="B0">B0</option>
    <option value="B1">B1</option>
    <option value="B2">B2</option>
    </select>
    </td>
</tr>
</table>

And I have this JQuery code :

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(function(){

    // If Click on Radio
    $('[id^="lineChoice"]').click(function(){

        // Hide Line
        $("#lineA").hide();
        $("#lineB").hide();

        // Display Line
        if($(this).val()=="A")  $("#lineA").show();
        if($(this).val()=="B")  $("#lineB").show();
    });


    // If Change on List
    $('#mySelect').change(function(){

        // Just Display in Console
        console.log($(this).val());

    });

}); 
</script>

Both lines are basically hidden. And by selecting the radio button I display the corresponding line. I voluntarily simplified the name of the lines (it is more complex in my initial code).

If I select row A. Display in JQuery works fine. But I get nothing if I select line B. I know that my "select" have the same name but that's precisely the goal for me. Have only one "select" to process but only the displayed one.

Hoping to be clear in my question which is "Why no display when selecting line B while it works with line A...?

The problem is, that they also have the same id. Ids have to be unique. — Geshode
– Geshode, Commented Sep 30, 2022 at 9:30
I know I have a unique ID but if that is a problem why does it work with one and not the other...? Why not have an error message indicating that the select is not found because it is present several times....? Knowing that the two "select" are never displayed at the same time. — Juan
– Juan, Commented Sep 30, 2022 at 9:35
@Juan It's not the select is not found. it is just because you register the change event on the first select tag only. You have to update the selector to get the 2 select on your page. Check my answer. — Bao Nguyen
– Bao Nguyen, Commented Sep 30, 2022 at 9:47

Bao Nguyen · Accepted Answer · 2022-09-30 09:45:11Z

3

You cannot have two elements with the same id within one page. Hence I update your code using different Ids for the two selects.

In order to register the event using the name, you can use the attribute selector instead. [name="mySelect"] would do the trick.

The reason why the change event is not working on line B is because $('#mySelect').change(function(){}) only register the event on the first select which turn out is the Line A <select>

$(document).ready(() => {

  $('input[type="radio"]').on('change', (e) => {
    $("#lineA").hide();
    $("#lineB").hide();
    if (e.currentTarget.id === 'lineChoiceA') {
      $("#lineA").show();
    } else {
      $("#lineB").show();
    }
  })

  // If Change on List
  $('[name="mySelect"]').change(function() {

    // Just Display in Console
    console.log($(this).val());

  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td colspan="2">
      <input type="radio" name="lineChoice" id="lineChoiceA" value="A"><label for="lineChoiceA">Line A</label>
      <input type="radio" name="lineChoice" id="lineChoiceB" value="B"><label for="lineChoiceB">Line B</label>
    </td>
  </tr>
  <tr id="lineA" style="display: none;">
    <td>List A : </td>
    <td>
      <select name="mySelect" id="mySelect1">
        <option value=""></option>
        <option value="A0">A0</option>
        <option value="A1">A1</option>
        <option value="A2">A2</option>
      </select>
    </td>
  </tr>
  <tr id="lineB" style="display: none;">
    <td>List B : </td>
    <td>
      <select name="mySelect" id="mySelect2">
        <option value=""></option>
        <option value="B0">B0</option>
        <option value="B1">B1</option>
        <option value="B2">B2</option>
      </select>
    </td>
  </tr>
</table>

edited Sep 30, 2022 at 9:45

answered Sep 30, 2022 at 9:38

Bao Nguyen

9241 gold badge5 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Juan Over a year ago

I was looking for a solution and came to the conclusion that actually I need a common "name" to retrieve it on the next page but not a common "id". Thanks for your solution

Bao Nguyen Over a year ago

Glad I can help :). Can my answer is marked as correct?

Juan Over a year ago

that's what I do in first :)

Juan Over a year ago

Thank you again for your code and especially your explanations. Like what my question was not so bad. Too bad someone marked it as bad.

Collectives™ on Stack Overflow

Jquery and Multiple Fields with same Name

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related