1. Home
  2. Forums Index
  3. Browser Side / HTML 5:13 am May 1, 2026

Forum Moderators: open

Message Too Old, No Replies

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

         

basketmen

6:17 am on Apr 13, 2012 (gmt 0)

10+ Year Member



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 &amp; document.theform.showValue2.value2=this.value2">
<option value="">Please select an option</option>
<option value="1a"&amp; value2="1b">1</option>
<option value="2a"&amp; value2="2b">2</option>
<option value="3a"&amp; value2="3b">3</option>
<option value="4a"&amp; 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?

birdbrain

1:24 pm on Apr 13, 2012 (gmt 0)



Hi there basketmen,

try it like this... 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title></title>

<style type="text/css">
body {
    background-color:#f0f0f0;
 }
#theform {
    float:left;
    padding:20px;
    border:1px solid #999;
    background-color:#fff;
    box-shadow:#666 2px 2px 8px;
}
#theform div {
    margin:5px 0;
 }
</style>

<script type="text/javascript">

function init(){

   df=document.forms[0];

df[0].onchange=function(){
if(this.value!='') {

/* this will work regardless of the amount of space between values */

   df[1].value=this.value.split(/\s+/)[0];
   df[2].value=this.value.split(/\s+/)[1];

/*******************************************************************/
 }
 }

df.onsubmit=function(){
   return CheckForm();
   }
 }
function CheckForm(){

 }
   window.addEventListener?
   window.addEventListener('load',init,false):
   window.attachEvent('onload',init);
</script>

</head>
<body>


<form id="theform" action="#">
<div>
<select name="myOptions">
  <option value="">Please select an option</option>
  <option value="1a 1b">1</option>
  <option value="2a 2b">2</option>
  <option value="3a  3b">3</option>
  <option value="4a  4b">4</option>
</select>
</div><div>
  <input type="text" name="showValue">
</div><div>
  <input type="text" name="showValue2">
</div><div>
  <input type="submit"> 
  <input type="reset">
</div>
</form>

</body>
</html>


birdbrain

Leosghost

1:31 pm on Apr 13, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



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

It isn't in red..it is in light green..typo ? ..or, maybe you should get your colour vision tested..:)

birdbrain

1:47 pm on Apr 13, 2012 (gmt 0)



Hi there Leosghost,

our friend "basketmen" has posted this problem on various forums. ;)

I would assume he has "C&P'd" the complete post, and because of this forums' unique
posting methods his red colour has somehow morphed to green in the process. :)

birdbrain

Leosghost

3:06 pm on Apr 13, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Hi Birdbrain,
Ah :) I wondered why you hadn't mentioned it to him :)

birdbrain

3:33 pm on Apr 13, 2012 (gmt 0)



Hi there Leosghost,

Ah :)I wondered why you hadn't mentioned it to him :)!

As I had already seen and replied to his posts elsewhere, these
colour vagaries no longer appeared appeared to be relevant. ;)

birdbrain

basketmen

10:59 pm on Apr 13, 2012 (gmt 0)

10+ Year Member




Thank you birdbrain/coothead

but its looks like currently fired in to the first and the second text field in the page,

so if there is another text field in the page before showValue and showValue2 text field, it will not work, or the other text field that fired

can you make it fired only to showValue and showValue2 text field please?

birdbrain

11:36 pm on Apr 13, 2012 (gmt 0)



Hi there basketmen,

I am sorry, but I am experiencing a problem when trying to understand your requirements. :(

Would it be possible for you to rephrase your question, somewhat? ;)

birdbrain

basketmen

11:58 pm on Apr 13, 2012 (gmt 0)

10+ Year Member



ah i am sorry, i mean if there is another text field in the page, like i added in bold below, its become not working




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title></title>

<style type="text/css">
body {
background-color:#f0f0f0;
}
#theform {
float:left;
padding:20px;
border:1px solid #999;
background-color:#fff;
box-shadow:#666 2px 2px 8px;
}
#theform div {
margin:5px 0;
}
</style>

<script type="text/javascript">

function init(){

df=document.forms[0];

df[0].onchange=function(){
if(this.value!='') {

/* this will work regardless of the amount of space between values */

df[1].value=this.value.split(/\s+/)[0];
df[2].value=this.value.split(/\s+/)[1];

/*******************************************************************/
}
}

df.onsubmit=function(){
return CheckForm();
}
}
function CheckForm(){

}
window.addEventListener?
window.addEventListener('load',init,false):
window.attachEvent('onload',init);
</script>

</head>
<body>


<form id="theform" action="#">
<input type="text" name="showValue3">
<div>
<select name="myOptions">
<option value="">Please select an option</option>
<option value="1a 1b">1</option>
<option value="2a 2b">2</option>
<option value="3a 3b">3</option>
<option value="4a 4b">4</option>
</select>
</div><div>
<input type="text" name="showValue">
</div><div>
<input type="text" name="showValue2">
</div><div>
<input type="submit">
<input type="reset">
</div>
</form>

</body>
</html>





so it is better if the javascript is only fired/filled to showValue and showValue text field


thank you before, i really apreciated the help, gbu

birdbrain

12:17 am on Apr 14, 2012 (gmt 0)



Hi there basketmen,

that input was not there in your original post. :(

Why have you put it there?

Would it not be be better place it like this... 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title></title>

<style type="text/css">
body {
    background-color:#f0f0f0;
 }
#theform {
    float:left;
    padding:20px;
    border:1px solid #999;
    background-color:#fff;
    box-shadow:#666 2px 2px 8px;
}
#theform div {
    margin:5px 0;
 }
</style>

<script type="text/javascript">

function init(){

   df=document.forms[0];

df[0].onchange=function(){
if(this.value!='') {

/* this will work regardless of the amount of space between values */

   df[1].value=this.value.split(/\s+/)[0];
   df[2].value=this.value.split(/\s+/)[1];
   df[3].value=this.value.split(/\s+/)[2];

/*******************************************************************/
    }
  }

df.onsubmit=function(){
  return CheckForm();
   }
  }
function CheckForm(){

  }
   window.addEventListener?
   window.addEventListener('load',init,false):
   window.attachEvent('onload',init);
</script>

</head>
<body>


<form id="theform" action="#">
<div>
<select name="myOptions">
   <option value="">Please select an option</option>
   <option value="1a 1b 1c">1</option>
   <option value="2a 2b 2c">2</option>
   <option value="3a  3b 3c">3</option>
   <option value="4a  4b  4c">4</option>
</select>
</div><div>
   <input type="text" name="showValue">
</div><div>
   <input type="text" name="showValue2">
</div><div>
   <input type="text" name="showValue3">
</div><div>
   <input type="submit"> 
   <input type="reset">
</div>
</form>

</body>
</html>

birdbrain

basketmen

12:30 am on Apr 14, 2012 (gmt 0)

10+ Year Member



Dear birdbrain,

yes you are right, it will work if the other text field is below showValue and showValue2 text field,

but it is better if we can put the other text field above them too, so we can put your script inside any other script (that usually have other text field)

but if you cant its ok, many thanks for this :)

birdbrain

8:50 am on Apr 14, 2012 (gmt 0)



Hi there basketmen,

I didn't mean that form elements could not be placed above. ;)

If you require elements above then the javascript form elements
would just have to be renumbered accordingly. :)

To help you comprehension, I have numbered every element in this code... 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title></title>

<style type="text/css">
body {
 background-color:#f0f0f0;
 }
#theform {
 float:left;
 padding:20px;
 border:1px solid #999;
 background-color:#fff;
 box-shadow:#666 2px 2px 8px;
}
#theform div {
 margin:5px 0;
 }
</style>

<script type="text/javascript">

function init(){

df=document.forms[0];

df[2].onchange=function(){ /* form element number 2 */
if(this.value!='') {

/* this will work regardless of the amount of space between values */

df[3].value=this.value.split(/\s+/)[0]; /* form element number 3 */
df[4].value=this.value.split(/\s+/)[1]; /* form element number 4 */
df[5].value=this.value.split(/\s+/)[2]; /* form element number 5 */

/*******************************************************************/
 }
 }

df.onsubmit=function(){
 return CheckForm();
 }
 }
function CheckForm(){

 }
 window.addEventListener?
 window.addEventListener('load',init,false):
 window.attachEvent('onload',init);
</script>

</head>
<body>


<form id="theform" action="#">
<div>
 <input type="text" value="foo"> <!-- form element number 0 -->
</div><div>
 <input type="text" value="blah"> <!-- form element number 1 -->
</div><div>
<select name="myOptions"> <!-- form element number 2 -->
 <option value="">Please select an option</option>
 <option value="1a 1b 1c">1</option>
 <option value="2a 2b 2c">2</option>
 <option value="3a 3b 3c">3</option>
 <option value="4a 4b 4c">4</option>
</select>
</div><div>
 <input type="text" name="showValue"> <!-- form element number 3 -->
</div><div>
 <input type="text" name="showValue2"><!-- form element number 4 -->
</div><div>
 <input type="text" name="showValue3"><!-- form element number 5 -->
</div><div>
 <input type="submit"> <!-- form element number 6 --> 
 <input type="reset"> <!-- form element number 7 -->
</div>
</form>

</body>
</html>

birdbrain

birdbrain

9:09 am on Apr 14, 2012 (gmt 0)



Hi there basketmen,

of course, you may feel more comfortable using the "name" instead of the "number" convention... 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title></title>

<style type="text/css">
body {
    background-color:#f0f0f0;
  }
#theform {
    float:left;
    padding:20px;
    border:1px solid #999;
    background-color:#fff;
    box-shadow:#666 2px 2px 8px;
}
#theform div {
    margin:5px 0;
  }
</style>

<script type="text/javascript">

function init(){

document.theform.myOptions.onchange=function(){
if(this.value!='') {

/* this will work regardless of the amount of space between values */

   document.theform.showValue1.value=this.value.split(/\s+/)[0]; 
   document.theform.showValue2.value=this.value.split(/\s+/)[1];
   document.theform.showValue3.value=this.value.split(/\s+/)[2];

/*******************************************************************/
    }
  }
document.theform.onsubmit=function(){
   return CheckForm();
   }
  }
function CheckForm(){

  }
  window.addEventListener?
  window.addEventListener('load',init,false):
  window.attachEvent('onload',init);
</script>

</head>
<body>

<form id="theform" name="theform" action="#">
<div>
  <input type="text" name="foo" value="something else"> 
</div><div>
  <input type="text" name="blah" value="something else"> 
</div><div>
<select name="myOptions">
  <option value="">Please select an option</option>
  <option value="1a 1b 1c">1</option>
  <option value="2a 2b 2c">2</option>
  <option value="3a 3b 3c">3</option>
  <option value="4a 4b 4c">4</option>
</select>
</div><div>
  <input type="text" name="showValue1"> 
</div><div>
  <input type="text" name="showValue2">
</div><div>
  <input type="text" name="showValue3">
</div><div>
  <input type="submit"> 
  <input type="reset">
</div>
</form>

</body>
</html>

birdbrain

basketmen

7:53 pm on Apr 14, 2012 (gmt 0)

10+ Year Member



many thanks again for the help from me and other peoples that using your code, you are very good man, GBU a bunch!

birdbrain

8:06 pm on Apr 14, 2012 (gmt 0)



No problem, you're very welcome. ;)

birdbrain
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / HTML 5:13 am May 1, 2026