javascript - 如何使用此示例使用 javascript 将代码添加到我的表单标记？

Question

我正在使用重力表单 WordPress 插件，我想将 oninput 添加到我的表单标签中...我正在按照此页面上的说明进行操作: https://www.gravityhelp.com/documentation/article/gform_form_tag/

但是，他们提供的示例是替换表单标签中的某些内容，而不是在表单标签中添加某些内容......应该如何编辑以下代码以将 oninput 事件添加到标签而不是替换其中的内容标签的？我不知道用什么来代替 pregreplace...

add_filter( 'gform_form_tag', 'form_tag', 10, 2 );
function form_tag( $form_tag, $form ) {
    if ( $form['id'] != 3 ) {
        //not the form whose tag you want to change, return the unchanged tag
        return $form_tag;
    }
    $form_tag = preg_replace( "|action='(.*?)'|", "action='custom_handler.php'", $form_tag );
    return $form_tag;
}

Answer 1

嗯，我们有一个经典案例 XY Problem这里。您询问如何更改标记以包含 oninput 属性，但实际上您正在尝试完成其他任务。

所以，首先我会直接回答你的问题:

add_filter( 'gform_form_tag', 'form_tag', 10, 2 );
function form_tag( $form_tag, $form ) {
    if ( $form['id'] != 3 ) {
        //not the form whose tag you want to change, return the unchanged tag
        return $form_tag;
    }
    // We know the form has the 'form ' in it, so replace that with 'form' plus the oninput you want
    $form_tag = str_ireplace( "<form ", "<form oninput='myFunction() ", $form_tag );
    return $form_tag;
}

但实际上，可能有更好/更简单的方法。

编写一些 javascript - 因为您显然将使用 javascript - 与表单连接:

// Since WordPress loads jQuery in no-conflict mode, this is the preferred "document ready"
jQuery(function($) {
    // "gform_3" represents the form you want to target.
    $('#gform_3 input, #gform_3 textarea').on('change', function() {
        // Do your "oninput" work here
    }
});

只需更改 ID 以匹配您要定位的表单的 ID - 例如，如果您的表单 ID 为 23，则将其设为 #gform_23。