在功能中选择单选按钮

Question

so here I have a html form with radio buttons and a submit input. The issue I am having is selecting these radio input and alerting the checked one in an event function.

      <div id="shippingMethod">
            <label>Shipping Method:</label><br>
            <input type="radio" value="free Mail" name="r_method" id="freeMail" checked>      <label for="freeMail">Free Mail (1 Month)</label><br>

            <input type="radio" value="UPS" name="r_method" id="ups">
            <label for="ups">UPS (1 week)</label><br>

            <input type="radio" value="DHL" name="r_method" id="dhl">
            <label for="dhl">DHL (2-4 days)</label>
            <input type="submit" value="enter">
        </div>
        <script type="text/javascript">
            document.getElementById('shopping').addEventListener('submit', actions);
            function actions(event){
                event.preventDefault();

                var method = document.getElementById('shopping').r_method;
                for (var i = 0; i < method.length; i++){
                    if(method[i].checked == "true"){
                        alert(method[i].value);
            }
            }
            }
        </script>

everytime I go to the console and type "method" it says "Uncaught ReferenceError: method is not defined" however i defined method in the actions function. And when every I press the the submit input also nothing happens. however when I create this variable "method" in the console log. it works. how can i solve this issue?

Answer 1

Try this

 document.getElementById('shippingMethod').addEventListener('submit', actions); function actions(event){ event.preventDefault(); alert(document.querySelector('input[name="r_method"]:checked').value) } 

 <form id="shippingMethod"> <label>Shipping Method:</label><br> <input type="radio" value="free Mail" name="r_method" id="freeMail" checked> <label for="freeMail">Free Mail (1 Month)</label><br> <input type="radio" value="UPS" name="r_method" id="ups"> <label for="ups">UPS (1 week)</label><br> <input type="radio" value="DHL" name="r_method" id="dhl"> <label for="dhl">DHL (2-4 days)</label> <input type="submit" value="enter"> </form> 

EDIT

Errors:

• No form tag in your HTML code. The event submit will never be triggered and will never call your actions function
• The way you are selecting your inputs tag should be something like this: document.getElementById('shippingMethod').querySelectorAll('input[name="r_method"]'); instead of document.getElementById('shopping').r_method; . This way you'll be able to loop through the var method containing all the elements.

A working example using the for loop is

 document.getElementById('shippingMethod').addEventListener('submit', actions); function actions(event){ event.preventDefault(); var method = document.getElementById('shippingMethod').querySelectorAll('input[name="r_method"]'); for (var i = 0; i < method.length; i++){ if(method[i].checked == true){ alert(method[i].value) } } } 

 <form id="shippingMethod"> <label>Shipping Method:</label><br> <input type="radio" value="free Mail" name="r_method" id="freeMail" checked> <label for="freeMail">Free Mail (1 Month)</label><br> <input type="radio" value="UPS" name="r_method" id="ups"> <label for="ups">UPS (1 week)</label><br> <input type="radio" value="DHL" name="r_method" id="dhl"> <label for="dhl">DHL (2-4 days)</label> <input type="submit" value="enter"> </form> 

Take a look at this HTML DOM querySelector() Method