Check if input radio ID is selected before form is submitted

Question

I am working with WooCommerce on WordPress. In the checkout I want to check if a certain radio button is selected before the user submits. If a certain id is selected, then run a window.alert for now. I have the following form being served up by WooCommerce:

<ul id="shipping_method">
    <li>
        <input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_legacy_local_pickup" value="legacy_local_pickup" class="shipping_method">
        <label for="shipping_method_0_legacy_local_pickup">Local Pickup</label>
    </li>
    <li>
        <input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_distance_rate_shipping" value="distance_rate_shipping" class="shipping_method" checked="checked">
        <label for="shipping_method_0_distance_rate_shipping">Delivery from 536 S College Ave, Chicago, IL</label>                  
    </li>
</ul>

I am using the following script so far to test:

<script type='text/javascript'>
    if (document.getElementById('shipping_method_0_distance_rate_shipping').checked) {
        alert("Delivery checked!");
    }
</script>

The script works great when page loads, but if I deselect and select the radio button again before submitting page the script does not function. If I can see which they are selecting, in real time, that would solve my immediate issue.

I appreciate your time and help with this.

mplungjan · Accepted Answer · 2017-01-19T07:55:40.380

1

To alert when clicked :

window.onload = function () { // when page loads

 // To alert when clicking

  document.getElementById('shipping_method_0_distance_rate_shipping').onclick=function() {
    alert("Delivery checked!");
  }    

  // To test when submitting:

  document.getElementById('yourFormId').onsubmit=function() {
    if (!document.getElementById('shipping_method_0_distance_rate_shipping').checked) {          
      alert("Delivery not checked!");
      return false; //  cancel submit
    }    
  }    
}

To ask if they clicked the correct option:

window.onload = function () { // when page loads

  document.getElementById('yourFormId').onsubmit=function() {
    return confirm(document.getElementById('shipping_method_0_distance_rate_shipping').checked ? 
      "Local Pickup?" : 
      "Delivery from 536 S College Ave, Chicago, IL?");
  }    
}

edited Jan 19 '17 at 07:55

answered Jan 19 '17 at 07:41

mplungjan

169,008
28
173
236

1

this works perfectly. many thanks for your time and experience. – Zach Smith Jan 19 '17 at 07:47
seems when i test, if i deselect the radio button and then select again, the script does not trigger. thoughts? – Zach Smith Jan 19 '17 at 07:52
If you want to alert when clicking, you need BOTH scripts - see update – mplungjan Jan 19 '17 at 07:54
i do not want to test on page submit. i just want to test if user selects the radio ID before submit. the concept here is i need to alert user if they select a certain shipping option before they submit, to reduce problems of user selecting wrong shipping method related to certain criteria unrelated to this topic. – Zach Smith Jan 19 '17 at 07:55
i have a question. i've moved this code to production and now on another project i am using this script for another solution. very handy. curious how can i create an if/else type of situation (i'm php developer so not too used to js) where a tab ID would be default. let's say if page loads and no tab ID is selected how could i trigger this? if this does not make sense i can write a new question with the code in question. – Zach Smith Jan 19 '17 at 11:10
Yes please write a new question – mplungjan Jan 19 '17 at 11:10
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/133538/discussion-between-hollertrain-and-mplungjan). – Zach Smith Jan 19 '17 at 11:12
http://stackoverflow.com/questions/41740487/how-to-trigger-an-input-tab-selection-when-tab-input-is-not-selected – Zach Smith Jan 19 '17 at 11:17

score 0 · Answer 2 · answered Jan 19 '17 at 07:41

0

Your Javascript is executed only once. You need to check the value of the checked radio every time one checks a radio button (well, this is a weird phrase)

See the answer of @Afnan Ahmad for working example.

answered Jan 19 '17 at 07:41

elementzero23

1,389
2
16
38

This is a comment, not an answer and it is enough to check on submit – mplungjan Jan 19 '17 at 07:47
I thought about adding code but then someone was faster. And this is a possible solution although this is no code. – elementzero23 Jan 19 '17 at 07:49

Afnan Ahmad · Answer 3 · 2017-01-19T07:50:44.043

0

Call this function before submit. If you want to stop form submission than add in you form onsubmit

<form name="yourform" onsubmit="return validate();">

function validate() {
        if (document.getElementById('shipping_method_0_distance_rate_shipping').checked) {
            alert("checked submit form");
            return true;
        } else {
            alert("Unchecked form will not be submitted");
            return false;
        }
    }

<input id="shipping_method_0_distance_rate_shipping" name="shipping_method[0]" type="checkbox" onclick="validate()" />

edited Jan 19 '17 at 07:50

answered Jan 19 '17 at 07:41

Afnan Ahmad

2,492
4
24
44

This will not stop submission at all – mplungjan Jan 19 '17 at 07:46
Let me amend my answer. – Afnan Ahmad Jan 19 '17 at 07:47
Now it works the same as my answer, but less elegantly (inline even handling) – mplungjan Jan 19 '17 at 07:52
1

since this form is coming from woocommerce, i am unable to edit the form and add the onclick handler. thus why i am forced to target via css ID – Zach Smith Jan 19 '17 at 07:52
1

An even better reason not to use inline handlers – mplungjan Jan 19 '17 at 07:53

score 0 · Answer 4 · answered Jan 19 '17 at 07:59

You can give a class to your radio buttons and on the basis of it, you can get the clicked value.

For example

HTML

<input type="radio" name="option" value="o1" class= 'test'>option1</input>
<input type="radio" name="option" value="o2" class = 'test'>option2</input

JS

$(document).on('click','.test',function(event){
    var selectedOption = $(this).val()
  console.log(selectedOption)
});

You can see the fiddle for reference https://jsfiddle.net/7okvyxx3/

Check if input radio ID is selected before form is submitted

4 Answers4

Linked