检查表单提交前是否选择了输入收音机ID [英] Check if input radio ID is selected before form is submitted

问题描述

我正在使用WordPress的WooCommerce。在结帐时，我想检查用户提交之前是否选择了某个单选按钮。如果选择了某个ID，那么现在运行一个 window.alert 。我有WooCommerce提供的以下表单：

 < ul id =shipping_method> 
< li> 
< input type =radioname =shipping_method [0]data-index =0id =shipping_method_0_legacy_local_pickupvalue =legacy_local_pickupclass =shipping_method> 
< label for =shipping_method_0_legacy_local_pickup>本地代取< / label> 
< / li> 
< li> 
< input type =radioname =shipping_method [0]data-index =0id =shipping_method_0_distance_rate_shippingvalue =distance_rate_shippingclass =shipping_methodchecked =checked> 
< label for =shipping_method_0_distance_rate_shipping>从伊利诺伊州芝加哥S学院大道536号发货< / label> 
< / li> 
< / ul> 
  

我使用以下脚本进行测试：

 < script type ='text / javascript'> 
 if（document.getElementById（'shipping_method_0_distance_rate_shipping'）。checked）{
 alert（Delivery checked！）; 
} 
< / script> 
  

这个脚本在加载页面的时候效果很好，但是如果我在提交页面之前再次选择了单选按钮该脚本不起作用。如果我能够实时看到他们正在选择哪一个，那将解决我眼前的问题。

感谢您的时间和帮助。

点击时提醒：

  window.onload = function（）{//当页面加载时
 
 / /点击
 
 document.getElementById（'shipping_method_0_distance_rate_shipping'）。onclick = function（）{
 alert（Delivery checked！）; 
} 
 
 //在提交时测试：
 
 document.getElementById（'yourFormId'）。onsubmit = function（）{$ b $ if if（！ document.getElementById（'shipping_method_0_distance_rate_shipping'）。checked）{
 alert（Delivery not checked！）; 
返回false; //取消提交
} 
} 
} 
  

如果他们点击了正确的选项：

  window.onload = function（）{//当页面加载
 $ b时$ b $ document.getElementById（'yourFormId'）。onsubmit = function（）{
 return confirm（document.getElementById（'shipping_method_0_distance_rate_shipping'）。checked？
Local Pickup？：
从伊利诺伊州芝加哥S学院大道536号发货？）; 
} 
} 
  

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.

解决方案

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?");
  }    
}

这篇关于检查表单提交前是否选择了输入收音机ID的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！