selecting radio buttons in a function

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?

r_method is the name of each radio input, there is a form id, its actually "shopping" but by mistake i think it wasnt added, so imagine the div id="shippingMethod" is in a form with id="shopping" — PrinceAimar, Oct 21 '16 at 20:22
Possible duplicate of [How to get value of selected radio button?](http://stackoverflow.com/questions/15839169/how-to-get-value-of-selected-radio-button) — Heretic Monkey, Oct 21 '16 at 20:27
its not just to get the value of radio button, its more why this code is not working within the function of an event listener although the code seems to be correct. — PrinceAimar, Oct 21 '16 at 21:09

gamboa · Answer 1 · 2016-10-21T21:12:59.330

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

Thnx this does work but would appreciate it if you could show me if i am doing a mistake with my code, as it seems proper to me and would like a solution that is in the same way (as i am practising for loops and selecting inputs and so on with vanilla javascript) thnx — PrinceAimar, Oct 21 '16 at 20:42
Thanks alot, appreciate it, it seems the new way of targeting is the query selector — PrinceAimar, Oct 21 '16 at 21:40

selecting radio buttons in a function

1 Answers1