set innerHTML or … ??????

I have a form for users to enter events and their start and end times. There is a link they can click to add additional days to their event if it’s a multi-day event. To add the extra form inputs, i’m setting the innerHTML attribute of a div tag. it’s working! on both firefox and IE.

I’m wondering if this is ok or if there is something inherently bad about this or if there’s a better way.

I’m using PHP so those weird tags you may not recognize are supposed to be there.

script:

[CODE]
<script language=”Javascript”>
var numberOfDays = 1;
// this fn adds another day to the form
function addDay() {
if (!document.getElementById) {
alert(“Your browser does not support this feature. Please get a more modern browser”);
return;
}
var dayOneEl = document.getElementById(‘day_one’);
dayOneEl.style.display = ‘inline’;
var sameDateEl = document.getElementById(‘same_time_each_day_yes’);
var dateEl = document.getElementById(‘date_div’);
numberOfDays++;
var currentHTML = ”;
currentHTML += ‘<br>’;
currentHTML += ‘Day ‘ + numberOfDays + ‘<br>’;
currentHTML += ‘<table width=”100%” cellpadding=”0″ cellspacing=”0″ border=”0″><tr><td align=”left” valign=”top” width=”25%”><input name=”start_date[‘ + numberOfDays + ‘]” id=”start_date_’ + numberOfDays + ‘” type=”text” value=”” size=”10″>&nbsp;<a href=”javascript:void(0);” onClick=”calendarPopup(‘start_date_’ + numberOfDays + ”);”><img src=”images/calendar_icon.jpg” width=”16″ height=”15″ border=”0″></a></td>’;
currentHTML += ‘<td align=”left” valign=”top”><table width=”100%” border=”0″ cellpadding=”0″ cellspacing=”0″ id=”event_time_’ + numberOfDays + ‘”‘;
if (sameDateEl.checked == true) {
currentHTML += ‘ style=”display:none;”‘;
}

currentHTML += ‘>’;
currentHTML += ‘<tr>’;
currentHTML += ‘<td width=”10%” align=”right”><b><font color=”#FF0000″>*</font></b>Start&nbsp;Time:</td>’;
currentHTML += ‘<td align=”left” valign=”top”><select name=”start_time[‘ + numberOfDays + ‘]” size=”1″><option value=””>&ndash;</option><option value=”0″>12</option>’;
for(i=1; i<12; i++) {
currentHTML += ‘<option value=”‘ + i + ‘”>’ + i + ‘</option>’;
}
currentHTML += ‘</select>&nbsp;’;
currentHTML += ‘<input type=”radio” name=”start_time_m[‘ + numberOfDays + ‘]” value=”0″>am <input type=”radio” name=”start_time_m[‘ + numberOfDays + ‘]” value=”12″>pm</td>’;
currentHTML += ‘</tr>’;
currentHTML += ‘<tr>’;
currentHTML += ‘<td align=”right” valign=”top”><b><font color=”#FF0000″>*</font></b>End&nbsp;Time:</td>’;
currentHTML += ‘<td align=”left” valign=”top”><select name=”end_time[‘ + numberOfDays + ‘]” size=”1″><option value=””>&ndash;</option><option value=”0″>12</option>’;
for(i=1; i<12; i++) {
currentHTML += ‘<option value=”‘ + i + ‘”>’ + i + ‘</option>’;
}
currentHTML += ‘</select>&nbsp;’;
currentHTML += ‘<input type=”radio” name=”end_time_m[‘ + numberOfDays + ‘]” value=”0″>am <input type=”radio” name=”end_time_m[‘ + numberOfDays + ‘]” value=”0″>pm</td>’;

currentHTML += ‘</tr>’;
currentHTML += ‘</table></td></tr></table>’;
dateEl.innerHTML += currentHTML;

var elST = document.getElementById(‘same_time_each_day’);
elST.style.display = ‘block’;
} // addDay

function sameTimeChange() {
if (!document.getElementById) {
alert(“Your browser does not support this feature. Please get a more modern browser”);
return;
}
var sameDateEl = document.getElementById(‘same_time_each_day_yes’);
if (numberOfDays < 2) {
return;
}
for(i=2;i<=numberOfDays;i++) {
var el = document.getElementById(‘event_time_’ + i);
if (sameDateEl.checked == true) {
el.style.display = “none”;
} else {
el.style.display = “block”;
}
}
}
</script>
[/CODE]

form:

[code=html]
<table>
<tr>
<td id=”date_element” align=”left” valign=”top”><span id=”day_one” style=”display:none;”>Day 1<br></span>
<table width=”100%” cellpadding=”0″ cellspacing=”0″ border=”0″>
<tr>
<td align=”left” valign=”top” width=”25%”><input name=”start_date[1]” id=”start_date_1″ type=”text” value=”” size=”10″>&nbsp;<a href=”javascript:void(0);” onClick=”calendarPopup(‘start_date_1’);”><img src=”images/calendar_icon.jpg” width=”16″ height=”15″ border=”0″></a></td>
<td align=”left” valign=”top”><table width=”100%” cellpadding=”0″ cellspacing=”0″ border=”0″ id=”event_time_1″>
<tr>
<td width=”10%” align=”right”><b><font color=”#FF0000″>*</font></b>Start&nbsp;Time:</td>
<td align=”left” valign=”top”><select name=”start_time[1]” size=”1″>
<option value=””>&ndash;</option>
<option value=”0″<?=($_POST[‘start_time’][1] === ‘0’) ? ‘ selected’ : ” ?>>12</option>
<?
for($i=1; $i<12; $i++) {
echo ‘<option value=”‘ . $i . ‘”‘ . (($_POST[‘start_time’][1] == $i) ? ‘ selected’ : ”) . ‘>’ . $i . ‘</option>’ . chr(10);
}
?>
</select>&nbsp;<input type=”radio” name=”start_time_m[1]” value=”0″<?=($_POST[‘start_time_m’][1] === ‘0’) ? ‘ checked’ : ” ?>>am
<input type=”radio” name=”start_time_m[1]” value=”12″<?=($_POST[‘start_time_m’][1] == ’12’) ? ‘ checked’ : ” ?>>pm</td>
</tr>
<tr>
<td align=”right” valign=”top”><b><font color=”#FF0000″>*</font></b>End&nbsp;Time:</td>
<td align=”left” valign=”top”><select name=”end_time[1]” size=”1″>
<option value=””>&ndash;</option>
<option value=”0″<?=($_POST[‘end_time’][1] === ‘0’) ? ‘ checked’ : ” ?>>12</option>
<?
for($i=1; $i<12; $i++) {
echo ‘<option value=”‘ . $i . ‘”‘ . (($_POST[‘end_time’][1] == $i) ? ‘ selected’ : ”) . ‘>’ . $i . ‘</option>’ . chr(10);
}
?>
</select>&nbsp;<input type=”radio” name=”end_time_m[1]” value=”0″<?=($_POST[‘end_time_m’][1] === ‘0’) ? ‘ checked’ : ” ?>>am
<input type=”radio” name=”end_time_m[1]” value=”0″<?=($_POST[‘end_time_m’][1] == ’12’) ? ‘ checked’ : ” ?>>pm</td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>

[/code]

Also in #JavaScript _↴