I can populating a text field from drop down. Help make it populating two text fields

JavaScript
1

Here are a simple script, for populating a text field from drop down,
for example how it works : user clicking on option 1, then the textfield showValue1 will filled/fired with 1a

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<title>Untitled</title>
</head>
<body>
<form name=“theform” onsubmit=“CheckForm()”>
<select name=“myOptions” onchange=“document.theform.showValue1.value=this.value”>
<option value=“”>Please select an option</option>
<option value=“1a”>1</option>
<option value=“2a”>2</option>
<option value=“3a”>3</option>
<option value=“4a”>4</option>
</select>
<input type=“text” name=“showValue1”><br>
</form>
</body>
</html>

now i need two to insert two value, in two text field together, when user choosing an option
for example : user clicking on option 1, then the textfield showValue1 will filled/fired with 1a,
and the the second textfield, lets say showValue2 will filled/fired with lets say 1b

i already tried added below in red, but its still not working

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<title>Untitled</title>
</head>
<body>
<form name=“theform” onsubmit=“CheckForm()”>
<select name=“myOptions” onchange=“document.theform.showValue1.value=this.value & document.theform.showValue2.value2=this.value2”>
<option value=“”>Please select an option</option>
<option value=“1a” & value2=“1b”>1</option>
<option value=“2a” & value2=“2b”>2</option>
<option value=“3a” & value2=“3b”>3</option>
<option value=“4a” & value2=“4b”>4</option>
</select>
<input type=“text” name=“showValue”><input type=“text” name=“showValue2”><br>
</form>
</body>
</html>

please share your knowledge, how is the right code?

2

HTML values have one value per value attribute. You can’t (that I know of) do it this way in HTML.

Because I think your Javascript needs to come from a wholly different approach, I tagged this thread to be moved over to Javascript because I think that’s where you’ll get the best answer.

The amount of logic you want means you shouldn’t be trying to stuff it inline with the HTML (it’s frowned upon anyway but people still do it for little JS things… what you want, though, is more complicated).
I’ll also suggest using a full/strict doctype for further demos.

3

The most reliable way to do this is by placing your scripting code at the end of the body, just before the <body> tag.

By the way, HTML 4.01 Transitional is from 1999 when developers were using HTML 3 and learning how to do things as HTML 4.
Because HTML 3 techniques that don’t work in HTML 4 aren’t being used by you, it’s best for you to use Html 4.01 Strict instead.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
</head>
<body>
...
<script type="text/javascript" src="script.js"></script>
</body>
</html>

You can then attach events on to the form by using a unique identifier on the form tag, from which you can easily access the named fields within it.


<form id="theform">
<select name="myOptions">
<option value="">Please select an option</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<input type="text" name="showValue1"><input type="text" name="showValue2"><br>
</form>

The CheckForm function doesn’t exist, so the call to it either needs to be removed, or the function needs to be added. Not with an uppercase first letter though, for that type of capitalization is commonly reserved for constructor functions.

And for 1a to be put somewhere and 1b to be put elsewhere, we can have the value of 1 and use scripting to add a or b to each one.


function checkForm() {

}

var form = document.getElementById('theform');
form.onsubmit = checkForm;

form.elements.myOptions.onchange = function () {
    var input1 = this.form.elements.showValue1;
    var input2 = this.form.elements.showValue2;

    input1.value = this.value + 'a';
    input2.value = this.value + 'b';
};

If you need completely unrelated values to be put in to the two different places, we can look at other solutions after more information from yourself can be provided.