Question posted in
You can find the official documentation here.

Jquery ajax – get value input radio button javascript

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

Tags:

4

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 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();
    Login or Signup to reply.
  3. 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;

    Login or Signup to reply.
  4. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search