I’m making a form with some select options, and when clicking an option from the drop down, another option will appear.
The thing is that it seems to work in the most common browsers, but for myself, as a beginner in Javascript, I don’t know if it’s written the correct way. What could be done better?
Aswel, before I write further to this part of code, I want to know that the value of the second option will pass correctly via the PHP process script afterwards… because initially, the second option is not mentioned in the .html file, it comes in virtually by the javascript.
Html:
<form action="link-to-php-process-script" method="post">
<p>
<label for="blabla">Choose: </label>
<select name="blabla" id="choice">
<option value="one">option one</option>
<option value="two">option two</option>
</select>
</p>
<p id="lastid">
<label for="naam">second option should become before this field: </label>
<input name="other" id="other" type="text" />
</p>
<p><label for="send">the button.</label>
<input type="submit" id="send" name="send" value="send" />
</p>
</form>
Javascript:
function changeSecondField(){
/* place the second choice */
var paragraph = document.createElement("p");
var lastid = document.getElementById("lastid");
paragraph.innerHTML = "<label for=\\"secondoption\\">second option: </label><select name=\\"secondoption\\" id=\\"secondoption\\">"
+"<option value=\\"three\\">option three</option>"
+"<option value=\\"four\\">option four</option>"
+"</select>";
lastid.parentNode.insertBefore(paragraph,lastid);
/* when the first choice is changed */
var chooseOption = document.getElementById("choice");
chooseOption.onchange = function() {
var choiceType = this.options[this.selectedIndex].value;
if (choiceType=="one") {
paragraph.innerHTML = "<label for=\\"secondoption\\">second option: </label><select name=\\"secondoption\\" id=\\"secondoption\\">"
+"<option value=\\"three\\">option three</option>"
+"<option value=\\"four\\">option four</option>"
+"</select>";
}
if (choiceType=="two") {
paragraph.innerHTML = "<label for=\\"secondoption\\">second option: </label><select name=\\"secondoption\\" id=\\"secondoption\\">"
+"<option value=\\"three\\">option five</option>"
+"<option value=\\"four\\">option six</option>"
+"</select>";
}
}
}
window.onload = changeSecondField;