时间戳

首页 > 解决方案 > 如果注册页面重新加载，请记住 HTML 下拉列表值

php - 如果注册页面重新加载，请记住 HTML 下拉列表值

问题描述

我有一个 WordPress 页面，其中默认登录/注册页面被禁用，我让用户通过 WooCommerce 登录/注册页面注册，并通过我的主题的 functions.php 添加了一堆自定义字段。

其中一个字段是一个下拉字段，允许用户选择他们的国家。

如果用户在注册表单中遗漏了某些内容并且页面重新加载（错误消息告诉用户遗漏了什么），则文本字段会预先填充他们以前的文本。但是，下拉菜单会恢复为其中性选项，而不是记住其先前的值。

我的代码如下所示：

<?php add_filter( 'woocommerce_register_form', 'adding_custom_registration_fields' );
function adding_custom_registration_fields($fields) {
$countries_obj = new WC_Countries();
$countries = $countries_obj->__get('countries'); ?>

<div class="form-row form-row-wide">
    <label for="reg_billing_country"><?php _e( 'Country', 'woocommerce' ); ?> <span class="required">*</span></label>
    <select class="country_select sk-required" data-sk-tooltip="Required" name="billing_country" id="reg_billing_country">
        <option value=""> <?php _e('Select country','my-theme'); ?></option>
        <?php foreach ($countries as $key => $value): ?>
            <option value="<?php echo $key?>"><?php echo $value?></option>
        <?php endforeach; ?>
    </select>
</div>

如果页面重新加载，我希望下拉字段记住它的值，就像文本字段一样。我可以使用 html 来鼓励浏览器缓存值吗？

我试过了

var selectedItem = sessionStorage.getItem("country_select_session"); 
$('#reg_billing_country').val(selectedItem); 
$('#reg_billing_country').change(function() { 
  var dropVal = $(this).val(); 
  sessionStorage.setItem("country_select_session", dropVal); 
});

但是，仅当我使用 F5 手动重新加载页面时才会保留该值。如果通过单击带有不完整表单的“提交”按钮重新加载页面，下拉菜单将恢复为其默认值，忽略脚本

标签： phphtmlwordpresswoocommercedropdown

解决方案

我让它工作 - 结果脚本没有正确放置，因此没有被执行。感谢@mplungjan 指出。

我在</body>标签之前添加了上面提到的脚本，其中包含以下代码functions.php：

add_action( 'wp_footer', function () { ?>
    <script language="javascript" type="text/javascript">
        var selectedItem = sessionStorage.getItem("country_select_session");  
        $('#reg_billing_country').val(selectedItem);

        $('#reg_billing_country').change(function() { 
            var dropVal = $(this).val();
            sessionStorage.setItem("country_select_session", dropVal);
        });
    </script>
<?php } );

使用wp_footer动作挂钩，脚本被正确放置和执行。

推荐阅读