2

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;
}
14
  • 1
    Have you tried using AJAX to achieve this? Seems like the perfect case to go for it. You can send the HTML content back by the server, and replace the current content using AJAX/jQuery.
    – Johansson
    Feb 16, 2021 at 15:59
  • Ok, can you provide an example code? Feb 16, 2021 at 17:18
  • 1
    This can be a good place to start.
    – Johansson
    Feb 16, 2021 at 19:46
  • Actually @HaroldAldersen, I noticed that your form was not supposed to be submitted because you've got that return false in the onsubmit tag; however, your JS has a syntax error - the function functioncode is never closed, i.e. it's missing the }.
    – Sally CJ
    Feb 18, 2021 at 13:16
  • Thank you all so far. I will make changes and test them out and get back to you. Feb 18, 2021 at 13:20

3 Answers 3

2
+50

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>
5
  • Okay. I'll check and try. Feb 16, 2021 at 16:54
  • No, sorry. No matter what I do, the page reloads / refreshes. Feb 16, 2021 at 18:11
  • 3
    Yes, that's what i said in my answer. Submitting a form inevitably leads to a page reload.
    – cjbj
    Feb 16, 2021 at 20:46
  • This solution should work, did you have any success Harold?
    – keepkalm
    Feb 22, 2021 at 18:44
  • @keepkalm no, the page reloads / refreshes. I needed to avoid that, which is what my question is about. I understand now that I need to use AJAX, but I don't know how. Mar 8, 2021 at 6:13
0

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

3
  • What is "event"?
    – Sally CJ
    Feb 18, 2021 at 0:55
  • event is what has been triggered.....
    – John C
    Feb 18, 2021 at 12:19
  • Yes, I know. But OP or other readers may not know, and you should explain why would event.preventDefault() fix the problem, when the original code actually used return false.
    – Sally CJ
    Feb 18, 2021 at 13:23
0

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>
2
  • Using cPanel and using your code to replace mine, the editor shows an error. This line is not properly formatted: <input onclick="window.location.href = '/#functioncode';" type="submit" value="Submit request" /> and also, why two type and value ? I tried fixing it myself by just adding onclick="window.location.href = "/#functioncode" to the existing input - but the end result is the same - reload / refresh. Feb 18, 2021 at 7:07
  • Try it with the full URL and anchor. That should work. It is always going to refresh/reload because that is how forms work. Check the URL in the browser and see what it says.
    – keepkalm
    Feb 18, 2021 at 17:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.