how to get radio and option button value then push to array while being able to call it

I have this program that involves entering your information and after clicking submit the information is then pushed to an array and send to console… the user can then search such as last name and if it has a match then it will show the other information that came with it after submit e.g. age,sex,birthdate,address etc..

What I’m trying to achieve is, to be able to push radio value into an array and the same goes for the select tag, then save it to console after submit.

Html:

<td id="gender">Sex<br>
<input type="radio" value="Male">Male
<input type="radio" value="Female">Female</td>
<tr><td>Age<br>
<select id="age">
<option default="1" style="color: black;">
Select Below</option><option value="10">10</option>
<option value="11">11</option><option value="12">12</option><option value="13">13
</option><option value="14">14</option><option value="15">15</option>
<input type="submit" value="Submit" class="sub" onclick="that();">
</td></tr>
<button class="ss" onclick="idnum()" title="Search..">IdNumber..</button>
<p id="age"><!--ageGoesHere--></p><p id="sex"><!--sexGoesHere--></p>
//othercodes

I can’t seem to get my mind around the other answers that involves getting the value of radio and select because of the way my program is supposed to work. so i’m gonna try and summarize it.. get value of radio and select – push to array – send to console – call. p.s. help (here is the screenshot of the webpage)

Answer

There is a easy way to do this, but the form needs to be wrapped in a <form> element and <input type="radio"> elements need to have a name, which is common practice.

Here it is:

var arr = []

function logArr() {
  var formElements = document.getElementById("form-id").elements

  arr.push({
    name: formElements["name"].value,
    sex: formElements["sex"].value
  })
  
  console.log(arr)
}

body{
  height: 300px
}

<form id="form-id">
<p>
    Name: <input type="text" name="name">
<p>
    Sex:<br>
    <input type="radio" name="sex" value="Male" checked> Male<br>
    <input type="radio" name="sex" value="Female"> Female<br>
</p>
</form>
<button onclick="logArr()">Submit</button>

Is this what you wanted?

Advertisement

Answer