/    Sign up×
Community /Pin to ProfileBookmark

javascript document.write problem

So I have an option box that depending on the option selected I would like different check boxes to appear underneath the option box. Here is what I have so far however it deletes the rest of the page.. do I have to document.write the whole page again… or is there an easier way?

<html>
<body>
<b>OPTIONS!!!</b>
<br>
<select name=”cmbmea” id=”opt” onchange=”toggle()”>
<option value=”0″></option>
<option value=”1″>option 1</option>
<option value=”2″>option 2</option>
</select>
<br>
<script language = javascript>
function toggle() {
var unit = document.getElementById(“opt”).value;
if (unit ==”1″){
document.write(“<td width=’240′ valign=’top’> <b>What Elements?</b><p><input type=’checkbox’ name=’ELA’ value=’EA’>A</p><p><input type=’checkbox’ name=’ELB’ value=’EB’>B</p><p> <input type=’checkbox’ name=’ELC’ value=’EC’>C</p><p> <input type=’checkbox’ name=’ELD’ value=’ED’>D</p></td>”);
}
if (unit ==”2″){
document.write(“<td width=’240′ valign=’top’> <b>What Elements?</b><p><input type=’checkbox’ name=’ELA’ value=’EA’>A</p><p><input type=’checkbox’ name=’ELB’ value=’EB’>B</p><p> <input type=’checkbox’ name=’ELC’ value=’EC’>C</p></td>”);
}
}
</script>
</body>
</html>

to post a comment
JavaScript

5 Comments(s)

Copy linkTweet thisAlerts:
@Declan1991Jun 20.2011 — document.write always does that. Use .innerHTML or the DOM methods .appendChild, .createElement etc.
Copy linkTweet thisAlerts:
@omnicityJun 21.2011 — Alternatively, write out all of the form fields you _might_ need, hide them initially and make them visible again when needed.
Copy linkTweet thisAlerts:
@savvykmsJun 22.2011 — Using document.write() within the head section or within any function definition or setInterval/setTimeout will likely result in a cleared page. .innerHTML, .innerText, .outerHTML, .outerText, .appendChild(), .createChild() provide better solutions, as do, as omnicity stated, simply hiding elements until required.
Copy linkTweet thisAlerts:
@dirty_dillonauthorJun 22.2011 — Thanks that worked well.
Copy linkTweet thisAlerts:
@Declan1991Jun 22.2011 — .innerText, .outerHTML, .outerText.[/QUOTE]
However, I don't recommend using them as they are not DOM standard methods, nor de facto standards like .innerHTML.
×

Success!

Help @dirty_dillon 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 5.11,
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: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

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

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...