CODEWITHSUNDEEP
javascript
lennert_h
lennert_h

Reputation: 213

Display number of days based on selected month (with a for loop)

I'm trying to create a form where users can select a month, and then it shows checkboxes with all the days in that month.

Now, I've got this:

<form name="form">
<div>
<label for="month">Maand:</label>
<select id="month" name="month" onChange="selMonth()">
  <option value="-1" disabled selected>--Pick A Month--</option>
  <option value="4" >april</option>
  <option value="5" >mei</option>
  <option value="6" >juni</option>
</select>
</div>
<div>
Days:<br />
<script type="text/javascript">
function daysInMonth(month,year) 
{
  return new Date(year, month, 0).getDate();
}
function selMonth() {
  var slctdM = document.form.month.value;
  var dys = daysInMonth(slctdM,2014);
  for(i = 1; i <= dys ; i++)
  {
    document.write('<span style="width:10%;display:inline-block;"><input type="checkbox" id="' + i + '" /><label for="day_' + i + '">Dag ' + i + '</label></span>');
  }
}
</script>
</div>
</form>

I get the correct values, and the correct number of boxes get displayed, but erase everything on the page (so, the rest of the page and form gets erased. Also, the page keeps loading after all the boxes are shown on screen.

There is probably a simple fix for this or a stupid mistake I made, since I'm not that familiar with javascript. At first I wrote the for loop with php, but I decide to use javascript instead, because I want the number of boxes to update dynamically when a certain month is selected.

UPDATES

I now see that the page only keeps loading in Firefox, in Chrome the page finishes loading, but only shows the boxes.

I think the problem lies with the function selMonth(), because it is called with onChange, so when the month is changed, it only does document.write, and thinks it can forget the rest. But I don't know how to solve this. Moving the loop outside of the function doesn't solve my problem.

Upvotes: 0

Views: 1541

Answers (2)

naota
naota

Reputation: 4718

You might want to use .innerHTML instead of document.write().
I guess what you would like to do is something like this:

DEMO :http://jsfiddle.net/UaAX5/

HTML:

Days:<br />
<div id="days_area"></div>

JavaScript:

function selMonth() {
  var slctdM = document.form.month.value;
  var dys = daysInMonth(slctdM,2014);
  var boxes = "";
  for(i = 1; i <= dys ; i++)
  {
    boxes += '<span style="width:10%;display:inline-block;">'+
              '<input type="checkbox" id="' + i + '" />'+
               '<label for="day_' + i + '">Dag ' + i + '</label></span>';
  }
  document.getElementById('days_area').innerHTML = boxes;
}

The document of innerHTML is here :
https://developer.mozilla.org/en-US/docs/Web/API/Element.innerHTML Hope this helps.

Upvotes: 2

Matt Ellen
Matt Ellen

Reputation: 11612

document.write overwrites your entire document.

What you should do instead is append to the innerHTML of your form.

function selMonth() {
  var slctdM = document.form.month.value;
  var dys = daysInMonth(slctdM,2014);
  var frm = document.forms[0];
  for(i = 1; i <= dys ; i++)
  {
    frm.innerHTML += '<span style="width:10%;display:inline-block;"><input type="checkbox" id="' + i + '" /><label for="day_' + i + '">Dag ' + i + '</label></span>';
  }
}

Upvotes: 1

Related Questions