CODEWITHSUNDEEP
javascriptjquery
Osman
Osman

Reputation: 1771

PHP List wont show in Javascript

<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( $("#wclass").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>

So my issue is that i cant get the dates to come up, the list wont show. If i put the listi in on its own, works like a charm. There an issue with the javascript?

This is what the browser gets:

 $('#dates').html('<select name="date">\
 <option value="date1">Aug 11</option>\
 <option value="date2">May 5</option>\
 <option value="date3">June 6</option>\ 
 <option value="date4">January 7</option>\
 <option value="date5">April 5</option>\
 <option value="date6">December 3</option>\
   <option value="date7">October 15</option>\
 </select>');

Upvotes: 0

Views: 204

Answers (2)

ShankarSangoli
ShankarSangoli

Reputation: 69915

Your string concatenation is wrong. Try this

Working demo

$('#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>');

Upvotes: 0

Joseph Silber
Joseph Silber

Reputation: 220036

Since you are listening to the change event, your list will only show up if you select evening or weekend, and then change it back to day.

You can either force a change on initial load:

$("#wclass").change(function ()
{
    if( $("#wclass").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>');
    } 
 }); 
}).val('day');

Or use then second solution I gave you here: Display php using javascript

Upvotes: 1

Related Questions