andreni78
asked on
Select List Dependency - Adds multiple input fields if certain selection is selected
Hi - Does anyone know how to make multiple input boxes appear only if a certain selection is selected from a drop down list?
Say I have this on select list:
A
B
C
Other
If the user specifies "Other"
Then a multiple input boxes will appear below the select list...
such as for example
Name of Company:
Company Website:
Company Phone Number:
Company Address:
if you can, please don't just simply hide the multiple input boxes.. but make it push the content below the select list down and then make the multiple input boxes appear... kind of like this: http://www.vangusa.com/info.php?page=facts
the content is pushed down if the button is clicked..
if this can be done so it's cross-browser compatible(not a priority).. that would be great! also not a priority if validation can be engaged only if "other" is selected for the aforementioned input fields..
thanks!
Say I have this on select list:
A
B
C
Other
If the user specifies "Other"
Then a multiple input boxes will appear below the select list...
such as for example
Name of Company:
Company Website:
Company Phone Number:
Company Address:
if you can, please don't just simply hide the multiple input boxes.. but make it push the content below the select list down and then make the multiple input boxes appear... kind of like this: http://www.vangusa.com/info.php?page=facts
the content is pushed down if the button is clicked..
if this can be done so it's cross-browser compatible(not a priority).. that would be great! also not a priority if validation can be engaged only if "other" is selected for the aforementioned input fields..
thanks!
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
you're right the validation is indifferent.. what i meant was.. required validation.. so if "other" selected.. the required validation is engaged.. so it'll tell the user s/he must type something... or would that be way too complex?
ASKER
wow.. netscape 7.1 is absolutely horrid.. it doesn't even work on ns7.1
Here the Netscape version:
<style type="text/css">
<!--
.HideIt {
display:none;
}
-->
</style>
<style type="text/css">
<!--
.ShowIt {
display:inline;
}
-->
</style>
<script language="JavaScript">
<!--
function MakeChange(theSel){
theForm = theSel.form;
theBoxes = document.getElementById("B
if (theForm.select1.value=="o
theBoxes.className='ShowIt
}else{
theBoxes.className='HideIt
}
}
//-->
</script>
<body>
<form name="form1">
<select name="select1" onChange="MakeChange(this)
<option value="A">A</option>
<option value="B">B</option>
<option value="B">C</option>
<option value="other">other</optio
</select>
<div class="HideIt" id="Boxes">
<p> Name of Company:
<input name="" type="text">
</p>
<p> Company Website:
<input type="text" name="textfield">
</p>
<p> Company Phone Number:
<input type="text" name="textfield2">
</p>
<p> Company Address:
<input type="text" name="textfield3">
</p>
</div>
</form>
</body>
<style type="text/css">
<!--
.HideIt {
display:none;
}
-->
</style>
<style type="text/css">
<!--
.ShowIt {
display:inline;
}
-->
</style>
<script language="JavaScript">
<!--
function MakeChange(theSel){
theForm = theSel.form;
theBoxes = document.getElementById("B
if (theForm.select1.value=="o
theBoxes.className='ShowIt
}else{
theBoxes.className='HideIt
}
}
//-->
</script>
<body>
<form name="form1">
<select name="select1" onChange="MakeChange(this)
<option value="A">A</option>
<option value="B">B</option>
<option value="B">C</option>
<option value="other">other</optio
</select>
<div class="HideIt" id="Boxes">
<p> Name of Company:
<input name="" type="text">
</p>
<p> Company Website:
<input type="text" name="textfield">
</p>
<p> Company Phone Number:
<input type="text" name="textfield2">
</p>
<p> Company Address:
<input type="text" name="textfield3">
</p>
</div>
</form>
</body>
Zvonko,
My bad, should have used document.getElementById("B
andreni78,
I don't think I get your validation question right, but here are some pointers:
1. If you want to validate at form submission then you can check if "other" is selected (if(form1.select.value=="o
http://www.yourhtmlsource.com/javascript/formvalidation.html
2. If you want to validate during user input or right after user input, you could rely on the onChange,ONKEYPRESS and onBlur events. Exmpl: <input type="text" name="textfield2" onBlur="CheckText()">
For more on this type of validation check this link:
http://www.siteexperts.com/tips/html/ts18/page1.asp
3. Finally, you should consider some theory on validation. This is a nice link on validation theology:
http://www.xs4all.nl/~sbpoley/webmatters/formval.html
Esopo.
My bad, should have used document.getElementById("B
andreni78,
I don't think I get your validation question right, but here are some pointers:
1. If you want to validate at form submission then you can check if "other" is selected (if(form1.select.value=="o
http://www.yourhtmlsource.com/javascript/formvalidation.html
2. If you want to validate during user input or right after user input, you could rely on the onChange,ONKEYPRESS and onBlur events. Exmpl: <input type="text" name="textfield2" onBlur="CheckText()">
For more on this type of validation check this link:
http://www.siteexperts.com/tips/html/ts18/page1.asp
3. Finally, you should consider some theory on validation. This is a nice link on validation theology:
http://www.xs4all.nl/~sbpoley/webmatters/formval.html
Esopo.
ASKER
thanks Esopo for your help.. I wish I could give Zvonko a share because he deserves a portion of it.. can you make this an onClick event instead of onChange:
<script language="JavaScript">
<!--
function MakeChange(theSel){
theForm = theSel.form;
theBoxes = document.getElementById("B
if (theForm.select1.value=="o
theBoxes.className='ShowIt
}else{
theBoxes.className='HideIt
}
}
//-->
</script>
I want to have an onClick function for the same concept i'm doing but it's a button instead of a select list... thanks!
<script language="JavaScript">
<!--
function MakeChange(theSel){
theForm = theSel.form;
theBoxes = document.getElementById("B
if (theForm.select1.value=="o
theBoxes.className='ShowIt
}else{
theBoxes.className='HideIt
}
}
//-->
</script>
I want to have an onClick function for the same concept i'm doing but it's a button instead of a select list... thanks!
ASKER
actually i'll make another post with different requirements.. look out for it! thanks!
>>I wish I could give Zvonko a share because he deserves a portion of it...<<
Yes, he does. And yes, you can split points. Instead of accepting a single answer you can click "split points" and decide how many points you want to give to as many participants as you want.
Anyway, Zvonko will be helping you a lot here in javascript, I'm sure you will make it up to him in the near future :-)
Yes, he does. And yes, you can split points. Instead of accepting a single answer you can click "split points" and decide how many points you want to give to as many participants as you want.
Anyway, Zvonko will be helping you a lot here in javascript, I'm sure you will make it up to him in the near future :-)
Sure, as Esopo stated, those will be not the last points you offer here.
And beside that are the recognition words the same value as points ;-)
But bear me: I am on Holidays and staying at home. So I am only from time to time online.
And beside that are the recognition words the same value as points ;-)
But bear me: I am on Holidays and staying at home. So I am only from time to time online.
ASKER
and already use that script as the validator.. so if you can somehow engage certain validation only if "other" is clicked.. think that'll be easier than making a validation script from scratch... a lot easier on me too =)