html form - getting value from selected radio button

Question

I have created a form and I am looking to get the data the user entered. The javascript I have, so far pulls in all the data. I am having an issue with pulling the data of the selected radio button. I read some articles and they say the 'name' needs to be the sames but this doesn't work and if I give it unique 'ID's then selecting one or the other radio buttons doesn't work. Also I can't use jQuery

js

var myNodeList = document.getElementsByName('cf');
var myArray = []; // empty Array
for (var i = 0; i < myNodeList.length; i++) {
    if(i<4)
        for ( i; i < 3; i++) {
            var self = myNodeList[i].value;
            myArray.push(self);
        }
    else if(i==4)
        myArray.push(document.getElementById('status').value);
    else if(i==5)
        myArray.push(document.getElementById('subscribe').value);
    else if(i==6)
        myArray.push(document.getElementsByName('support')[i]);
    else if(i==7)
        for ( i; i < myNodeList.length; i++) {
            var self = myNodeList[i].value;
            myArray.push(self);
        }
}
console.log(myArray)

html

 <!DOCTYPE html>
<html>
<head>
  <title>Contact Me</title>
  <link rel="stylesheet" type="text/css" href="contactform_Lab8.css">
</head>

<body>

<form id="contactus">
    <fieldset>
        <label for="name">Name:</label>
            <input id="name" type="text" name="cf" autofocus required>
        <label for="email">Email:</label>
            <input id="email" type="email" name="cf" required>
        <label for="phone">Phone:</label>
            <input id="phone" type="tel" name="cf" required>
        <label for="status">Status:         
            <select id="status" name="cf" required>
                <option value="client">Client</option>
                <option value="partner">Partner</option>
                <option value="vendor">Vendor</option>
            </select>
        </label>
        <label for="subscribe">
            <input id="subscribe" type="checkbox" name="cf" value="check" checked> 
        Send me your newsletter</label>
        <label for="sales">
            <label for="support">
                <input id="sales" type="radio" name="slsSupport" value="sales" checked>Sales
                <input id="support" type="radio" name="slsSupport" value="support">Support
            </label>
        </label>
        <label for="msg">Message:</label>
            <textarea id="msg" name="cf" rows="10" cols="30" required></textarea>
        </fieldset>
        <fieldset>
        <button type="submit">Send</button>
        <button type="reset">Reset</button>
        </fieldset>
</form>
<script src="contactform_Lab8.js"></script>

</body>

</html>

Have you try this: **$('input[name="permissions"]:checked').val()** — HoangHieu, Mar 28 '15 at 15:34

score 0 · Answer 1 · answered Mar 28 '15 at 14:44

0

ID names are unique and should not be used twice in the same page. You can get the value from only checked radio buttons like this:

var inputs = document.getElementsByTagName('input');

for(var i = 0; i < inputs.length; i++) {
    if(inputs[i].type.toLowerCase() == 'radio') {
        if (inputs[i].checked){
            alert('Checked radio buttons value is:' + inputs[i].value);
        }
    }
}

answered Mar 28 '15 at 14:44

Slugge

180
1
11

How do I format in html for radio buttons to work with having unique `id`s? @Slugge – Bigboy6 Mar 28 '15 at 14:50
They dont really need to have an ID at all, for input fields "name" is there to define what element it is. So all IDs you have set on these fields can be removed, and name should also be unique, or else you will not be able to differ the values. You should read up on HTML forms tbh :) – Slugge Mar 28 '15 at 14:53

score 0 · Answer 2 · answered Mar 28 '15 at 14:46

In Jquery

$("input[name=slsSupport]:checked").val();

In plain js you would want to find all the radio buttons, give each radio button an Id then select them one by one:

function GetSelected() {
   for(var i=0;i<2;i++) {
       var element = document.getElementById('radio'+i);
       if (element.checked === true)
          return element
   }
}

score 0 · Answer 3 · edited May 23 '17 at 11:56

0

An ID must be unique in all the HTML document. To group inputs (radio for exemple) you have to give them the same name (not ID).

To find the value with JQuery look this question and for pure JS solution look this other question.

edited May 23 '17 at 11:56

Community

1
1

answered Mar 28 '15 at 14:52

Rémy J

108
5

It seems like life would be so easy if I could JQuery but I can't use it as this is for a class :( @Rémy J – Bigboy6 Mar 28 '15 at 15:00
@BigBoy6 The second link is for pure JS solution. – Rémy J Mar 28 '15 at 15:02

html form - getting value from selected radio button

3 Answers3