/    Sign up×
Community /Pin to ProfileBookmark

document.write help

How can I make a table row appear after the page loads based on an event handler?

This is what I’ve got so far:

[code=php]
<table border=4 width=”500″ align=”center” cellspacing=”2″ cellpadding=”0″>
<tr>
<td width=”50%”>Did you like the photos of this home?</td>
<td width=”50%”><select name=”photos” onChange=”changeForm(this.value);”>
<option value=””>Select One</option>
<option value=”yes”>Yes</option>
<option value=”no”>No</option>
</select></td>
</tr>
<script>
var _w2 = ”;
_w2 = ‘<tr><td id=one name=one>’+_w2+'</td><td id=two name=two valign=”top”>’+_w2+'</td></tr>’;
document.write(_w2);
function changeForm(_v) {
if(_v==’no’){
one1 = ‘Would you like to visit more homes showcased by MyOpenHouse.com?’;
two2 ='<select name=”visit”><option value=””>Select One</option><option value=”yes”>Yes</option><option value=”no”>No</option></select>’;
}else if(_v==’yes’){
one1 = ‘Would you like to know more about this home?’;
two2 ='<select name=”know”><option value=””>Select One</option><option value=”yes”>Yes</option><option value=”no”>No</option></select>’;
}else if(_v==”){
one1 = ”;
two2 =”;
}
eval(‘document.all.one.innerHTML=one1;’);
eval(‘document.all.two.innerHTML=two2;’);
}
</script>
</table>
[/code]

This code works, but the problem I have with it is that it produces a table with a rather unsightly thick lower border until an option is chosen.
When I try to include the document.write inside the function, when an option is chosen, the page cuts to a blank page.
Any suggestions? Or should i try to use a different method?

to post a comment
JavaScript

4 Comments(s)

Copy linkTweet thisAlerts:
@Michael2003Jul 24.2004 — Firstly, I wouldn't use document.all unless really necessary. It is IE only so the script then won't work for everyone. Secondly, don't use eval when it isn't needed. The bits in the eval() could have just be done straight off without any extra stuff.

Right, now for the script itself. First thing is the process of how I would do it. I'd have the rows written out in the HTML without any JS needed to get it to show. Of couse they need to be hidden on loading, so we call a function with window.onload so that they are hidden but still work for non-JS viewers. That gives us the basic layout.

Next we need to hide and show the relevant row. For this I would advise putting an ID onto the <tr> itself, and not onto the <td>s. With this, we can then set the style.display of the relevant row to either none or blank with our function called by the <select>. That way it won't leave any extra gaps and should work in most browsers.

So the final script looks something like this:

&lt;table border=4 width="500" align="center" cellspacing="2" cellpadding="0"&gt;
&lt;tr&gt;
&lt;td width="50%"&gt;Did you like the photos of this home?&lt;/td&gt;
&lt;td width="50%"&gt;&lt;select name="photos" onChange="changeForm(this.value);"&gt;
&lt;option value=""&gt;Select One&lt;/option&gt;
&lt;option value="one"&gt;Yes&lt;/option&gt;
&lt;option value="two"&gt;No&lt;/option&gt;
&lt;/select&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;tr id="rone"&gt;
&lt;td width="50%"&gt;Would you like to visit more homes showcased by MyOpenHouse.com?&lt;/td&gt;&lt;td valign="top"

width="50%"&gt;&lt;select name="visit"&gt;&lt;option value=""&gt;Select One&lt;/option&gt;&lt;option value="yes"&gt;Yes&lt;/option&gt;&lt;option

value="no"&gt;No&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr id="rtwo"&gt;
&lt;td width="50%"&gt;Would you like to know more about this home?&lt;/td&gt;&lt;td valign="top" width="50%"&gt;&lt;select

name="know"&gt;&lt;option value=""&gt;Select One&lt;/option&gt;&lt;option value="yes"&gt;Yes&lt;/option&gt;&lt;option

value="no"&gt;No&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/table&gt;
&lt;script type="text/javascript"&gt;
function changeForm(row){
switch (row){
case 'one': document.getElementById('rtwo').style.display =

"none";document.getElementById('rone').style.display = ""; break;
case 'two': document.getElementById('rone').style.display =

"none";document.getElementById('rtwo').style.display = ""; break;
default: break;
}
}

function defaultRow(){
document.getElementById('rone').style.display = "none";
document.getElementById('rtwo').style.display = "none";
}

window.onload = defaultRow;

&lt;/script&gt;
×

Success!

Help @ccattell spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...