CODEWITHSUNDEEP
javascriptphpjquery
Kath Dee
Kath Dee

Reputation: 13

how to pass jquery date parameters in php

Please help me.. I have the following codes..

             //Get the value of Start and End of Week
            $('#weeklyDatePicker').on('dp.change', function (e) {
            var value = $("#weeklyDatePicker").val();
            var firstDate = moment(value, "MM/DD/YYYY").day(0).format("MM/DD/YYYY");
            var lastDate =  moment(value, "MM/DD/yyyy").day(6).format("MM/DD/YYYY");

            $("#weeklyDatePicker").val(firstDate + " - " + lastDate);

            });

now I want to pass the firstDate and the lastDate to a php. How should I do this. and how can I retrieve the passed value in the php. I'm not very familiar with javascripts. Hope anyone can help me. Thanks in advance.

Here is my full code.. JS tags

  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet"
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.1/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bootstrap.datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

HTML

 <div class="input-group" id="DateDemo">
<input type='text' id='weeklyDatePicker' placeholder="Select Week" class="form-control" />
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>

JS

 $("#weeklyDatePicker").datetimepicker({
            calendarWeeks:true,
            format: 'MM/DD/YYYY'

            });

            //Get the value of Start and End of Week
            $('#weeklyDatePicker').on('dp.change', function (e) {
            var value = $("#weeklyDatePicker").val();
            var firstDate = moment(value, "MM/DD/YYYY").day(0).format("MM/DD/YYYY");
            var lastDate =  moment(value, "MM/DD/yyyy").day(6).format("MM/DD/YYYY");
            $("#weeklyDatePicker").val(firstDate + " - " + lastDate);
            alert(firstDate);
            $.post("SAMPLE1.php",{"fdate" : firstDate ,"ldate" : lastDate});
            });


            $('#DateDemo').on('dp.change', function (e) {
            var kk = $("#weeklyDatePicker").val();
             $("#output").html(
            "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Week Number: " + moment(kk, "MM/DD/YYYY").week() + " of " + 
            moment(kk, "MM/DD/YYYY").weeksInYear()
            );
            });

SAMPLE1 CODE

 <?php
 echo $_POST["fdate"]; //for firstdate
 echo $_POST["ldate"]; //for lastdate
 ?>

Upvotes: 0

Views: 3432

Answers (4)

Arman Ozak
Arman Ozak

Reputation: 2344

I would use $.ajax() function, which will let you handle the error status as well, because it is both a good practice to handle errors for the users and an indicator of what is going wrong with your script.

$.ajax({
    url: 'test.php',
    type: 'POST',
    data: {fdate : firstDate ,ldate : lastDate},
    dataType: 'text',
    beforeSend: function(){
        // initiate some spinner or loading infobox
        // to inform the user about the AJAX request
    },
    success: function(response){
        alert(response);
        // you may use result like any standard argument
        // and call or trigger other functions according to its value
    },
    error: function(jqXHR, textStatus, errorThrown){
        alert(textStatus + ': ' + errorThrown);
        // call some error handler or do nothing
    },
    complete: function(){
        // close the spinner or loading box
    }
});

In your PHP file, you get the variables as $_POST['fdate'] and $_POST['lDate']. Once you complete the query and get the results, echo a response something like that:

echo 'success';

or

echo 'failure';

according to the result of the query. You may use any string, not just success or failure. Just don't forget that is what you will handle in the success part of your $.ajax() function and not the error part of it. The error part is only for whatever goes wrong with the request (e.g. file not found or server error).

Well, here is the tricky part: If the only thing you want to return is a status, you may use dataType: 'text' in your $.ajax() function as I did in this example. However, if you want to return an object with some useful data, such as what has gone wrong with the PHP query or what has been accomplished by the PHP query, then you'd better to use dataType: 'json' and get a JSON response. In such a case, the end of your PHP script will change too.

$result = ['statusCode'=>1,'details'=>'Some details according to the query here'];
echo json_encode($result);

The success handler of your $.ajax() function will get an object as the argument (i.e. response will be an object) which you can use like this:

alert(response.statusCode); // will alert 1

Upvotes: 0

Raju Dudhrejiya
Raju Dudhrejiya

Reputation: 1727

Hi Kath Dee please check below code, I hope solve your problem using below code.

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
    $('#weeklyDatePicker').on('dp.change', function (e) {
        // I am using test value, you can change var value base on id.
        var firstDate =  '08/02/2016';
        var lastDate  =  '10/02/2016';

        //$("#weeklyDatePicker").val(firstDate + " - " + lastDate);
         $.post("test.php",{fdate : firstDate ,ldate : lastDate},function(data) {
            alert(data);
            $("#weeklyDatePicker").val(data);
        });
    });
</script>

<input type="text" value="" id="weeklyDatePicker" />

test.php

<?php 
    // set your format as you want for display.
    echo $_POST['fdate'].'-'.$_POST['ldate'];
?>

I hope this is working fine for you.

Upvotes: 0

Mr. Engineer
Mr. Engineer

Reputation: 3515

You can use jquery for that. Try this code :

YOUR JS FILE CODE : 

$('#weeklyDatePicker').on('dp.change', function (e) {
     var value = $("#weeklyDatePicker").val();
     var firstDate = moment(value, "MM/DD/YYYY").day(0).format("MM/DD/YYYY");
     var lastDate =  moment(value, "MM/DD/yyyy").day(6).format("MM/DD/YYYY");
     $("#weeklyDatePicker").val(firstDate + " - " + lastDate);

     $.post("main.php",{fdate : firstDate ,ldate : lastDate},function(data) {
        alert(data);
    });
});

YOUR PHP FILE CODE (main.php)

<?php
if(isset($_POST["fdate"])) {
   echo $_POST["fdate"]; //for firstdate
}
if(isset($_POST["ldate"])) {
    echo $_POST["ldate"]; //for lastdate
}
?>

Make sure both the files are in same folder.

Upvotes: 2

Mayko
Mayko

Reputation: 439

Ajax is probably the easiest.

Javascript:

$.get("test.php", { firstDate: firstDate, lastDate: lastDate } );

or

$.post("test.php", { firstDate: firstDate, lastDate: lastDate } );

and in php

<?php
    echo $_REQUEST['firstDate'];
    echo $_REQUEST['lastDate'];
?>

Upvotes: 0

Related Questions