Php form in html document avoiding redirecting to the top when submitting form

Question

I included a php form into my html code and changed it from index.html to index.php. The contact form is working well and sending everything. After submitting the user gets the message "Thank you. The message has been sent.". However, when the page is refreshed it jumps up to the header and the user has to scroll down again to see the message.

I know why this happens. A couple of days ago I had included this code:

$(document).ready(function(){
$(this).scrollTop(0);
});

I did so because when somebody visited my website he was directed to the contact form first and the page did not load at the header first. However, now, when somebody is submitting a message the page scrolls again to the top. Do you know any way to avoid this? It would be nice if the user would see the header first when visiting the website but should be redirected to the form section when submitting a message.

Thank you for your help.

Kindly include your full code – Zain Farooq Mar 04 '19 at 09:17 — Zain Farooq, Mar 04 '19 at 09:17

Andrei Lupuleasa · Answer 1 · 2019-03-04T10:23:38.227

2

Use a cookie: https://www.w3schools.com/js/js_cookies.asp

$(document).ready(function(){
    if(!getCookie(cname)){
       $(this).scrollTop(0);
    }
});

$( "#formID" ).submit(function( event ) {
    setCookie(cname, cvalue, exdays)
});

edited Mar 04 '19 at 10:23

answered Mar 04 '19 at 09:17

Andrei Lupuleasa

2,677
3
14
32

Thank you. Could you explain to me a little bit more how I can specify that this only happens when somebody is submitting the form? Something like "onsubmit"... – C-lara Mar 04 '19 at 10:12
The best way would be to use ajax and don't reload your page and in that case you will need prevent default but with your current implementation I recommend using a cookie. – Andrei Lupuleasa Mar 04 '19 at 10:28

score 1 · Answer 2 · answered Mar 04 '19 at 09:19

1

When using jQuery, return false is doing 3 separate things when you call it:

event.preventDefault();
event.stopPropagation();
Stops callback execution and returns immediately when called.

See jQuery Events: Stop (Mis)Using Return False for more information and examples.

Ref

answered Mar 04 '19 at 09:19

Neeta

13
5

Why should I use it though? Cause I do not want to prevent the form being submitted. I only want to prevent that it again scrolls to the top. Could you help me with that? – C-lara Mar 04 '19 at 10:36

score 1 · Answer 3 · answered Mar 04 '19 at 09:21

1

Wrap that particular JS code block with a PHP if condition that checks whether the form has not been submitted. E.g.

<?php if (!$formSubmitted) { ?>

[JS code here]

<?php } ?>

answered Mar 04 '19 at 09:21

Denat Hoxha

915
8
16

In my php or my js file? – C-lara Mar 04 '19 at 10:39
1

In your PHP file. The `$formSubmitted` variable could use something like `$_POST["submit"]` or the equivalent depending on what framework you're using. – Denat Hoxha Mar 04 '19 at 11:45

score 1 · Answer 4 · answered Mar 04 '19 at 09:22

1

Try this

$('form').submit(function(e)
{
    e.preventDefault();
    $.ajax({
        type: 'POST',
        url: "your_page.php",
        data: $('form').serialize(), 
        success: function(response) { /*what to do on response*/ },
    });
});

Here i prevent default submit with reloading and send ajax post

answered Mar 04 '19 at 09:22

pavelbere

964
10
21

And this won't interfere with my form_process.php where I already specified where the data has to be sent to? – C-lara Mar 04 '19 at 10:38

score 1 · Accepted Answer · answered Mar 04 '19 at 09:34

1

Essentially you have two possible states. The first possible state is when you want to scroll to the top, the other is when you do not want to scroll to the top. Let's assume that you know what the condition is to be tested. In that case your code would look like:

<?php
    if ($condition) {
?>
        //your scrolling JS code
<?php
    }
?>

Now, how could we determine $condition? an idea is to store some value in the $_SESSION of the user, which will be a logical value which will determine whether we need to scroll or not. You should check whether the value exists in $_SESSION and if not, default it to true or false (depending on your actual need).

answered Mar 04 '19 at 09:34

Lajos Arpad

64,414
37
100
175

Could this work in any way.. $(document).ready(function(){ $(this).scrollTop(0); if ($formSubmitted){ event.preventDefault();} }); – C-lara Mar 04 '19 at 11:13
1

@C-lara you can do that, just make sure your code is syntactically correct. The if you have is PHP code both at the start and the end of its block. – Lajos Arpad Mar 04 '19 at 11:24
hey thanks! :) You mean I should indicate somewhere in the javascript that it is php? – C-lara Mar 12 '19 at 07:27
1

@C-lara First your server runs your PHP code, which generates the HTML. In the HTML you also have some Javascript. Then it sends the generated HTML to the web-browser, which, on its turn executes the HTML code and also the Javascript code. If you have your condition as I described above, then the Javascript which will be sent to the browsers as part of the HTML will differ based on the value of $condition. – Lajos Arpad Mar 12 '19 at 16:49

Php form in html document avoiding redirecting to the top when submitting form

5 Answers5