How to get values of input

Question

I have a problem i dont know how can i read the value stored in <select><option> </option></select> and from radio buttons here i have my code with js and html

        function inport(){
            var name = document.getElementById("name").value;
            var index = document.getElementById("index").value;
            var phone = document.getElementById("phone").value;
            var grade = document.getElementById("grade").value;
            var session = document.getElementById("session").value;
            console.log(name);
            console.log(index);
            console.log(phone);
            console.log(grade);
            console.log(session);

        }

    <form>
    <div>
        <h1>Details</h1>
    <div>
        <label>Name</label>
        <input type="text" id="name">
    </div>
    <div>
        <label>Index</label>
        <input type="text" id="index">
    </div>
    <div>
        <label>Phone</label>
        <input type="text" id="phone">
    </div>
    <div id="grade">
      <label><input type="radio" name="groupName" value="5"> 5</label>
      <label><input type="radio" name="groupName" value="6"> 6</label>
      <label><input type="radio" name="groupName" value="7"> 7</label>
      <label><input type="radio" name="groupName" value="8"> 8</label>
      <label><input type="radio" name="groupName" value="9"> 9</label>
      <label><input type="radio" name="groupName" value="10"> 10</label>
    <div>           
        
    </div>
    <div>
        <label>Session</label>
        <select id="session">
            <option value="checkbox">Decembar</option>
            <option value="checkbox">November</option>      
            <option value="checkbox">Octomber</option>
            <option value="checkbox">September</option>         
            <option value="checkbox">August</option>        
            <option value="checkbox">July</option>
            <option value="checkbox">June</option>
            <option value="checkbox">May</option>
            <option value="checkbox">April</option>
            <option value="checkbox">March</option>
            <option value="checkbox">February</option>
            <option value="checkbox">January</option>
        </select>

    </div>
    <div>
        <input type="button" value="Input student"id="import" onclick="inport();">
    </div>
    </div>
    </form>

When i try to console.log my values of grade and session i want to get the number or month selected how can get the value should i change something in my html ? It works fine with first 3 because i just read from <input type="text"> but in other 2 i tried getting the value from radio button and select options. I think you can run this code snipped and see the output if you need more info let me know :).

Use `document.querySelector('#grade input[type="radio"]:checked').value` to access radio button checked value. Also, you need to update value in `checkbox` right now, all your checkbox value is `checkbox`. — Hassan Imam, Nov 25 '21 at 15:50
Check [How to get the selected radio button’s value?](https://stackoverflow.com/questions/9618504/how-to-get-the-selected-radio-button-s-value) and [Get selected value in dropdown list using JavaScript](https://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript?rq=1) — aerial, Nov 25 '21 at 15:56

score 1 · Accepted Answer · answered Nov 25 '21 at 16:38

Add name attribute in input.

JS Code

document.getElementById("show_radio").onclick = function () {
        var radio = document.getElementsByName("gender");
        
        var radio_selected;
        
        for (var a = 0;  a < radio.length; a++) {
            if (radio[a].checked) {
                radio_selected = radio[a].value;
            }
        }
        
        document.getElementById("selected_radio").innerHTML = radio_selected;
        
        }

<form>

                    <input type="radio" name="gender" value="Male" checked=""> Male<br>
                    <input type="radio" name="gender" value="Female"> Female<br>
                    <input type="radio" name="gender" value="I'd rather not inform"> I'd rather not inform
                    
                </form>
                
 <button id="show_radio">Show</button>
 
    <p id="selected_radio"></p>

How to get values of input

1 Answers1