JavaScript - Get values example

To get the value of a form element using JavaScript, you can use various methods depending on the type of form element and your specific needs. Below are examples of how to get the value of different types of form elements, such as text inputs, radio buttons, checkboxes, and select dropdowns.

Code Example

From Text Input

        <form id="myForm">
        <label for="name">Name:
        <input type="text" id="name" name="name">
        <button type="button" onclick="getFormValue()">Get Value
        </form>

        <script>
                function getFormValue() {
                    var nameValue = document.getElementById("name").value;
                    alert("Name: " + nameValue);
                }
        </script>

From Radio Buttons

    
        <form id="myForm">
        <label>Gender:
        <input type="radio" id="male" name="gender" value="male"> Male
        <input type="radio" id="female" name="gender" value="female"> Female
        <button type="button" onclick="getFormValue()">Get Value
        </form>


    <script>
        function getFormValue() {
            var genders = document.getElementsByName("gender");
            var selectedGender;
            for (var i = 0; i < genders.length; i++) {
                if (genders[i].checked) {
                    selectedGender = genders[i].value;
                    break;
                }
            }
            alert("Selected Gender: " + selectedGender);
        }
        </script>
    

From Checkboxes

    
    <form id="myForm">
    <label>Hobbies:
    <input type="checkbox" name="hobby" value="reading"> Reading
    <input type="checkbox" name="hobby" value="travelling"> Travelling
    <input type="checkbox" name="hobby" value="sports"> Sports
    <button type="button" onclick="getFormValue()">Get Value
    </form>
    
    <script>
        function getFormValue() {
            var hobbies = document.getElementsByName("hobby");
            var selectedHobbies = [];
            for (var i = 0; i < hobbies.length; i++) {
                if (hobbies[i].checked) {
                    selectedHobbies.push(hobbies[i].value);
                }
            }
            alert("Selected Hobbies: " + selectedHobbies.join(", "));
        }
        </script>
    
    

From Dropdown

    
    <form id="myForm">
    <label for="country">Country:
    <select id="country" name="country">
    <option value="usa">USA
    <option value="canada">Canada
    <option value="uk">UK
    </select>
    <button type="button" onclick="getFormValue()">Get Value
    </form>
    
    <script>
        function getFormValue() {
            var countryValue = document.getElementById("country").value;
            alert("Selected Country: " + countryValue);
        }
        </script>
    
    

Video Example