如何在 WordPress 中使用只读脚本定位两个单独的表单

Question

我发现以下代码可以在 WordPress 的表单上将字段设置为只读，但我不知道如何使其适用于两个单独的表单：

// update '1' to the ID of your form
add_filter( 'gform_pre_render_1', 'add_readonly_script' );
function add_readonly_script( $form ) {
    ?>
    <script type="text/javascript">
        jQuery(document).on('gform_post_render', function(){
            /* apply only to a input with a class of gf_readonly */
            jQuery("#input_1_14_4").attr("readonly","readonly");
        });
    </script>
    <?php
    return $form;
}

如何使这个脚本与两个单独的表单和两个单独的字段一起工作？我尝试添加脚本两次，但它破坏了网站。

表格： gform_pre_render_1、gform_pre_render_20

字段： #input_1_14_4, #input_20_14_4

Answer 1

有更多 eloquent 方法可以做到这一点，但最重要的部分是您需要注册两个过滤器，每个表单一个。过滤器的回调可以是直接函数（我更喜欢），也可以是命名函数，这就是您的原始代码可能被破坏的地方，因为我猜您将函数命名为相同的，这在 PHP.

下面的代码创建了两个唯一命名的函数并为每个函数注册了操作。

请注意，从过滤器中回显内容通常不是一个好主意，并且可能会破坏某些假定不会发生这种情况的代码路径。也就是说，显然 that’s how GF recommends 这样做了，所以我想这是安全的，希望如此。

add_filter( 'gform_pre_render_1', 'add_readonly_script_form_1' );
function add_readonly_script_form_1( $form ) {
    ?>
    <script type="text/javascript">
        jQuery(document).on('gform_post_render', function(){
            /* apply only to a input with a class of gf_readonly */
            jQuery("#input_1_14_4").attr("readonly","readonly");
        });
    </script>
    <?php
    return $form;
}

add_filter( 'gform_pre_render_20', 'add_readonly_script_form_20' );
function add_readonly_script_form_20( $form ) {
    ?>
    <script type="text/javascript">
        jQuery(document).on('gform_post_render', function(){
            /* apply only to a input with a class of gf_readonly */
            jQuery("#input_20_14_4").attr("readonly","readonly");
        });
    </script>
    <?php
    return $form;
}

或者，虽然我现在没有可用的 WordPress 副本来测试它，但我认为您可以使用此 JS 完全跳过 PHP、Gravity 和 jQuery。它也可能需要对放置进行一些调整。

document
    .addEventListener(
      'gform_post_render',
      () => {
          document
              .querySelectorAll('#input_1_14_4, #input_20_14_4')
              .forEach(
                   (field) => {
                       field.setAttribute('readonly', 'readonly');
                   }
              )
          ;
      }
  )
;

如何在 WordPress 中使用只读脚本定位两个单独的表单

How to target two separate forms with read-only script in WordPress

php

forms

wordpress

readonly