echo php variable inside jQuery function

Question

i have this PHP variable set in joomla 2.5 template file

$datestart = date('Y-m-d g:i', strtotime("+1 week"));
$dateend = date('Y-m-d g:i', strtotime("+30 days"));

and when i echo this

<?php echo json_encode($datestart); ?>

inside a php page it works. I'm trying to include this variable inside a jQuery function of the RS Form component

$formLayout .= "\n".'<script type="text/javascript" src="'.JURI::root(true).'/components/com_rsform/assets/calbs.js"></script>'."\n";

in the .js file i have

jQuery(function() {
jQuery("#datetimepicker").datetimepicker({
format: "dd MM yyyy - HH:ii P",
showMeridian: true,
autoclose: true,
startDate: <?php echo json_encode($datestart); ?>,
endDate: <?php echo json_encode($dateend); ?>,
minuteStep: 15,
pickerPosition: "bottom-left"

});
 });

But it's not working and shows syntax error for the php echo line. How can i solve this ?

If your JavaScript file is not processed by PHP, then the <?php ... ?> won't be replaced. Hence the syntax error. — Felix Kling
– Felix Kling, Commented Jul 13, 2013 at 10:49

Vagabond · Accepted Answer · 2014-10-14 01:09:17Z

You have to assign the php values first to js variables in .php file

<script>
START_Date='<?php echo json_encode($datestart); ?>';
END_Date='<?php echo json_encode($dateend); ?>';

</script>

Now in your js file

jQuery(function() {
    jQuery("#datetimepicker").datetimepicker({
        format: "dd MM yyyy - HH:ii P",
        showMeridian: true,
        autoclose: true,
        startDate: START_Date,
        endDate: END_Date,
        minuteStep: 15,
        pickerPosition: "bottom-left"

    });
 });

OR include your js code in your php file then you can directly use php variables inside your js like this:

jQuery(function() {
    jQuery("#datetimepicker").datetimepicker({
        format: "dd MM yyyy - HH:ii P",
        showMeridian: true,
        autoclose: true,
        startDate: '<?php echo json_encode($datestart); ?>',
        endDate: '<?php echo json_encode($dateend); ?>',
        minuteStep: 15,
        pickerPosition: "bottom-left"

    });
});

Ravi · Accepted Answer · 2013-07-13 10:47:56Z

1

Hi You can not use php code in js file. store value in javascript variable and then use this variable in you jquery function.

answered Jul 13, 2013 at 10:47

Ravi

4632 silver badges11 bronze badges

Comments

aliasgar vanak · Accepted Answer · 2013-07-13 11:06:06Z

1

You can simply store this value into the hidden field and then get it by its id value in to the .js file.

answered Jul 13, 2013 at 11:06

aliasgar vanak

6848 silver badges23 bronze badges

Comments

Arun Kumar · Accepted Answer · 2013-07-13 10:58:04Z

0

try this code

<input type="hidden" id="startdate" value="<?php echo json_encode($datestart); ?>"/>
<input type="hidden" id="enddate" value="<?php echo json_encode($dateend); ?>"/>



jQuery(function() {
var start = jQuery("#startdate").val();
var end= jQuery("#enddate").val();
 jQuery("#datetimepicker").datetimepicker({
  format: "dd MM yyyy - HH:ii P",
  showMeridian: true,
  autoclose: true,
  startDate: start,
  endDate: end,
  minuteStep: 15,
  pickerPosition: "bottom-left"
});
});

answered Jul 13, 2013 at 10:58

Arun Kumar

1,6331 gold badge18 silver badges33 bronze badges

Comments

gayan · Accepted Answer · 2013-07-13 11:01:52Z

0

you should do it this way:
<?php

$datestart = date('Y-m-d g:i', strtotime("+1 week"));
$dateend = date('Y-m-d g:i', strtotime("+30 days"));

?>

 <input id="datestart" type="hidden" name="datestart" value="<?php echo $datestart; ?>">
  <input id="dateend" type="hidden" name="dateend" value="<?php echo $dateend; ?>">

  <script>
      var datestart = document.getElementById('datestart').value;
       var dateend = document.getElementById('dateend').value;

      jQuery(function() {
jQuery("#datetimepicker").datetimepicker({
format: "dd MM yyyy - HH:ii P",
showMeridian: true,
autoclose: true,
startDate: datestart,
endDate: dateend,
minuteStep: 15,
pickerPosition: "bottom-left"

});
 });
  </script>

answered Jul 13, 2013 at 11:01

gayan

2121 silver badge3 bronze badges

1 Comment

Kannan Naidu Over a year ago

this method worked too but i didn't want to include the hidden input type

Collectives™ on Stack Overflow

echo php variable inside jQuery function

5 Answers 5

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related