Stop on submit form refreshing page - php

Question

I am having a problem, since my website reloads each time somemone submit a form.
It's a wide scroll, so i just found also another solution, but gives me an error.
PHP CODE:
<?php
session_name("fancyform");
session_start();
$_SESSION['n1'] = rand(1,20);
$_SESSION['n2'] = rand(1,20);
$_SESSION['expect'] = $_SESSION['n1']+$_SESSION['n2'];
if(isset($_SESSION['sent']))
{
$success='<h1>Thank you!</h1>';
unset($_SESSION['sent']);
header('Location: index.php#5');
}
?>
FORM CODE:
<form class="demo-form" name ="demo-form" data-parsley-validate method="post" action="submit.php" >
<ul>
<li class="js-hide-label">
<label for="name">Nombre:</label>
<input type="text" placeholder="Nombre" id="name" name="name" data-parsley-trigger="change" required tabindex="1" autocomplete="off" value="<?php echo (isset($_SESSION['post']['name']) ? $_SESSION['post']['name'] : ''); ?>" >
</li>
<li class="js-hide-label">
<label for="email">Your Email:</label>
<input type="email" placeholder="Your Email" id="email" data-parsley-trigger="change" name="email" autocomplete="off" required tabindex="2" value="<?php echo (isset($_SESSION['post']['email']) ? $_SESSION['post']['email'] : ''); ?>">
</li>
<li class="js-hide-label">
<label for="message">Message:</label>
<textarea placeholder="Message…" id="message" name="message" tabindex="3" required data-parsley-trigger="keyup" textarea id="message" data-parsley-minlength="20" data-parsley-maxlength="100" data-parsley-minlength-message = "Come on! You need to enter at least a 20 caracters long comment.." data-parsley-validation-threshold="10"><?php echo (isset($_SESSION['post']['message']) ? $_SESSION['post']['message'] : ''); ?></textarea>
</li>
<input class="btn btn-default"type="submit" name="button" id="button" value="Submit" />
</ul>
<?php echo isset($success)?$success:''; ?>
</form>
As you can see, adding a POSSIBLE SOLUTION with header('Location: index.php#5'); makes my website come back to the contact form (not exactly what I wanted, but helps a bit), but it breaks the $success='<h1>Thank you!</h1>';.
Is there any easy way to do it (using my original code) with AJAX? Since I am not used to work with scripts.
In the other hand, could be a solution on display $success='<h1>Thank you!</h1>'; and make the function header('Location: index.php#5'); work on the same form?

Answer 1

Use Ajax to post data if you don't want to refresh the page.
See documentation here
$.post documentation
Or
Ajax

Answer 2

Use header and redirect the page.
header("Location:your_page.php");
You can redirect to same page or different page.
or
<?php
session_name("fancyform");
session_start();
$_SESSION['n1'] = rand(1,20);
$_SESSION['n2'] = rand(1,20);
$_SESSION['expect'] = $_SESSION['n1']+$_SESSION['n2'];
if(isset($_SESSION['sent']))
{
unset($_SESSION['sent']);
header('Location: index.php?msg=sucess');
}
if ( isset($_GET['msg']) && $_GET['msg'] == 'sucess' )
{
$success='<h1>Thank you!</h1>';
}

Answer 3

You can try this :-
By using session :
if(isset($_SESSION['sent']))
{
unset($_SESSION['sent']);
$_SESSION['thanks_msg'] = 'Thank You';
header('Location: index.php#5');
}
?>
On index.php file :-
check if the $_SESSION['thanks_msg'] is set or not, if set then displaythat session msg.
By using GET method :-
if(isset($_SESSION['sent']))
{
$success='Thank you!';
unset($_SESSION['sent']);
header('Location: index.php?msg='.$success);
}
?>
on index.php file
if(isset($_GET['msg']))
{
echo $_GET['msg'];
}
EDIT :-
if(isset($_SESSION['sent']))
{
$success='Thank you!';
unset($_SESSION['sent']);
header('Location: index.php?msg='.$success);
}
?>
on index.php file
if(isset($_GET['msg']))
{
echo $_GET['msg'];
}