Member Avatar for basketmen

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 [COLOR="#FF0000"]&amp; document.theform.showValue2.value2=this.value2[/COLOR]">
<option value="">Please select an option</option>
<option value="1a"[COLOR="#FF0000"] &amp; value2="1b"[/COLOR]>1</option>
<option value="2a"[COLOR="#FF0000"] &amp; value2="2b"[/COLOR]>2</option>
<option value="3a"[COLOR="#FF0000"] &amp; value2="3b"[/COLOR]>3</option>
<option value="4a"[COLOR="#FF0000"] &amp; value2="4b"[/COLOR]>4</option>
</select>
<input type="text" name="showValue">[COLOR="#FF0000"]<input type="text" name="showValue2">[/COLOR]<br>
</form>
</body>
</html>

please share your knowledge, how is the right code?

Edited by Dani because: Fixed formatting
  • 2 Contributors
  • 1 Reply
  • 122 Views
  • 38 Minutes Discussion Span
  • Latest Post Latest Post by |-|x

Dani AI

Generated

Using data attributes on the <option> elements and a small change handler is the simplest, most robust fix. The attempts in the thread failed because custom attributes like value2 are not standard and the inline use of & to try to run two assignments is not a valid way to separate JavaScript statements. 's one-field example is fine; 's idea of packing two values into one value and splitting also works but can be brittle if your values contain the delimiter.

Example (HTML + unobtrusive JS):

<select id="myOptions">
  <option data-a="" data-b="">Please select</option>
  <option data-a="1a" data-b="1b">1</option>
  <option data-a="2a" data-b="2b">2</option>
  <option data-a="3a" data-b="3b">3</option>
  <option data-a="4a" data-b="4b">4</option>
</select>

<input id="showValue1" type="text">
<input id="showValue2" type="text">

<script>
(function(){
  var sel = document.getElementById('myOptions');
  var out1 = document.getElementById('showValue1');
  var out2 = document.getElementById('showValue2');

  function update() {
    var opt = sel.options[sel.selectedIndex] || {};
    var a = opt.dataset ? opt.dataset.a : opt.getAttribute('data-a') || '';
    var b = opt.dataset ? opt.dataset.b : opt.getAttribute('data-b') || '';
    out1.value = a;
    out2.value = b;
  }

  sel.addEventListener('change', update);
  update(); // populate if an option is preselected
})();
</script>

Notes and troubleshooting:

  • Use data-* attributes (HTML5) rather than inventing value2. They are standard and accessible via dataset or getAttribute.
  • Separate JS statements with semicolons; do not try to chain assignments with &.
  • If you must support very old browsers, use attachEvent or the getAttribute fallback shown above.
  • Keep IDs unique and call the update function on load if the select may already have a selection.
Member Avatar for |-|x

try this...

onchange="document.theform.showValue1.value=this.value.split(' ')[0]; document.theform.showValue2.value=this.value.split(' ')[2]">

note that if your final values in the dropdown have spaces in them you will need to adjust the split function calls accordingly.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.