CODEWITHSUNDEEP
javascripthtml
user3872094
user3872094

Reputation: 3351

multiple dropdowns and radio buttons

I have 2 questions here for vanilla JavaScript. I cannot use jQuery.

1. Create multiple dropdowns.

I have this JavaScript function:

function loadTheDropdowns() {
    var oTxt;
    for (var i = 0; i < 11; ++i) {
        var oEle = document.createElement('option');
        if (i == 0) {
            oTxt = document.createTextNode("select your tenure");
            oEle.setAttribute('disabled', 'disabled');
            oEle.setAttribute('selected', 'selected');
            oEle.appendChild(oTxt);
        } else {
            oTxt = document.createTextNode(i);
            oEle.appendChild(oTxt);
        }
        document.getElementById('compTenure').appendChild(oEle);
        document.getElementById('posTenure').appendChild(oEle);
    }
}

In my HTML I have it as:

<body onload="loadTheDropdowns()">
    How many years you worked on this company
    <select name="Input" id="compTenure">
    </select>
    <br />
    How many years you worked on your current position
    <select name="Input" id="posTenure">
    </select>
</body>

When I run this, none of the dropdowns are loaded.

How can I load the dropdown?

2. Validating radio buttons.

I have this code in my HTML:

<table>
    <tr>
        <td>I was trained adequetly for my current position *</td>
        <td><input name="cprb1" type="radio" value="V1" /></td>
        <td><input name="cprb1" type="radio" value="V2" /></td>
        <td><input name="cprb1" type="radio" value="V3" /></td>
        <td><input name="cprb1" type="radio" value="V4" /></td>
        <td><input name="cprb1" type="radio" value="V5" /></td>
    </tr>
    <tr>
        <td>I am skillfull enough to fulfill my responsibility *</td>
        <td><input name="cprb2" type="radio" value="V1" /></td>
        <td><input name="cprb2" type="radio" value="V2" /></td>
        <td><input name="cprb2" type="radio" value="V3" /></td>
        <td><input name="cprb2" type="radio" value="V4" /></td>
        <td><input name="cprb2" type="radio" value="V5" /></td>
    </tr>
    <tr>
        <td>I have enough time to fulfill all my responsibility *</td>
        <td><input name="cprb3" type="radio" value="V1" /></td>
        <td><input name="cprb3" type="radio" value="V2" /></td>
        <td><input name="cprb3" type="radio" value="V3" /></td>
        <td><input name="cprb3" type="radio" value="V4" /></td>
        <td><input name="cprb3" type="radio" value="V5" /></td>
    </tr>
    <tr>
        <td>I have required to work a proper number of hours *</td>
        <td><input name="cprb4" type="radio" value="V1" /></td>
        <td><input name="cprb4" type="radio" value="V2" /></td>
        <td><input name="cprb4" type="radio" value="V3" /></td>
        <td><input name="cprb4" type="radio" value="V4" /></td>
        <td><input name="cprb4" type="radio" value="V5" /></td>
    </tr>
    <tr>
        <td>I find my current position secure *</td>
        <td><input name="cprb5" type="radio" value="V1" /></td>
        <td><input name="cprb5" type="radio" value="V2" /></td>
        <td><input name="cprb5" type="radio" value="V3" /></td>
        <td><input name="cprb5" type="radio" value="V4" /></td>
        <td><input name="cprb5" type="radio" value="V5" /></td>
    </tr>
    <tr>
        <td>I think my work is appritiate enough *</td>
        <td><input name="cprb6" type="radio" value="V1" /></td>
        <td><input name="cprb6" type="radio" value="V2" /></td>
        <td><input name="cprb6" type="radio" value="V3" /></td>
        <td><input name="cprb6" type="radio" value="V4" /></td>
        <td><input name="cprb6" type="radio" value="V5" /></td>
    </tr>
</table>
<input type="submit" value="Submit" onclick="validate()">

I'm using this function to validate.

function validate() {
    if (!document.getElementsByName('cprb1')[0].checked ||
        !document.getElementsByName('cprb2')[0].checked || 
        !document.getElementsByName('cprb3')[0].checked || 
        !document.getElementsByName('cprb4')[0].checked || 
        !document.getElementsByName('cprb5')[0].checked || 
        !document.getElementsByName('cprb6')[0].checked) {
            alert("RB not check");
        }
    }

The issue is that it is only checking if the first radio button is checked. If I remove that [0], it is alerting RB not check, even though I'm selecting the radio buttons.

How can I fix this?

Upvotes: 1

Views: 179

Answers (3)

Abdullah Saleem
Abdullah Saleem

Reputation: 1

your Radio button:

<input type="radio" name="radio_button" value="radio_button_value">

now you can access any radio button checked through below code with name property

var check_radio = document.querySelector('input[name = "radio_button"]:checked')

Upvotes: 0

GGO
GGO

Reputation: 2748

First answer : it's a variable reference problem. You have to make two different oEle element or using oEle.cloneNode(); like

document.getElementById('posTenure').appendChild(oEle.cloneNode(true));

Second answer : you take only the first checkbox element, you have to loop them like :

function check(name) {
     var cprb = document.getElementsByName(name);
     for(var i = 0; i<cprb.length;i++){
        if(cprb[i].checked)
          return true;
     }
}
function validate() {
     if(!check('cprb1') && !check('cprb2') && !check('cprb3') && !check('cprb4') && !check('cprb5') && !check('cprb6'))
         alert("RB not check");
}

Upvotes: 2

Phani Kumar M
Phani Kumar M

Reputation: 4590

For first question, after you append the option element to first dropdown, you can create a clone of the option element and append to second dropdown. If you do not clone, then the option element is always appended to second dropdown leaving the first dropdown empty.

window.onload = function () { loadTheDropdowns(); }
function loadTheDropdowns() {
    var oTxt;
    for (var i = 0; i < 11; ++i) {
        var oEle = document.createElement('option');
        if (i == 0) {
            oTxt = document.createTextNode("select your tenure");
            oEle.setAttribute('disabled', 'disabled');
            oEle.setAttribute('selected', 'selected');
            oEle.appendChild(oTxt);
        } else {
            oTxt = document.createTextNode(i);
            oEle.appendChild(oTxt);
        }

        document.getElementById('compTenure').appendChild(oEle);
        var oPos = oEle.cloneNode(true);
        document.getElementById('posTenure').appendChild(oPos);
    }
}
How many years you worked on this company
<select name="Input" id="compTenure"></select>
<br/>
<br /> How many years you worked on your current position
<select name="Input" id="posTenure"></select>

Upvotes: 2

Related Questions