Go to / Scroll to Password Field on WordPress Posts After Submit With Message(s)

Question

I have, based on post category, added a password form (shortcode) whereof the purpose is to hide certain HTML code.

To do this, I have wrapped certain HTML-tags in a shortcode using the the_content filter.

The password itself is added through an array, which would be much better suited as an global setting through the WP admin settings page - but that's a different story.

My main problem is this; after submitting the password - no matter if the password is right or wrong - the user get "scrolled" all the way to the top of the page.

That should not happen, which is why I added a ID to the form. Upon submitting the correct password, the user should be kept in the same place, which is where the form was which is where the HTML code now is.

Makes sense? Part of the problem is this; there's no message for "password successful" or "incorrect password".

As you can see in the code, I've already tried to add the ID to the path using this: path=/#functioncode without success.

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;
}

Answer 1

Not exactly sure what you are trying to do and this doesn't look like a WordPress issue, but submitting a html form will certainly lead to a new page load. So what you want is redirect not to the same page (which happens when you specify no action, leading the page to scroll to the top) but to an anchor on that page. The usual way to do this is to include it in the action variable of your form like this:

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

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

Answer 2

I'd strongly advise you to break out the js code rather than having it in HTML attributes, it's just so much more readable.

However, as you've written it, this should fix your problem:

<form method="post" onsubmit="event.preventDefault();functionCookie(this);">

The default action for a form, when it's submitted (the "event" in the code above) is for the form to be, well, submitted!

So, you need to cancel that default action using "preventDefault".

Answer 3

I think this is the solution that you need:

<input onclick="window.location.href = '/#functioncode';" type="submit" value="Submit request" />

Found in a different stack. Normally I use this to redirect to a 'Thank You' page to track conversions, but it should work equally well with your anchor.

Here's what it looks like in your full code:

<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>