JQuery Datepicker to PHP variable without form

Question

I'm having a situation and I've got the feeling it's quite simple to fix, but I can't seem to find the right keywords / way to do it.

What I've got

A JQuery Datepicker without a form. It's attached to a span, because I want my calendar to be a menu-item on my website. If I hover/click The 'Calendar' menu-item, the Datepicker shows:

<ul class="menu vertical">
  <li>
    <span id="datepicker"></span>
  </li>
</ul>

What I want / need

I would like to pass the date selected with the datepicker to PHP, so I can use it as a variable elsewhere on the website.

I believe, from other cases, it should be possible with Ajax. But all the examples I find include an input field and/or a submit button. I don't have a form, because I would like to show the datepicker only from the menu.

What would be the best way I can do this?

-- Edit --

Maybe I should give a bit more explanation. I've got images, saved in dd-mm-yy folders. I would like to be able to select a date with the datepicker and then show the images from that folder in a gallery. This is the code for the gallery:

<?php
$date = INPUT FROM DATEPICKER HERE;
$dirname = "images/$date/";
$images = glob($dirname."*.jpg");
echo '<div id="slider" class="flexslider"><ul class="slides">';
foreach($images as $image) {
    $titel = basename("$image", ".jpg").PHP_EOL;
    echo '<li><img src="'.$image.'" alt="'.basename("$image", ".jpg").PHP_EOL.'"><p class="flex-caption">'.str_replace("_", " ", $titel).'</p></li>';
};
echo '</ul></div>';
?>

Use the examples you've seen using AJAX and forms, except use jQuery datepicker's onSelect instead of running the AJAX on a form submit. — WheatBeak
– WheatBeak, Commented Mar 8, 2016 at 21:03

WheatBeak · Accepted Answer · 2016-03-11 14:20:28Z

1

Javascript UPDATED:

$("#datepicker").datepicker({
    onSelect: function() {
        var date = $('#datepicker').datepicker("getDate");
        $.ajax({
            url: "processdate.php",
            type: "POST",
            async: true,
            data: {
                selected_date: date
            },
            success: function(resp) {
                if (resp === "true") {
                    alert("it worked");
                } else {
                    alert("nope :-(");
                }
            } 
        });
    }
}).datepicker("setDate", new Date());//Set current date.

JAVASCRIPT NOTE

This will set the date to the current date, for display purposes only, but it will not run the AJAX call because if it did your users would be instantly redirected. Personally I recommend adding a button next to the datepicker that goes to the next page instead of automatically redirecting on select.

processdate.php, create this php file in same directory as page that has the js

<?php
session_start();
if(isset($_POST["selected_date"])){
    $_SESSION["date"] = $_POST["selected_date"];
    echo "true";
} else {
    echo "false";
}
?>

your php, this is the page you should redirect to after you have the AJAX working.

<?php
session_start();
$date = $_SESSION["date"];
$dirname = "images/$date/";
$images = glob($dirname."*.jpg");
echo '<div id="slider" class="flexslider"><ul class="slides">';
foreach($images as $image) {
    $titel = basename("$image", ".jpg").PHP_EOL;
    echo '<li><img src="'.$image.'" alt="'.basename("$image", ".jpg").PHP_EOL.'"><p class="flex-caption">'.str_replace("_", " ", $titel).'</p></li>';
};
echo '</ul></div>';
?>

Once you have this working replace alert("it worked"); with whatever you want to happen if it's successful, I'm presuming a redirect to your image page.

edited Mar 11, 2016 at 14:20

answered Mar 8, 2016 at 21:16

WheatBeak

1,0216 silver badges12 bronze badges

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

11 Comments

Shehary Over a year ago

tested and it should work, better if var date = $(this).html(); replace with var date = $('#datepicker').datepicker("getDate");

ZipperZapper Over a year ago

I added your code to my page and created processdate.php with 'echo $_POST['selected_date'];' in it, but if I select a date I get 'nope :-('. What's going wrong?

Gareth Over a year ago

@ZipperZapper The success code is checking that the response consists only of the word 'true'. So when you echo out the received date, it causes the function to print out "nope :-(".

ZipperZapper Over a year ago

@Gareth I'm sorry, I don't understand what you mean. I edited my original question with some additional information, maybe it helps.

WheatBeak Over a year ago

I got this answer confused with another similar one I had, edited again.

|

Chris · Accepted Answer · 2016-03-08 21:17:22Z

0

You can do a post, it is shorthand ajax for the post method.

$.post('path/to/php', {variable_name: $('#datepicker')}, function(return_data, result, xhr){
    if(result == 'success')
        console.log(return_data); //or do whatever you want, or keep it empty
});

You can then receive this variable again in your php like you would a normal post like so:

$_POST['variable_name']

answered Mar 8, 2016 at 21:17

Chris

9977 silver badges24 bronze badges

Collectives™ on Stack Overflow

JQuery Datepicker to PHP variable without form

2 Answers 2

11 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

11 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related