Question

    <p>Todays Date: <? echo $date; ?></p>
    <p>Are you applying for a day, evening, or weekend class? 
    <select name='date' id='wclass'>
 <option value ='day'> Day</option>
 <option value ='evening'>Evening</option>
  <option value ='weekend'>Weekend</option>
  </select>


Program Start Date:
<div id='dates'></div>
<script language="javascript">
$(document).ready(function() {
{ setInterval(function () {

if ($("#wclass").val()=='day')

  {   $('#dates').html("<? echo <select name='date'>
<option value ='date1'> $start1 </option>
 <option value ='date2'>$start2</option>
 <option value ='date3'>$start3</option>
 <option value ='date4'>$start4</option>
  <option value ='date5'>$start5</option>
   <option value ='date6'>$start6</option>
   <option value ='date7'>$start7</option>
  </select> }?>");} 
  }, 1000); 
});

My issue is that i am not sure how to display php using javascript. The variables are all correct, the issue is to get the php to display as html would in my .html. All i want to do is display the php variables which i fetched in the beginning. So the variables have been defined in php now i want to turn them into a html list based on my javascript. You may notice that the echo is missing quotes, thats because i dont know how to put quotes, i cant use " or ' because they both interup quotes that are already there.

Answer 1

Your javascript does not have access to your PHP variables, unless you request them via AJAX.

However, you don’t have to use AJAX. You could use your PHP code to build the Javascript code before it is sent to the browser!!

Here’s one way of doing it:

<?php
    $start1 = '01/01/2010';
    $start2 = '11/11/2010';
    $start3 = '03/12/2010';
    // and so on...
?>
<p>Today's Date: <?php echo $date; ?></p>
<p>Are you applying for a day, evening, or weekend class?</p>

<select name="date" id="wclass">
    <option value="day">Day</option>
    <option value="evening">Evening</option>
    <option value="weekend">Weekend</option>
</select>


Program Start Date:

<div id="dates"></div>

<script language="javascript">
$(document).ready(function() {
{
    $("#wclass").change(function ()
    {
        if( $(this).val() == 'day' )
        {
            $('#dates').html('<select name="date">\
                <option value="date1"><?php echo $start1; ?></option>\
                <option value="date2"><?php echo $start2; ?></option>\
                <option value="date3"><?php echo $start3; ?></option>\
                <option value="date4"><?php echo $start4; ?></option>\
                <option value="date5"><?php echo $start5; ?></option>\
                <option value="date6"><?php echo $start6; ?></option>\
                <option value="date7"><?php echo $start7; ?></option>\
            </select>');
        } 
    }); 
});
</script>

---

An even better option would be to just create the second select outright, and then show/hide it when needed:

<?php
    $start1 = '01/01/2010';
    $start2 = '11/11/2010';
    $start3 = '03/12/2010';
    // and so on...
?>
<p>Today's Date: <?php echo $date; ?></p>
<p>Are you applying for a day, evening, or weekend class?</p>

<select name="date" id="wclass">
    <option value="day" selected="selected">Day</option>
    <option value="evening">Evening</option>
    <option value="weekend">Weekend</option>
</select>


Program Start Date:

<select id="dates" name="date">
    <option value="date1"><?php echo $start1; ?></option>
    <option value="date2"><?php echo $start2; ?></option>
    <option value="date3"><?php echo $start3; ?></option>
    <option value="date4"><?php echo $start4; ?></option>
    <option value="date5"><?php echo $start5; ?></option>
    <option value="date6"><?php echo $start6; ?></option>
    <option value="date7"><?php echo $start7; ?></option>
</select>

<script language="javascript">
$(document).ready(function() {
{
    $("#wclass").change(function ()
    {
        $(this).val() == 'day' ? $('#dates').show() : $('#dates').hide()
    }); 
});
</script>