Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Change an entire form field based on the dropown above

Status
Not open for further replies.
gameon

gameon

Programmer
Feb 23, 2001
325
GB
Hi, can I use JS to control the contents of a span.

EG: Can I have a dropdown with option 1 and option 2.

When option 1 is selected there is another dropdown underneith.

When option 2 is selected there is a normal form field.

I think I've seen this before - but am not having much luck so far...

M@?)
 
Sort by date Sort by votes
Are you thinking of showing and hiding the desired form elements, or constructing them on the fly?
 
Upvote 0 Downvote
you should be able to do it with something like this:


Code: 
<html>
<head>
<title></title>

<script language=&quot;JavaScript&quot;>
function showcontent()	
  { 
  var name = window.form1.content.options[window.form1.content.selectedIndex].value;

  var display1 = &quot;Content 1, text, html whatever you want&quot;;
  var display2 = &quot;Content 2, text, html whatever you want&quot;;

  document.getElementById(&quot;layer1&quot;).innerHTML = eval(name);
  }
</script>
</head>

<body>
<form name=&quot;form1&quot;>
<select name=&quot;content&quot; onChange=&quot;showcontent()&quot;>
<option value=&quot;&quot;></option>
<option value=&quot;display1&quot;>display1</option>
<option value=&quot;display2&quot;>display2</option>
</select>
</form>
<div id=&quot;layer1&quot;></div>
</body>
</html>

I learned a bit yesterday, today i learned a lot, imagine what i'll learn tomorrow!
 
Upvote 0 Downvote
make that first var
Code: 
 var name = document.getElementById(&quot;content&quot;).options[document.getElementById(&quot;content&quot;).selectedIndex].value;
,i dont think this works in netscape tho....

I learned a bit yesterday, today i learned a lot, imagine what i'll learn tomorrow!
 
Upvote 0 Downvote
Oh, sorry bout that, iv found a bug,

proper version below, (works in netscape 6 now )

<html>
<head>
<title></title>

<script language=&quot;JavaScript&quot;>
function showcontent()
{
var name = document.getElementById(&quot;content&quot;).options[document.getElementById(&quot;content&quot;).selectedIndex].value;

var display1 = &quot;Content 1, text, html whatever you want&quot;;
var display2 = &quot;Content 2, text, html whatever you want&quot;;

document.getElementById(&quot;layer1&quot;).innerHTML = eval(name);
}
</script>
</head>

<body>
<form name=&quot;form1&quot;>
<select name=&quot;content&quot; id=&quot;content&quot; onChange=&quot;showcontent()&quot;>
<option value=&quot;&quot;></option>
<option value=&quot;display1&quot;>display1</option>
<option value=&quot;display2&quot;>display2</option>
</select>
</form>
<div id=&quot;layer1&quot;></div>
</body>
</html>


I learned a bit yesterday, today i learned a lot, imagine what i'll learn tomorrow!
 
Upvote 0 Downvote
Hi K9logic,
for a dog you seam to know alot about javascript. Thanks so much... Will go though this now for enlightenment.

Cheers mate,

M@)
 
Upvote 0 Downvote
woof!

I learned a bit yesterday, today i learned a lot, imagine what i'll learn tomorrow!
 
Upvote 0 Downvote
Hey, dogboy - what if it was radio buttons - doesn't seam to let me just fidle the names...

m@?
 
Upvote 0 Downvote
I was thinking something like:


<html>
<head>
<title></title>

<script language=&quot;JavaScript&quot;>
function showcontent()
{
var name = document.getElementById(&quot;content&quot;).value;
// var name = document.getElementById(&quot;content&quot;).options[document.getElementById(&quot;content&quot;).selectedIndex].value;

var display1 = &quot;Content 1, text, html whatever you want&quot;;
var display2 = &quot;Content 2, text, html whatever you want&quot;;

document.getElementById(&quot;layer1&quot;).innerHTML = eval(name);
}
</script>
</head>

<body>
<form name=&quot;form1&quot;>

<INPUT NAME=&quot;content&quot; TYPE=&quot;radio&quot; VALUE=&quot;display1&quot; STYLE=&quot;border-top:0px;border-left:0px;border-right:0px;border-bottom:0px;&quot; onClick=&quot;showcontent()&quot;>
<INPUT NAME=&quot;content&quot; TYPE=&quot;radio&quot; VALUE=&quot;display2&quot; STYLE=&quot;border-top:0px;border-left:0px;border-right:0px;border-bottom:0px;&quot; onClick=&quot;showcontent()&quot;>

</form>
<div id=&quot;layer1&quot;></div>
</body>
</html>

It half works - but stops after one change...

M@)
 
Upvote 0 Downvote
this is possible but you need to get the radio button value in a different way. try and work this function into the above :)


<script type=&quot;text/javascript&quot;>
<!--
function getRadialValue(strFieldName){
var objFormField = document.forms[0].elements[strFieldName]
intControlLength = objFormField.length
for (i=0;i<intControlLength;i++){
if(objFormField.checked){
strValue = objFormField.value;
return strValue;
}
}
}
// -->
</script>



I learned a bit yesterday, today i learned a lot, imagine what i'll learn tomorrow!
 
Upvote 0 Downvote
Hi Mate. Rather than use innerHTML I would like to use the 'display' tag.

Can I do stuff like:

<tr id=&quot;anID&quot;>
content
</tr>

the use a function like:

<script language=&quot;JavaScript&quot;>
function showDisplay()
{
document.getElementById(&quot;CreditCardTable1&quot;).display = block;
}
</script>

to control it?

M@?
 
Upvote 0 Downvote
Sorry, not

document.getElementById(&quot;CreditCardTable1&quot;).display = block;

I meant:
document.getElementById(&quot;anID&quot;).display = block;
 
Upvote 0 Downvote
trying to use visile and hidden to achieve the same... not got it working yet...
 
Upvote 0 Downvote
hi you two

i have just a so9lution for the radio buttons on the other entry a very simply short scritp give you the abilty to hid and display what ever is betwwen the <span></span> tags using an simply onclick action to make then hidden or visable.

nip and have a look.


dean
 
Upvote 0 Downvote
my effort so far:



<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;>

<html>
<head>
<title>Untitled</title>
</head>

<body>
<script language=&quot;JavaScript&quot;>
function Moo(){
document.getElementById(&quot;ChequeTable&quot;).style=&quot;display:none&quot;;
}
</script>

<TABLE ALIGN=&quot;center&quot; CELLPADDING=&quot;0&quot; CELLSPACING=&quot;0&quot; BORDER=&quot;0&quot; WIDTH=&quot;340&quot; id=&quot;ChequeTable&quot;>
<TR VALIGN=&quot;top&quot; style=&quot;display:block&quot;>
<TD><a href=&quot;javascript:void(0)&quot; ONCLICK=&quot;javascript:Moo()&quot;> Cheque details</a></TD>
</TR>
</TABLE>


</body>
</html>
 
Upvote 0 Downvote
got it...

<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;>

<html>
<head>
<title>Untitled</title>
</head>

<body>
<script language=&quot;JavaScript&quot;>
function Moo(){
document.getElementById('ChequeTable').style.display = 'none';
}
</script>
<p id=&quot;ChequeTable&quot;>
<TABLE ALIGN=&quot;center&quot; CELLPADDING=&quot;0&quot; CELLSPACING=&quot;0&quot; BORDER=&quot;0&quot; WIDTH=&quot;340&quot;>
<TR VALIGN=&quot;top&quot;>
<TD><a href=&quot;javascript:void(0)&quot; ONCLICK=&quot;javascript:Moo()&quot;> Cheque details</a></TD>
</TR>
</TABLE>
</p>

</body>
</html>
 
Upvote 0 Downvote
cool :) this is proberbly better in your situation, the innerHTML was better in my situation :) both work.

I learned a bit yesterday, today i learned a lot, imagine what i'll learn tomorrow!
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
373
Kennelbloke
Kennelbloke
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
344
xwb
xwb
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
314
malpa
malpa
rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
274
rogerte
rogerte
Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
267
Rayj0000
Rayj0000

Part and Inventory Search

Sponsor

Back
Top