homepage Welcome to WebmasterWorld Guest from 54.167.75.155
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

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




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

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




msg:4440463
 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




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

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




msg:4440468
 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




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

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

birdbrain




msg:4440527
 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




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


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




msg:4440692
 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




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

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




msg:4440696
 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




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

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




msg:4440778
 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




msg:4440783
 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




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

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

birdbrain




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

No problem, you're very welcome. ;)

birdbrain

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved