How do i link radio image button value to id to send value to the database

Question

var response="";

      function Register() {

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

   credentials.user_username = document.getElementById("Rusername").value;
   //credentials.user_gender=document.getElementById("Rgender").value;
   
   credentials.user_country=document.getElementById("Rcountry").value;
   


    var request = new XMLHttpRequest();
    request.open("POST","/user_data", true);
    request.setRequestHeader("Content-Type", "application/json");
    request.onload=function(){
          response = JSON.parse(request.responseText);
          alert(credentials.user_username);
    };
    request.send(JSON.stringify(credentials));
   

  }

<form >
  <div class="genderalign"  method="POST">
<p>Gender:</p>

<input  type="radio" name="gender" value="Female" id="choose-1"   />
<label for="choose-1" >
<img src="/images/femaleC.png"/>
</label>

<input  type="radio" name="gender" value="Male" id="choose-2"  />
<label for= "choose-2">
<img src="/images/maleC.png" />
</label>

</div>
</form>

I am trying to pass the value either female or male to my data base when i click on either one button. Right now i get user_gender cannot be null. Been trying for a whole 2 hrs and i really met a dead end. Please help me thank you!

Here is my javascript line (input with id= Rgender should pass the value to database)

credentials.user_gender=document.getElementById("Rgender").value;

Here is my html line

<form id="Rgender">
<div class="genderalign"  method="POST">
<p>Gender:</p>

<input  type="radio" name="gender" value="Female" id="choose-1"   />
<label for="choose-1" >
<img src="/images/femaleC.png"/>
</label>

<input  type="radio" name="gender" value="Male" id="choose-2"  />
<label for= "choose-2">
<img src="/images/maleC.png" />
</label>

</div>
</form>

Your `
` wont have a `value` attribute on it, but rather the `` tag will. You can get the selected radio button using: `document.querySelector('input[name="gender"]:checked').value;` — Nick Parsons, Feb 09 '20 at 02:44
You need to replace `document.getElementById("Rgender").value;` with it — Nick Parsons, Feb 09 '20 at 03:10
are you running this code when you submit your form? Please create a [mre] of your issue, preferably using a [code snippet](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do) — Nick Parsons, Feb 09 '20 at 04:39
yeap im running my code when i submit the form, ill update my codes to add a code snippet — Chloe Ong, Feb 09 '20 at 04:50
I don't see how you're running the `Register` function in your code. You need to run it when you submit your form. See working example [here](https://jsfiddle.net/1dhkL2np/) — Nick Parsons, Feb 09 '20 at 05:10
i actually have a button with an onclick register(); but i did not put it in the code snippet — Chloe Ong, Feb 09 '20 at 05:16
its at the bottom after all my other fields so it should POST to the database together — Chloe Ong, Feb 09 '20 at 05:21

How do i link radio image button value to id to send value to the database

0 Answers0