Jquery doesn't get my value from php file

Question

I need your help. In my php code I created a date countdown, it works everything, but i have problem with my code in jquery. I am trying to get $json_result value. This is my php code:

<?php
function addZero($addZero){
        return ($addZero < 10) ? '0'.$addZero : $addZero;
    }

header('Content-type: application/json');

$year_value = date('Y');
$end_month = $_GET['month'];
$end_day = $_GET['day'];
$end_hours = $_GET['hour'];

$date = strtotime("$year_value-$end_month-$end_day, $end_hours:00:00");
$remaining = $date - time();
$minutes = floor($remaining/60);
$hours = floor($remaining/3600);
$daysLeft = floor($remaining/86400);

if($daysLeft > 0){
        $remaining_hours = $hours - ($daysLeft * 24);
    }else{
        $remaining_hours = $hours;
    }

$remaining_minutes = floor(($remaining - ($hours * 3600))/60);
$remaining_seconds = floor($remaining - ($minutes * 60));

$result = 'Days left:&nbsp;'.$daysLeft.'&nbsp;'.addZero($remaining_hours).':'.addZero($remaining_minutes).':'.addZero($remaining_seconds);
$json_result = json_encode($result);
echo $json_result;
?>

And this is my html jquery php code:

<head>
<script type="application/javascript">
jQuery(document).ready(function(){
    $("#submit").click(countDown);
});

function countDown(e){
    setTimeout(function(){
        $.get('countdown.php',function(data){
        $("#countDown").html(data);
        e.preventDefault(); 
        });
        countDown();
    },1000);    
}
</script>
</head>
<body>
<?php
$monthsArray = array(0 => '0', 1 => 'Jan.', 2 => 'Feb.', 3 => 'Mar.', 4 => 'Apr.', 5 => 'May', 6 => 'Jun.', 7 => 'Jul.', 
8 => 'Aug.', 9 => 'Sep.', 10 => 'Oct.', 11 => 'Nov.', 12 => 'Dec.');
$months = array_slice($monthsArray, date('m'), 12, true);
?>
<label>Month:</label>
<select name="month" id="month">
    <?php
        foreach ($months as $values => $keys) {
            printf('<option value="%u">%s</option>', $values, $keys);        
        }
    ?>
</select>
<?php
$daysArray = array(0 => '0', 1 => '1', 2 => '2', 3 => '3', 4 => '4', 5 => '5', 6 => '6', 7 => '7', 8 => '8', 9 => '9', 10 => '10', 
11 => '11', 12 => '12', 13 => '13', 14 => '14', 15 => '15', 16 => '16', 17 => '17', 18 => '18', 19 => '19', 20 => '20', 21 => '21', 
22 => '22', 23 => '23', 24 => '24', 25 => '25', 26 => '26', 27 => '27', 28 => '28', 29 => '29', 30 => '30', 31 => '31');

    if(date('L') == 0 && (date('m') == 02 || date('m') == 2)){
        $days = array_slice($daysArray, date('d'), -3, true); // if it's not a leap year february has 28 days
    }elseif(date('L') == 1 && (date('m') == 02 || date('m') == 2)){
        $days = array_slice($daysArray, date('d'), -2, true); // if it's a leap year february has 29 days
    }elseif(date('m') % 2 == 0){
        $days = array_slice($daysArray, date('d'), -1, true); // even month
    }else{
        $days = array_slice($daysArray, date('d'), 31, true); // odd month
    }
?>
<label>Day:</label>
<select name="day" id="day">
    <?php
        foreach ($days as $values => $keys) {
            printf('<option value="%u">%s</option>', $values, $keys);        
        }
    ?>
</select>
<input type="submit" id="submit"  value="Submit">
<div id="countDown">
</div>
</body>

Can someone tell me what I'm doing wrong?? And I am using jquery version 1.9.1.

probably restarting the function before the ajax call finishes. — nathan hayfield, Apr 23 '13 at 15:19
@SomeSillyName i don't get the value $json_result from php code in my index.php file — Ivo Kuzmanic, Apr 23 '13 at 15:32
I think we need some more information. Do you get anything in the ajax callback? Can you write "data" to the console? Can you remove the setTimeout to see if that is this issue? Can you remove everything from your php and just have it echo 1 to see if the issue is in there? — Bafsky, Apr 23 '13 at 15:40
You might want to read this and get rid of the addZero function http://stackoverflow.com/questions/1699958/formatting-a-number-with-leading-zeros-in-php (it's kinda bad form to reproduce the SPL) Second, json_encode is for data arrays not strings. The way you're using it is erroneous. e.preventDefault(); doesn't work the way you think it does. You're actually looking for clearTimeout() info is here : http://stackoverflow.com/questions/8495105/cancel-javascript-timeout Look into, install and learn how to use your browsers developer tools (F12) when working with JS. And don't use IE. — Strixy, Apr 23 '13 at 15:41
@SomeSillyName now i see the problem, when I added console.log(data) and removed setTimeout, it says that data is not defined... — Ivo Kuzmanic, Apr 23 '13 at 15:51
@Strixy is not the problem in clearInterval and setInterval...the problem is in the data... — Ivo Kuzmanic, Apr 23 '13 at 16:09

raidenace · Answer 1 · 2013-04-23T16:52:42.837

0

Remove header('Content-type: application/json'); because you are already json_encoding your return string.

UPDATE

Replace $.get with $.post in your countDown function:

$.post('countdown.php',function(data){

What was happening is that since you are using get method, the form values were not being passed to the PHP script which caused junk values to be returned back

In countdown.php change $_GET to $_POST:

$end_month = $_POST['month'];
$end_day = $_POST['day'];
$end_hours = $_POST['hour'];

You also need to wrap the drop downs in a form with method='POST'. Additionally you need to pass the drop-down values to the $.post function as json. Please refer to the jquery post function to see how that is done.

When you post, the values have to be passed like so:

$.post("countdown.php", { 
   month: document.forms[0].month.value, 
   day: document.forms[0].day.value } )

Also, in your form there is no hour drop-down, but you are trying to fetch that in the countdown.php (which will give junk values).

So bunch of things to correct there, but I think you should be able to get there.

edited Apr 23 '13 at 16:52

answered Apr 23 '13 at 15:22

raidenace

12,789
1
32
35

yeah I tried that but know my countdown doesn't work and I get undefined index for month day and hour.. – Ivo Kuzmanic Apr 23 '13 at 15:35
@IvoKuzmanic: Not sure if there is anything different in your setup. When I run your code I get "Days left: -15819 0-379648:20:57" back as result. – raidenace Apr 23 '13 at 15:39
@IvoKuzmanic: Got it...All you have to do is change your `$.get` method to `$.post`. :) Updating answer.. – raidenace Apr 23 '13 at 15:51
I ran it and I got a proper countdown clock saying `Days Left: 195 14:48:53` with the clock counting down correctly. And I have not changed anything in the code you posted other than converting `$.get` to `$.post` – raidenace Apr 23 '13 at 16:13
i tried it several times but nothing happens, I even clean the cache memory of the browser... – Ivo Kuzmanic Apr 23 '13 at 16:38
@IvoKuzmanic: Ok, I assumed you did this but you might not have. In the countdown.php file change all `$_GET` to `$_POST` as well :) – raidenace Apr 23 '13 at 16:42
don't worry i did that to, same problem -.- – Ivo Kuzmanic Apr 23 '13 at 16:49
Also you need pass the data from the drop-downs to the next page. Please refer to $.post method in jquery how to do that – raidenace Apr 23 '13 at 16:51

score 0 · Answer 2 · answered Apr 23 '13 at 16:01

0

In your php code remove this line:

header('Content-type: application/json');

And so, you don't have to use json encode to output the result.

echo $json_result;

answered Apr 23 '13 at 16:01

vher2

980
6
9

Jquery doesn't get my value from php file

2 Answers2