Home > Software engineering >  How to get values of input
How to get values of input

Time:11-26

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>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe> 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 :).

CodePudding user response:

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>            
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response:

Here is a link that should help you solve your problem: https://www.skillsugar.com/how-to-get-the-selected-radio-button-value-in-javascript. I hope it helped!

  • Related