/    Sign up×
Community /Pin to ProfileBookmark

appendchild() for adding an option not working

Trying to get a value from a text box into a select-option when a checkbox is checked.
In IE, new empty options under the “one” option appear.
In Firefox and Chrome, nothing happens.
When uncommented, the alert() says “two,two” or similar for what’s put in the textbox.

Please tell me why is it not working.

[CODE]<html>
<head>
<title>
</title>
<script type=”text/javascript”>
function g(_p1)
{
if (_p1==’c1′ && document.f.ic.checked && document.f.it.value!=”)
{
var opt =document.createElement(“option”);
opt.text =document.f.it.value;
opt.value=opt.text; /*innerHTML*/
var sel =document.getElementById(“so”);
/*alert(opt.text+’,’+opt.value);*/
sel.appendChild(opt);
}
}
</script>
</head>
<body>
<form name=”f”>
<input name=”it” id=”it” type=”text” value=”two” size=”3″ maxlength=”3″>
<input name=”ic” id=”ic” type=”checkbox” value=”c1″ onclick=”g(‘c1’);”>
<select name=”so”>
<option value=”one”>
one
</option>
</select>
<input name=”s” id=”s” type=”submit” value=”*” onclick=”g(‘s’);”>
</form>
</body>
</html>
[/CODE]

to post a comment
JavaScript

5 Comments(s)

Copy linkTweet thisAlerts:
@SnowmangDec 10.2015 — Your sel variable is getting an element with an id of "so" but your select tag has the name set as "so" but not an ID. I dunno if that's the issue since name and ID occupy the same name space but there are separate query selectors for name attributes.

If that isn't it try creating new text nodes instead of opt.text and opt.value then append them to opt then append opt to sel.

If finally that doesn't do it are you using AJAX to refresh the whole page? Could possibly be that when you hit a type="submit" element, the entire page refreshes thus all changes are overwritten. Can change type to button instead unless you specifically need the submit.
Copy linkTweet thisAlerts:
@SempervivumDec 10.2015 — You use getElementById() for getting your select box:
[CODE]var sel =document.getElementById("so");[/CODE]
but this element doesn't have this ID. Instead the name is "so".
Copy linkTweet thisAlerts:
@neginfauthorDec 10.2015 — Thank you very much.

Works on Firefox and Chrome with appendchild().

Works on IE,Firefox, and Chrome with add() instead of appendchild().
Copy linkTweet thisAlerts:
@SempervivumDec 10.2015 — I recommend using jQuery to avoid browser specific issues.
Copy linkTweet thisAlerts:
@rootDec 11.2015 — You should be adding options to a select element using the options method.

var countries = ['Australia', 'Great Britain', 'Germany', 'United States'];

<i> </i> function FillCountryList () {
<i> </i> var countryList = document.getElementById ("country");

<i> </i> for (var i=0; i &lt; countries.length; i++) {
<i> </i> // Option (text, value)
<i> </i> var countryOption = new Option (countries[i], countries[i]);
<i> </i> countryList.options.add (countryOption);
<i> </i> }
<i> </i> }


for example.
×

Success!

Help @neginf 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.28,
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,
)...