Pass value from html to php page using ajax and print the return value in div

Question

I want to pass some value from my html page to php page using ajax and print the return value in a div

HTML Code :

<!DOCTYPE html>
<html>
<head>
<title></title>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>


<style type="text/css">

#div1, #div2{

    border: 1px solid #000;
    width: 30%;
    margin-left: 10%;
    height: 400px;
    margin-top: 20px;
    float: left;
}

#nm, #cls, #roll, #dob, #submit1{

   margin-top: 10px;
}

</style>


</head>

<body>

   <div id="div1" class="container input-group"> <!-- Make text input and button in same row with Bootstrap -->

        <form>
            <table width="70%">

                <tr>
                    <td align="right">Name : &nbsp;</td>
                     <td>
                        <input type="text" name="nm" id="nm" maxlength="30" class="form-control" placeholder="Name">
                    </td>
                </tr>

                <br>

                <tr>
                    <td align="right">Class : &nbsp;</td>
                     <td>
                        <select class="form-control" align="center" id="cls">
                            <option value="0">Please Select</option>
                            <option value="First Year">First Year</option>
                            <option value="Second Year">Second Year</option>
                            <option value="Third Year">Third Year</option>
                        </select>
                    </td>
                </tr>

                <tr>
                    <td align="right">Roll No. : &nbsp;</td>
                     <td>
                        <input type="text" name="roll" id="roll" class="form-control" placeholder="Roll No." align="center">
                    </td>
                </tr>

                <tr>
                    <td align="right">DOB : &nbsp;</td>
                     <td>
                        <input type="date" name="dob" id="dob" class="form-control" placeholder="Date of Birth" align="center">
                    </td>
                </tr>

                <tr>
                    <td></td>
                     <td>
                        <button class="btn btn-primary" name="submit1" id="submit1">Add</button>
                    </td>
                </tr>

            </table>

        </form>

   </div>

   <div id="div2">

   </div>


<script type="text/javascript">

$(document).ready(function() {           
$('#submit1').click(function() {
var nm = $('#nm').val();
var cls = $('#cls').val();
var roll = $('#roll').val();
var dob = $('#dob').val();
$.ajax({
    type: 'POST',
    url: 'index.php',
    data: ({ nm: nm, cls: cls, roll: roll, dob: dob }),
    success: function(response) {
        $('#div2').html(response);
    }
});
});
});

</script>


</body>
</html>

PHP Code

<?php 

$nm = $_POST['nm'];
$cls = $_POST['cls'];
$roll = $_POST['roll'];
$dob = $_POST['dob'];


$date = date_format($date, 'Y-m-d');


$now = time();

$dob = strtotime('Y-m-d', $dob);

$difference = $now - $dob;

$age = floor($difference / 31556926);

echo "Name : ". $nm;

echo "Class : ". $cls;

echo "Roll No. : ". $roll;

echo "Age : ". $age;

?>

I don't know what is wrong with my code. But after I click on "Add" button my address bar looks like this :

index.html?nm=asd&roll=1&dob=1992-08-12&submit1=

even though I am using POST method. Help is needed.

Robin Knaapen · Accepted Answer · 2016-10-10 14:39:06Z

2

Your click function still posts the form. use Javascript's preventDefault() to counter this

$('#submit1').click(function(event) {
    event.preventDefault();
    var nm = $('#nm').val();
    var cls = $('#cls').val();
    var roll = $('#roll').val();
    var dob = $('#dob').val();
    $.ajax({
        type: 'POST',
        url: 'index.php',
        data: ({ nm: nm, cls: cls, roll: roll, dob: dob }),
        success: function(response) {
            $('#div2').html(response);
        }
    });
});

answered Oct 10, 2016 at 14:39

Robin Knaapen

6064 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Robin Knaapen Over a year ago

No problem i'm glad to help, Could you mark this as an answer and close the question. Greeting!

Arnab Over a year ago

I have upvoted your answer but I was shown this following notification : Thanks for the feedback! Votes cast by those with less than 15 reputation are recorded, but do not change publicly displayed post score Sorry about that

Robin Knaapen Over a year ago

@Arnab haha, no problem then :P

Naresh Kumar P · Accepted Answer · 2016-10-10 14:39:20Z

1

You have to provide the form method as "POST" then alone it will never send the submitted data to the URL which you access.

What problem you face is that you have not specified any method to your <form> attribute and hence it takes the GET method.

First Learn the difference between GET and POST methods

answered Oct 10, 2016 at 14:39

Naresh Kumar P

4,2802 gold badges18 silver badges34 bronze badges

1 Comment

Robin Knaapen Over a year ago

He uses ajax to post. but he forgot the event.preventDefault() so the form still submited.

Collectives™ on Stack Overflow

Pass value from html to php page using ajax and print the return value in div

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related