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
|
|
