get value input radio button javascript

Question

I have an input type radio button for user to choose one value, like gender. The problem is the value I get only for option one, and when I check, I get warning like [DOM] Found 2 elements with non-unique id. I need the value so I can passed it to database with ajax.

$('#register').on('click',function(){
  var gender=$('#gender').val();
  console.log(gender);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="get" id="task-form">
   <table class="table">
    <tr>
       <td><input type="radio" name="gender" id="gender" value="male"> Male</td>
       <td><input type="radio" name="gender" id="gender" value="female"> Female</td>
    </tr>
    
    <tr>
      <td><button type="button" class="btn-primary" value="Submit" id="register">Register</button></td>
    </tr>
  </table>
</form>

Do you know what I need to fix this ?

Thank you

Mamun · Accepted Answer · 2020-01-15 05:20:44Z

3

The attribute id must be unique in a document, you can use class instead.

You can use the name attribute along with :checked as part of the selector.

$('#register').on('click',function(){
  var gender=$('[name=gender]:checked').val();
  console.log(gender);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="get" id="task-form">
   <table class="table">
    <tr>
       <td><input type="radio" name="gender" class="gender" value="male"> Male</td>
       <td><input type="radio" name="gender" class="gender" value="female"> Female</td>
    </tr>
    
    <tr>
      <td><button type="button" class="btn-primary" value="Submit" id="register">Register</button></td>
    </tr>
  </table>
</form>

edited Jan 15, 2020 at 5:20

answered Jan 15, 2020 at 5:06

Mamun

69k9 gold badges51 silver badges62 bronze badges

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

Comments

Nguyễn Văn Phong · Accepted Answer · 2020-01-15 06:04:32Z

1

You can try this way to achieve it

$('input[name=gender]:checked').val();

$('#register').on('click',function(){
  var gender= $('input[name=gender]:checked').val();
  console.log(gender);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="get" id="task-form">
   <table class="table">
    <tr>
       <td><input type="radio" name="gender" id="male" value="male"> Male</td>
       <td><input type="radio" name="gender" id="female" value="female"> Female</td>
    </tr>
    
    <tr>
      <td><button type="button" class="btn-primary" value="Submit" id="register">Register</button></td>
    </tr>
  </table>
</form>

answered Jan 15, 2020 at 6:04

Nguyễn Văn Phong

14.2k19 gold badges48 silver badges65 bronze badges

Comments

Not A Robot · Accepted Answer · 2020-01-15 05:17:17Z

0

Any two or more elements on a page cannot have the same ID.

You have given id="gender"into input fields.

You can give ids as id="m" (or id="male") and id="f" (or id="female")

Then you can user name attribute to get the value of the selected radio button.

In vanilla javascript

var gender = document.querySelector('input[name = "gender"]:checked').value;

edited Jan 15, 2020 at 5:17

answered Jan 15, 2020 at 5:12

Not A Robot

2,7002 gold badges20 silver badges37 bronze badges

Comments

Nguyễn Văn Phong · Accepted Answer · 2020-01-15 07:14:47Z

0

You cannot have the same ID for two different tags.

You can modify the jQuery function to use the name attribute to pull the value from like below

var gender = $("input[name = 'gender']").val();

edited Jan 15, 2020 at 7:14

Nguyễn Văn Phong

14.2k19 gold badges48 silver badges65 bronze badges

answered Jan 15, 2020 at 5:10

Asheesh Banga

212 bronze badges

Collectives™ on Stack Overflow

get value input radio button javascript

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related