使用消息提交后,转到/滚动到WordPress帖子上的密码字段

时间:2021-02-14 作者:Harold Aldersen

我已经根据帖子类别添加了一个密码表单(shortcode),其目的是隐藏某些HTML代码。

为此,我使用the_content 滤器

密码本身是通过一个数组添加的,这个数组更适合通过WP admin settings页面作为全局设置,但情况不同。

My main problem is this; 提交密码后,无论密码是对是错,用户都会得到;滚动的“;一直到页面顶部。

这不应该发生,这就是为什么我在表单中添加了一个ID。提交正确的密码后,用户应保持在原来的位置,也就是表单所在的位置,也就是HTML代码所在的位置。

有意义吗?部分问题在于此;“没有消息”;“密码成功”;或“或”;密码不正确;。

正如您在代码中看到的,我已经尝试使用以下方法将ID添加到路径:path=/#functioncode 没有成功。

This is the full code:

add_shortcode( \'protected\', \'protected_html\' );
function protected_html( $atts, $content=null ) {

    $functionUserPassword = isset( $_REQUEST[\'password\']) ? $_REQUEST[\'password\'] : ( isset( $_COOKIE[\'functionUserPassword\']) ? $_COOKIE[\'functionUserPassword\'] : NULL );

        if ( in_array( $functionUserPassword, array(\'password\') ) ) {

            $return_html_content = do_shortcode($content);
    
        } else {

    $return_html_content = 
    
        \'<div id="functioncode" style="margin-top:20px;font-size:15px;">To view the content of this section, submit your password.</div>
        <form method="post" onsubmit="functionCookie(this); return false;">
        <input required style="display: block; width: 69%; height: 50px; margin-right: 1%; float: left; border: 2px solid #333;" type="text" placeholder="&#32;Password Here" name="password" id="functionUserPassword">
        <input style="display: block; margin: 0px; width: 30%; height: 50px; background-color: #333; color: #fff;" type="submit" value="Submit">
        </form>

        <script>
        
            function functionCookie(form){
        
            document.cookie = "functionUserPassword=" + escape(form.functionUserPassword.value) + "; path=/#functioncode";
        
        </script>\';
    }

    return $return_html_content;
}

Here\'s the code which I am using with the content filter:

add_filter( \'the_content\', \'wrap_html_in_shortcode\', 9 );
function wrap_html_in_shortcode( $content ) {

    if ( ! in_category( \'premium\' ) ) return $content;

    $content = preg_replace(\'/(<span[^>]*>\\s*<div[^>]*>)/\',"[protected]$1", $content);

    $content = preg_replace(\'/(<\\/div>\\s*<\\/span>)/\', "$1[/protected]", $content);

    return $content;
}

3 个回复
SO网友:cjbj

不太清楚您想做什么,这看起来不像WordPress问题,但提交html表单肯定会导致新的页面加载。因此,您需要的不是重定向到同一个页面(当您指定无操作时会发生这种情况,导致页面滚动到顶部),而是重定向到该页面上的锚点。这个usual way to do this 将其包含在action 您的变量form 像这样:

<a name="somewhere"></a>

<form method="POST" action="#somewhere">
  ...
</form>

SO网友:John C

我强烈建议您将js代码分解出来,而不要将其包含在HTML属性中,因为它更具可读性。

然而,正如您所写,这应该可以解决您的问题:

<form method="post" onsubmit="event.preventDefault();functionCookie(this);">
表单提交时的默认操作(上面代码中的“事件”)是提交表单!

因此,您需要使用“取消默认操作”;preventDefault;。

SO网友:keepkalm

我认为这是您需要的解决方案:

<input onclick="window.location.href = \'/#functioncode\';" type="submit" value="Submit request" />
在其他堆栈中找到。通常,我会使用它重定向到“谢谢”页面来跟踪转换,但它应该同样适用于您的锚。

以下是完整代码中的内容:

<form method="post" onsubmit="functionCookie(this); return false;">
  <input required style="display: block; width: 69%; height: 50px; margin-right: 1%; float: left; border: 2px solid #333;" type="text" placeholder="&#32;Password Here" name="password" id="functionUserPassword">
  <input style="display: block; margin: 0px; width: 30%; height: 50px; background-color: #333; color: #fff;" type="submit" value="Submit">
  <input onclick="window.location.href = \'/#functioncode\';" type="submit" value="Submit request" />
</form>