Navigate to form after submission

Question

This might seem a simple problem, but im stuck on this one. Hope anyone can help me on this

I'm working on server side form validation in PHP. Everything is working as expected as far as validation goes. But if an error is shown on input or the form gets submitted the browser navigates to the top of the page. How can I prevent this behaviour? I need the page where it is after I click the submit button

<?php include('process_form.php'); ?>
<form method="POST" action="<?php $_SERVER['PHP_SELF']; ?>">
    <div class="form-row">
        <div class="col form-group">
            <label>Primeiro nome</label>
            <input type="text" class="form-control" title = "Inserir nome"  name="firstname" value="<?php echo $firstname ?>">
            <span class="error"><?php echo $firstnameErr ?></span>

i think because when the "submit" request is put through it refreshes the page, have you tried using `` tags instead of ` — Sam.92, Apr 03 '19 at 11:42
What do you mean by "where it is"? Why not use an ID on your form and add a `#` and that ID to the form tag? — Nico Haase, Apr 03 '19 at 11:42
If you just need it to go back to the beginning of the form, use an anchor in the form action. If you need it to go to a specific position, you’ll need to either use JavaScript (measure scroll offset before submit, store somewhere, restore after) - or place the id the action-anchor targets somewhere dynamically. — 04FS, Apr 03 '19 at 11:43
Hello guys. I forgot to mention that my form is in the bottom of the page. So no matter the outcome, I want to stay on that form position. — SergioNeves, Apr 03 '19 at 11:50
how can we process validation without sending a request to server side? either reload is required or the validation may take place via ajax — Danyal Sandeelo, Apr 03 '19 at 11:52

score 2 · Accepted Answer · answered Apr 03 '19 at 15:26

If I understand your question, you are asking quite a lot from just HTML and PHP. Remember that once the form is submitted, the browser navigates away from the current page and loads the form action page (in your case, it reloads the current page as per the directive action="<?php $_SERVER['PHP_SELF']; ?>".

So, how would you position the page at exactly the desired location if there was no form submission going on? That is how you would do it in this case. So, as suggested in the comments, you could modify your action directive: action="<?php $_SERVER['PHP_SELF']; ?>#id_of_form_container". For example, if your form is in a div structure like this:

<div id="contact_form_div">
    <form method="POST" action="<?php $_SERVER['PHP_SELF']; ?>">

then your action tag would be:

action="<?php $_SERVER['PHP_SELF']; ?>#contact_form_div"

Alternately, you can do some basic form validity testing on the javascript side, during the form submit process. If, for example, a required field is blank, you can return false; - which will stop the submit process and return control to the user.

Here is an example of what basic javascript field validation looks like. And here is an example of using javascript/jQuery to interrupt the form submit process to perform that validation, and return control to the user (via return false;) if validation fails.

References:

MDN article on form validation - note the SmashingMagazine links at bottom

TutorialsPoint - more concise example of the same

Video tutorial of same (30 min)

Thank you very much, this is exactly what I was looking for – SergioNeves Apr 03 '19 at 15:49 — SergioNeves, Apr 03 '19 at 15:49

Navigate to form after submission

1 Answers1