CODEWITHSUNDEEP
phpjavascripthtml-select
Newbie Coder
Newbie Coder

Reputation: 10942

How to load html <select> with values upon loading the page using javascript in PHP?

I am having problem on how to load the HTML <select> with values whenever the page is first loaded or when refreshed.

I am actually trying to create a date_select with 3 dropdown menus which includes year, month, and days in which when the month-menu or year-menu is changed it will automatically adjust the number of days.

For example, when I selected the month March the days will be 31 or April the days will be 30 only.

My problem is when the page is first loaded the day-menu is empty. I tried onload on the <select> but it didn't work. I am a beginner in programming so I am having trouble even simple exercises like this. Please help.

date_select.php

<script type="text/javascript" >

 function loadDays() {
  var year = parseInt(document.getElementById('years').value);
  var month = document.getElementById('months').value;
  var months = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
  var days = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);

  if ((year % 4) == 0)  days[1] = 29;

  var days_select = document.getElementById('days');
  days_select.options.length = 0;

  for(i in months) {
   if (month == months[i]) {
    for(var j = 1; j <= days[i]; j++ ) days_select.options[days_select.options.length] = new Option(j, j);
    break;
   }
  }
 }

</script>

<span style="display: table; ">
 <span style="display: table-cell; ">
  <select id="years" onchange="loadDays();">
   <?php 
    for($year = 1900; $year <= 2100; $year++ ) {
     if ($year == date('Y')) echo "<option value='$year' selected=''>" . $year . "</option>";
     else echo "<option value='$year'>" . $year . "</option>";
    }
   ?>
  </select>
 </span>
 &nbsp;
 <span style="display: table-cell; ">
  <select id="months" onchange="loadDays();">
   <?php 
    $months = array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" );

    foreach($months as $month){
     if ($month == date('M')) echo "<option value='$month' selected=''> " . $month . "</option>";
     else echo "<option value='$month'> " . $month . "</option>";
    }
   ?>
  </select>
 </span>
 &nbsp;
 <span style="display: table-cell; ">
  <select id="days" onload="loadDays();">

  </select>
 </span>
</span>

Upvotes: 3

Views: 26247

Answers (3)

Nicola Peluchetti
Nicola Peluchetti

Reputation: 76870

You should consider using jQuery, a powerful and cross-browser javascript library that tries to make javascript programming more accessible.

For example it provides a function that waits for the DOM content to be loaded before inserting javascript in it (and it is better than the "onload" event because it doesn't waith for images to be loaded)

In jquery you (almost) always wrap your javascript in this function

$(document).ready(function(){
         //Here goes your code
});

If you need javascript, you really should check jQuery or other frameworks

Upvotes: 4

Martin Lazar
Martin Lazar

Reputation: 1340

I think it should be sufficient if you just move your javascript block below those spans and selects and then call your function just after it's declaration.

<span style="display: table; ">
...
</span>

<script type="text/javascript" >

 function loadDays() {
 ...
 }

 loadDays();
</script>

Upvotes: 3

grc
grc

Reputation: 23545

Try putting the onload attribute in the body tag instead of the select tag.

<body onload="loadDays();">

Upvotes: 1

Related Questions