refresh variables after changing select option

[Irina Ivanova]

I have a select with many options and I have an input text field that should depend on select option. So when I choose some option the next input field in the form should be changed.

Here is the select code:

<select id = 'inputFieldsOptions' onChange = "">
	<option value = "<script>var option = 'dontCheck';</script>">- Don't Check -</option>
	<option value = "<script>var option = 'maxLength';</script>">Max Length</option>
	<option value = "<script>var option = 'minLength';</script>">Min Length</option>
	<option value = "<script>var option = 'onlyNumbers';</script>">Only Numbers</option>
	<option value = "<script>var option = 'date';</script>">Date</option>
	<option value = "<script>var option = 'time';</script>">Time</option>
	<option value = "<script>var option = 'datetime';</script>">Datetime</option>
	<option value = "<script>var option = 'email';</script>">E-mail</option>
	<option value = "<script>var option = 'regularExpression';</script>">Regular Expression</option>
</select>

and here is the text input code:

<script>
	if (option = 'dontCheck') {
		document.write("");
	} else if (option = 'maxLength') {
		document.write("<input type = 'text' name = 'value' value = 'Max Length' />");
	} else if (option = 'minLength') {
		document.write("<input type = 'text' name = 'value' value = 'Min Length' />");
	} else if (option = 'onlyNumbers') {
		document.write("<input type = 'text' name = 'value' value = 'Only Numbers' />");
	} else if (option = 'date') {
		document.write("<input type = 'text' name = 'value' value = 'Date' />");
	} else if (option = 'time') {
		document.write("<input type = 'text' name = 'value' value = 'Time' />");
	} else if (option = 'datetime') {
		document.write("<input type = 'text' name = 'value' value = 'Datetime' />");
	} else if (option = 'email') {
		document.write("<input type = 'text' name = 'value' value = 'E-mail' />");
	} else if (option = 'regularExpression') {
		document.write("<input type = 'text' name = 'value' value = 'Regular Expression' />");
	} else {
		document.write("ERROR: Option is not selected!");
	}
</script>

But in the select tag there is missing onChange value, because I don't know, how to do that
Almost all solutions that I could find are in PHP, but I do not have possability use PHP. Also solution with specifing the page URL is not suitable, becouse this is not just page, but browser extension.

Can somebody help with this JavaScript function?

[Bear Bibeault]

First of all, don't use document.write(). Not only is it a dinosaur, it will replace the current page with the HTML you specify. Clearly, not what you want.

But in the select tag there is missing onChange value, because I don't know, how to do that

The easiest way (but not the best -- but let's take it slow for now) is to create a JavaScript function, and to call it in the onchange attribute:

function doSomething(event,selectElement) {
  ...
}

and

onchange="doSomething(event,this)"

Almost all solutions that I could find are in PHP

PHP is useless as it's a server-side technology and you need client-side code. So JavaScript is the right way to go. Likely, those examples are old -- from before JavaScript became capable enough, and we had to make a server round trip to make any changes to the page. Luckily, those days are long gone.

You should give the input element an id value, and then you can change its value with:

document.getElementById('theIdValue').value = 'whatever';

That should get you started.

It sounds like you are very new to JavaScript. You should get a good tutorial or book (make sure it's modern) to make sure you understand the basics.

Once you understand the basics, then you can start using a library like jQuery that makes all of this much easier.

[Irina Ivanova]

Thank You very much! Your advices were very helpful, now it works.

The code is now looking like this:
The select element:

<select id = 'inputFieldsOptions' onChange = "refreshOptionInput(this.value);">
	<option value = "dontCheck">- Don't Check -</option>
	<option value = "maxLength">Max Length</option>
	<option value = "minLength">Min Length</option>
	<option value = "onlyNumbers">Only Numbers</option>
	<option value = "date">Date</option>
	<option value = "time">Time</option>
	<option value = "datetime">Datetime</option>
	<option value = "email">E-mail</option>
	<option value = "regularExpression">Regular Expression</option>
</select>

The JS function:

function refreshOptionInput(selectedElement) {
	if (selectedElement == 'dontCheck') {
		document.getElementById('optionInput').value = '';
	}
	if (selectedElement == 'maxLength') {
		document.getElementById('optionInput').value = 'maxLength';
	}
	if (selectedElement == 'minLength') {
		document.getElementById('optionInput').value = 'minLength';
	}
	if (selectedElement == 'onlyNumbers') {
		document.getElementById('optionInput').value = 'onlyNumbers';
	}
	if (selectedElement == 'date') {
		document.getElementById('optionInput').value = 'date';
	}
	if (selectedElement == 'time') {
		document.getElementById('optionInput').value = 'time';
	}
	if (selectedElement == 'datetime') {
		document.getElementById('optionInput').value = 'datetime';
	}
	if (selectedElement == 'email') {
		document.getElementById('optionInput').value = 'email';
	}
	if (selectedElement == 'regularExpression') {
		document.getElementById('optionInput').value = 'regularExpression';
	}
}

And the input field is just input field.