javascript - 提交 WordPress 之前检查输入的 radio ID

Question

这就是我现在所拥有的!

主题/deliverHours.js:

更新

   window.onload = function () {
    getHour= new Date().toLocaleTimeString("en-US",{timeZone:"America/New_York",hour12: false});
    getDay= new Date().toLocaleTimeString("en-US",{timeZone:"America/New_York",hour12: false,weekday:'short'});
    day  = getDay.split(' ');
    arrayDate = getHour.split(':');
  document.getElementById('shipping_method_0_local_pickup8').onclick=function() {
        if(document.getElementById('shipping_method_0_local_pickup8').checked){
            console.log('local Pickup!');
            console.log(getDay);
            if(!(arrayDate[0] >= 7 && arrayDate[0] <= 16 && day[0] == 'Sun')) {
                        document.getElementById('msg').innerHTML = "Sorry,We are Closed";
              document.getElementById('checkOut').disabled = true
                }else{
          document.getElementById('checkOut').disabled = false
          console.log('enjoy your food');
        }
        }
    } 

    document.getElementById('shipping_method_0_flat_rate1').onclick=function(){
        if(document.getElementById('shipping_method_0_flat_rate1').checked){
            console.log('flat rate!');
            console.log(getDay);

          if(!(arrayDate[0] >= 7 && arrayDate[0] <= 16 && day[0] == 'Sun')) {
                      document.getElementById('msg').innerHTML = "sorry,we are closed. "
                    document.getElementById('checkOut').disabled = true
                  }else{
          document.getElementById('checkOut').disabled = false
          console.log('enjoy your food');
        }
}
}
}

主题/function.php:

function deliver_business_hours(){
   wp_register_script('deliverHours', plugins_url('deliverHours.js'), array(),'1.0', true);

wp_enqueue_script('deliverHours');
}




add_action( 'wp_enqueue_script', 'deliver_business_hours');

Lorem Ipsum 只是打印和排版行业的虚拟文本。自 1500 年代以来，Lorem Ipsum 一直是行业标准的虚拟文本，当时一位不知名的打印商拿走了一堆字体并将其打乱以制作一本字体样本簿。这段文字没用...

这应该有效吗？

Answer 1

不幸的是，这对于初学者来说是一个常见问题。让我们来看看为什么这不起作用:

1. 访问结帐页面时，用户的浏览器会向服务器发送带有任何相关 Cookie 等的请求。
2. 服务器开始执行 php(又名 WordPress)，最终您的小函数将被执行。
3. 您的echo会将字符串中的所有内容注入(inject)到发送回用户的 html 中。
4. 用户的浏览器看到 JavaScript 并开始执行。在 javascript 中，浏览器会看到这个奇怪的标签 <?php> 。 浏览器不知道如何执行 php.他们的默认设置是简单地忽略任何他们不理解的内容。这就是为什么它不起作用，通过回显 php 代码，你已经告诉浏览器做一些它不理解的事情。

PHP 是一种服务器端语言。如果您想编写 PHP，它必须在 HTTP 请求过程中由服务器执行。如果您需要在客户端执行某些操作，则必须全部用 javascript 编写。

所以这给你两个选择:

1. 重写所有逻辑以由 JS 处理。
2. 编写最少量的 JS 来回调服务器以在 PHP 中进行处理。

就您的情况而言，我认为一点点 JavaScript 应该能够通知客户您的交货​​时间。

<小时/>

关于编程风格的附注:

你真的不应该回显任何html标签，尤其是<script>和<style>标签。您应该有单独的 .js 和 .css 文件，然后将它们包含到 html 文档中。 WordPress提供了一个方便的功能:wp_enqueue_script这将以所有适当的方式为您做到这一点。

<小时/>

更新:

对于 PHP:您需要将单选按钮添加到提交的表单中。可能为 woocommerce 使用适当的钩子(Hook)/过滤器。之后，可以在从 $_POST['shipping_method'] 提交时访问该值。 .

对于 JS: Here是一个关于从浏览器获取时区特定日期时间的问题。不过，这似乎是一个非常本地化的网上商店，所以我会提到实例化 javascript 的 Date 对象会获取当前的本地日期时间。所以:

var now = new Date();
var hour = now.getHours();
var day = now.getDay();

应该为您提供小时和日期，就像您在 php 中使用它们一样。