Save HTML Form Using Jquery and PHP Without Page Refresh

Hello friends hope you all are doing good and please be safe at your home in this pandemic situation. In the previous tutorial we have used Ajax to save the HTML form without refresh.  Now in this tutorial we will use the Jquery to send the data to our PHP script.

In Jquery we can use 2 methods for getting the HTML form data without refresh. We have serialize() function to get all the data or we can use the normal method to get the data like – var mydata={“name”:$(‘#id’).val()} you can add more data by comma separate.




For sending the data we will use $.POST(), $.GET() etc. These methods takes multiple parameters like – url, data, result.

$.post(yoururl,yourdata,function(result){
    //working area after getting the result
})

Yoururl means where you want to send your data. Your PHP page where you will do the other processing like sending mail or saving the data to the database.

Yourdata means data which was filled in the HTML form. And you can get the data by using any above discussed methods.

If you want to save form using php then read it here.

So lets start How to Save HTML Form Using Jquery

First of all we will divide it into 3 parts 1 is HTML form and 2nd is Jquery for getting the values and sending those values to PHP and final is PHP part to get the values and save it to the database. Now we will start our working from 1st part which is creating HTML form.

Include the CSS and Jquery by using CDN

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

HTML Form (Use bootstrap for this)

div class="col-md-3">
    <h2>Sign Up</h2>
    <form id="myform">
    <label>First Name</label>
    <input type="text" name="firstname" class="form-control">
    <label>Last Name</label>
    <input type="text" name="lastname" class="form-control">
    <label>Email Address</label>
    <input type="text" name="email" class="form-control">
    <br/>
    <input type="button" id="testit" value="Sign up" class="btn btn-primary ">
    <div class="clearfix"></div>
    </form>
</div>

In the above code we have created the HTML form for filling out the data. Now we will written down the Jquery part to transfer this data to our PHP page.

<script>
    $('#testit').click(function(){
        var formdetails=$('#myform').serialize();
        var url="postvalues.php";

        $.post(url,formdetails,function(result){
            alret(result);
        })
    })
</script>

In the above code you can see that we are transferring our data to our PHP page you can see the url variable. In the “formdetails” variable we are getting our whole form values. We have used the post method so we will transfer the data using POST to our PHP so while getting the data we have to use $_POST in our PHP.

PHP Script (postvalues.php)

echo "My Name is - $_POST[firstname] $_POST[lastname] and mail id is $_POST[email]";

Hope you like our tutorial if you have any advice then please comment below.

~ Stay Home Be Safe Use Mask ~