Adding another select option in form

JavaScript
1

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;
2

At first glance, you would do a lot better by single single quotes for the javascript strings. Then you won’t need to escape the double quotes within the string.

Secondly, you can achieve better results by leaving the optional selects in the HTML content itself, as “Option 1 choices” and “Option 2 choices”.
That way they are still available for users with no scripting, and you can hide them (on remove them) on a scripted page load and then carry on with what you’re currently doing with them.

As long as the select element has a name attribute, and the select element is contained within the form tag, it will be properly submitted. You can test this by using “get” for the form method instead and see that they appear on submission in the location bar.

3

I already modified a lot of things and still have a question.
Instead of changing the paragraph immediately, I changed the script so I have an add function and a delete function.
I first let the script check if it’s already been added or not, by adding an ID=“alreadyadded” to the new paragraph.

And in the script I put this:

changedParagraph = document.getElementById("alreadyadded");

if (choiceType=="one") {
  if (changedParagraph) {
    delPar();   
 }
   addPar();
}

But I don’t know if it’s necessary to check every time or not… Or just change it immediately.

4

Other techniques are to check if the paragraph exists, and if it doesn’t then to add it.

After that you can empty the paragraph by setting its innerHTML to an empty string.