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

Question

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)

So you want to iterate over all form elements and push their values into an array? — D. Pardal, Mar 30 '19 at 09:52
Uhmm I don't think I understand what you mean by iterating all elements so i'll just fill you in - I already finished other forms except the radio and select button which is the 'Sex' and 'Age' since i'm having trouble getting the value when the submit button is clicked — Kurisuchan, Mar 30 '19 at 09:55
and for the three search buttons, it all works, lets say you chose the button 'IdNumber', you'll search a id number and if you have a match, the other data with that index will pop up on their designated fields. — Kurisuchan, Mar 30 '19 at 09:57
you are having problem getting the selected or checked value of radio or select inputs? is this correct? — Nikos M., Mar 30 '19 at 12:19
if my above comment is the problem see https://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript and https://stackoverflow.com/questions/11599666/get-the-value-of-checked-checkbox — Nikos M., Mar 30 '19 at 12:21

score 0 · Answer 1 · edited Jul 15 '22 at 00:34

Here is a way to do it with Vue.js:

https://v2.vuejs.org/v2/guide/forms.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 <title>Document</title>
 </head>
 <body>
 <div id="root">
 <td id="gender">Sex<br>
   <input type="radio" v-model="checked" value="Male">Male
   <input type="radio" v-model="checked" 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
    <span>Checked names: {{ checked }}</span>
   </div>
  </body>

   <script>

   new Vue({
   el: '#root',
   data: {
   checked: [],

   }
   })

  </script>
  </html>

thanks but the instruction is that the webpage should be offline, is there a solution that involves javascript only? — Kurisuchan, Mar 30 '19 at 10:07
https://cdn.jsdelivr.net/npm/vue/dist/vue.js if you click on this link you will see a big javascript code, you just copy that, create a new file e.g vue.js , then paste it in it and then you include that file in your offline page with and it works offline too — bill.gates, Mar 30 '19 at 10:11
I uhh somehow got more confused... xD can you show me yours? @ifaruki — Kurisuchan, Mar 30 '19 at 10:18

D. Pardal · Accepted Answer · 2019-03-30T13:43:39.907

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?

Thank you for that, not entirely what i wanted but I acquired some idea on how to get my desired result. Cheers! — Kurisuchan, Mar 30 '19 at 14:14

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

2 Answers2