<script>
function addString() {
var text = document.myform.selectOption.value;
var testNode = document.getElementById('test');
var newNode = document.createElement('b');
newNode.setAttribute("id",text);
newNode.innerHTML = text;
testNode.appendChild(newNode);
}
</script>
<form name="myform" method="post" action="action">
<select name="selectOption">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</select>
<input name="Add1" type="button" class="formtext" value="Add" onclick="addString();">
<p id="test"></p>
</form>
I’m using javascript to grab the value picked from a dropdown menu and populate it below, which it works fine with the code above.
The problem is that if I make the following change to the select name my javascript doesn’t work anymore:
<script>
...
var text = document.myform.selectOption[0].option.value;
...
</script>
<form>
<select name="selectOption[0].option">
...
</form>
I get an error saying that document.myform.selectOption.0 is null or not an object
How can I achieve the above using this sort of names, the name has to be this form, I cannot change it because they are an array of objects.
Thanks in advanced.