Passing jquery datepicker value to php variable using ajax

1.5k views Asked by At

I have a jquery ui datepicker and the picked date is passing to a php page using post method. The full code of my php file is given below.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Datepicker</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script>
    $(function() {
        $( "#startDate" ).datepicker({
            defaultDate: (new Date(2013, 1 - 1, 26)),
            changeMonth: true,
            <!-- numberOfMonths: 1, -->
            onClose: function( selectedDate ) {
                $( "#endDate" ).datepicker( "option", "minDate", selectedDate );
            }
        });
        $( "#endDate" ).datepicker({
            defaultDate: new Date(),
            changeMonth: true,
            <!-- numberOfMonths: 1, -->
            onClose: function( selectedDate ) {
                $( "#startDate" ).datepicker( "option", "maxDate", selectedDate );
            }
        });
    });
    </script>
</head>
<body>
<form action="date.php" method="post">
<label for="startDate">startDate</label>
<input type="text" id="startDate" name="startDate" />
<label for="endDate">endDate</label>
<input type="text" id="endDate" name="endDate" />
<input type="submit" name="submit" value="Submit" />
</form>
<?php 
$startdate = isset($_POST['startDate']) ? $_POST['startDate'] : '';
echo $startdate;
?>
</body>
</html>

In the above code, the value of the picked date is passed to php only after submitting the form using submit button. How can I pass the value on select of the date picker using ajax? So that, the php echo function will display date dynamically on selecting the datepicker.

0

There are 0 answers