Send html form data to database through php without switching page - php

Question

Hey guys so i have a form:
<form action="signup.php" method="post" class="cd-form">
<p class="fieldset">
<input class="full-width has-padding has-border" type="text" required maxlength="15" placeholder="First Name" name="primeiro_nome" />
</p>
<p class="fieldset">
<input class="full-width has-padding has-border" type="text" required maxlength="15" placeholder="Last Name" name="segundo_nome">
</p>
<p class="fieldset">
<input class="full-width has-padding has-border" type="email" required maxlength="50" placeholder="E-mail" name="o_email">
</p>
<p class="fieldset">
<input class="full-width" type="submit" value="Sign Up!">
</p>
</form>
And you may notice that the action is calling "signup.php" :
<?php
$con=new mysqli ("localhost","root","","chroniclemark");
mysqli_set_charset($con, 'utf8mb4');
if($con->connect_error)
{
echo $con->connect_errno;
die("Database Connection Failed");
}
if(($_POST['primeiro_nome']) != ""){
$sql = "INSERT INTO users (nome, sobrenome, email)
VALUES('{$con->real_escape_string($_POST['primeiro_nome'])}', '{$con->real_escape_string($_POST['segundo_nome'])}', '{$con->real_escape_string($_POST['o_email'])}')";
$insert = $con->query($sql);
}
?>
And this is working. The data from the form is getting inserted into my database. The problem i have is that the main page closes when the form is submitted and the "signup.php" page opens instead of it.
How do i fix this? I would very much like to have a "Thank you for signing up" popping up on the same page instead of it switching to another one.

Answer 1

You can use AJAX to save data to database and show user a message in same page. Clicking on button a request is sent to server, data is saved into database, on success or failure a response is returned then show a message to user.
Form
First Give ids to input types in you form and add a message div.
<form method="post" class="cd-form">
<p class="fieldset">
<input class="full-width has-padding has-border" type="text" required maxlength="15" placeholder="First Name" id="primeiro_nome" />
</p>
<p class="fieldset">
<input class="full-width has-padding has-border" type="text" required maxlength="15" placeholder="Last Name" id="segundo_nome">
</p>
<p class="fieldset">
<input class="full-width has-padding has-border" type="email" required maxlength="50" placeholder="E-mail" id="o_email">
</p>
<p class="fieldset">
<input class="full-width" id='saverecords' type="button" value="Sign Up!">
</p>
jQuery Code to send AJAX request to server
Add a script tag include jQuery and inside click event get values of fields and then post to php page:
<script src=”http://code.jquery.com/jquery-3.1.1.min.js”></script>
<script type=”text/javascript”>
$(function(){
$("#saverecords").on('click', function(){
var pnome = $("#primeiro_nome").val();
var sname = $("#segundo_nome").val();
var email = $("#o_email").val();
$.ajax({
method: "POST",
url: "saverecords.php",
data: {"pname": pname, "sname": sname, "email": email},
}).done(function( data ) {
var result = $.parseJSON(data);
var str = '';
if(result == 1) {
str = 'Signup successfull.';
}else{
str = 'Data could not be saved. Please try again';
}
$("#message").html(str);
});
});
</script>
php server side code:
Please change it according to your requirement
Create a php page: saverecords.php
In saverecords.php you can insert data into database.
$conn = new mysqli($host, $username, $password, $dbname);
$pname = $_POST['pname'];
$sname = $_POST['sname'];
$email = $_POST['email'];
$sql = "insert into tablename (pname, sname, email) values (?, ?, ?) ";
$stmt = $conn->prepare($sql);
$stmt->bind_param('sss', $pname, $sname, $email);
if($stmt->execute()){
$result = 1;
}
}
echo $result;
$conn->close();
If you still face issue please visit this link you can find a detailed tutorial on how to use jQuery Ajax with php mysqli

Answer 2

You have to use AJAX instead of directly submitting the form
You send POST request with JS XMLHttpRequest or Fetch_API to signup.php, get the response and show the "Thank you for signing up" popup

Answer 3

There are mainly two ways you can do this.
1. You can use Jquery $.ajax method to send data, get a response and display your message.
2. Or you can simply let the php page it self do the processing. Add a submit button.
Change your <form action="signup.php" method="post" class="cd-form">to
<form action="" method="post" class="cd-form">
Add below after the form.
<?php
if (isset($_POST["submit"]){
//do your processing here
//at the end of processing you can use echo or HTML to display a thank you message
}
?>

Answer 4

You can make action page run inside an iframe so your form page remains on top
just like that:
<form action="signup.php" method="post" class="cd-form" target="my_iframe">
<p class="fieldset">
<input class="full-width has-padding has-border" type="text" required maxlength="15" placeholder="First Name" name="primeiro_nome" />
</p>
<p class="fieldset">
<input class="full-width has-padding has-border" type="text" required maxlength="15" placeholder="Last Name" name="segundo_nome">
</p>
<p class="fieldset">
<input class="full-width has-padding has-border" type="email" required maxlength="50" placeholder="E-mail" name="o_email">
</p>
<p class="fieldset">
<input class="full-width" type="submit" value="Sign Up!">
</p>
</form>
<iframe id="my_iframe" name="my_iframe" style="display:none"></iframe>
Also you can send form data to your PHP page by using jquery:
$(document).on('submit','.cd-form',function(e){
e.preventDefault();
$.ajax( {
url: "signup.php",
type: 'POST',
data: new FormData( this ),
cache: false,
dataType: "json",
success: function(r){
alert("data sent successfully");
}
} );
} );