|
JavaScript - Hide/show Div By Dropdown Option Selected
ive been racking my brain looking for a code solution for this....im a html and css pro....and a javascript NOOB lol
heres what im tryna do....i have a form...that has a Code: <option> in it for 6 dropdown options.... in one of those possible options.. when SELECTED...i want the div layer that i currently have under it...to appear and i cant seem to figure it out....heres my code in its entirety i want budget div...to appear when the option website design is selected Code: <label for="subject">What are you interested in?<em>•</em></label>
<select type="text" value="Choose a Service" name="subject" id="subject" />
<option selected> -- Select A Design Service --</option>
<option id="website"> Website Design </option>
<option> Twitter </option>
<option> Ning or Tumblr </option>
<option> Flyers </option>
<option> Business Card or Brochure</option>
<option>Other</option>
</select><br />
<div id="budget" style="display:none;"><label> Do you know your budget for this Project? </label> <input style="width:auto" type="radio" name="message" value="Not Sure"> Not sure
<input style="width:auto;margin-left:10px;" type="radio" name="budget" value="$400-$800"> $400-$800
<input style="width:auto;margin-left:10px;" type="radio" name="budget" value="$800-$1200"> $800-$1200
<input style="width:auto;margin-left:10px;" type="radio" name="budget" value="over $1200"> over $1200
</div>
Similar TutorialsI have a dropdown box with 2 options: Free or Upgraded I need to do 2 separate things depending on which one is chosen. If Free, then set the value in fourth text field to 9999 else, set value in Fourth field to 5555. Code: <head>
<script type="text/javascript">
function calculate()
{
var myLevel = eval(document.earningsform.level.value)
var memberType = eval(document.earningsform.type.value)
if(memberType==free){
document.earningsform.fourth.value = 9999;
}
else{
document.earningsform.fourth.value = 5555;
}
</script>
</head>
<body>
<table>
<form action="calculator.php" method="POST" name="earningsform">
<tr>
<td align="center">My Level: </td><td><input type="text" name="level" value="50" size="10"></td><td></td>
</tr>
<tr>
<td align="center">Member Type: </td><td>
<select name="type">
<option value="upgraded" name="upgraded" selected="selected">Upgraded</option>
<option value="free" name="free">Free</option>
</select></td>
<td></td>
</tr>
<tr>
<td align="center">4th Level: </td><td><input type="text" name="fourth" size="10" value="5"></td><td>7.5</td>
</tr>
</form>
</table>
</body>
Hi, I'm new to JavaScript. I'm trying to create my form in such a way that if 'Premium' is selected, a the text box with label 'membership no' is displayed and if 'bronze' is select, the drop-down list 'sponsor' is displayed instead....here's what my form looks like... PHP Code: <form id="form1" name="form1" method="post" action=""> <p> <label for="select">Membership:</label> <br /> <select name="select" id="select"> <option value="Premium" selected="selected">premium</option> <option value="Bronze">bronze</option> </select> </p> <p>Membership No:<br /> <input type="text" name="textfield" id="textfield" /> </p> OR<br /> Sponsor: <br /> <select name="select2" id="select2"> <option value="329">329</option> <option value="234">234</option> </select> </form> appreciate the help I've inherited this piece and now I'm suppose to add to it. Its basic function currently is when the "Other" option is selected, a hidden text field shows. Now, I need to add when "Athletics" is selected, another hidden select group will show. I've set up the new Select group already, but not sure how to incorporate it into the already existing script. I've been researching for two days, and hopefully this form will be helpful. Code: <select id="Program" name="Program" size="1" onchange="
$other = document.getElementById('other_program').style;
$invoice = document.getElementById('invoice');
if (selectedIndex==6) {
$other.visibility='visible';
if ($invoice.value == 'General Fund') $invoice.value='';
} else {
$other.visibility='hidden';
if (selectedIndex==1) {
$invoice.value='Renegade Fund';
} else {
$invoice.value='Please Specify';
}
}
">
<option selected="selected" value="Not Selected"> - - Select One - - </option>
<option value="Athletics">Athletics</option>
<option value="Drum Line">Drum Line</option>
<option value="Renegade Fund">Renegade Fund</option>
<option value="General Scholarships">General Scholarships</option>
<option value="President's Circle">President's Circle</option>
<option value="Other">Other</option>
</select>
<span id="other_program"><input type="text" id="invoice" name="invoice" size="15" /></span>
<!-- the following is the new select group ive set up
<span id="alumni">
<select id="select-alumni" name="select-alumni" size="1">
<option selected="selected" value="Not Selected">Yes or No</option>
<option value="Yes-alumni">Yes</option>
<option value="Not-alumni">No</option>
</select>
</span>
-->
I am new to this kind of scripting, so I have not done it before, I have tried to find solutions on the net but none have worked. I have a 'contact us' form, which includes 2 radio buttons to select how they wish to recieve their reply... the first radio is 'email' the second radio is 'phone' When the 'phone' radio is selected, i want the div including a drop downbox to appear to ask what time to recieve a call, but when the 'email' radio is selected, this div does not appear. This is the script for this section. . .. ... <span>Best way to reply:</span> <input type="radio" name="reply" value="Email" id="reply_0" /> E-mail <BR /> <div style="margin-left:270px;"><input type="radio" name="reply" value="Phone" id="reply_1" onclick=""/>Phone</div> <br/> <div id="timehide"><span>Best time to get hold of you:</span> <select> <option value="Any">Any</option> <option value="06:00 - 10:00">06:00 - 10:00</option> <option value="10:00 - 12:00">10:00 - 12:00</option> <option value="12:00 - 14:00">12:00 - 14:00</option> <option value="14:00 - 16:00">14:00 - 16:00</option> <option value="16:00 - 18:00">16:00 - 18:00</option> <option value="18:00 - 20:00">18:00 - 20:00</option> </select></div> ... .. . if anyone could help me it would be greatly appreciated!!! Cheers, Ben! I am new to this kind of scripting, so I have not done it before, I have tried to find solutions on the net but none have worked. I have a 'contact us' form, which includes 2 radio buttons to select how they wish to recieve their reply... the first radio is 'email' the second radio is 'phone' When the 'phone' radio is selected, i want the div including a drop downbox to appear to ask what time to recieve a call, but when the 'email' radio is selected, this div does not appear. This is the script for this section. . .. ... <span>Best way to reply:</span> <input type="radio" name="reply" value="Email" id="reply_0" /> E-mail <BR /> <div style="margin-left:270px;"><input type="radio" name="reply" value="Phone" id="reply_1" onclick=""/>Phone</div> <br/> <div id="timehide"><span>Best time to get hold of you:</span> <select> <option value="Any">Any</option> <option value="06:00 - 10:00">06:00 - 10:00</option> <option value="10:00 - 12:00">10:00 - 12:00</option> <option value="12:00 - 14:00">12:00 - 14:00</option> <option value="14:00 - 16:00">14:00 - 16:00</option> <option value="16:00 - 18:00">16:00 - 18:00</option> <option value="18:00 - 20:00">18:00 - 20:00</option> </select></div> ... .. . if anyone could help me it would be greatly appreciated!!! Cheers, Ben! what can be the reasons for the same code which works perfectly in notepad to not show its result in a jsp application done using eclipse??anything to do with settings? I am not able to display the current date as default in dd/mm/yyyy format in drop down boxes..only dd and yyyy apears but month isnt apearing as default.. can u suggest alternative logic and its code to implement the same?? The Script works in Firefox, BUT not in Internet Explorer. What am I missing? I need Drop Down menu Boxes to appear when User clicks on a certian Menu option. The way it appears now on the website is all the boxes appear. They should stay "hidden" until a User clicks on the drop down menu selection. Thanks! <head> <script type="text/javascript" language="javascript"> function showInfo() { var typeOne = document.getElementById('bmp'); var typeTwo = document.getElementById('junction'); var typeThree = document.getElementById('mile'); if(document.basicform01.Location_Type.value == "BMP to EMP") { typeOne.style.display="inline"; typeTwo.style.display="none"; typeThree.style.display="none"; } else if(document.basicform01.Location_Type.value == "Junction to Junction") { typeOne.style.display="none"; typeTwo.style.display="inline"; typeThree.style.display="none"; } else if(document.basicform01.Location_Type.value == "Milepost") { typeOne.style.display="none"; typeTwo.style.display="none"; typeThree.style.display="inline"; } else { typeOne.style.display="none"; typeTwo.style.display="none"; typeThree.style.display="none"; } } </script> <style>*[style] {outline:none}</style> </head> <body> <fieldset> <dl> <dt><label for="Location_Type">Location Type *</label></dt> <dd><select class="inputselect" name="Location_Type" id="Location_Type" onchange="showInfo()"> <option value="" selected="selected">Select One...</option> <option value="BMP to EMP">BMP to EMP</option> <option value="Junction to Junction">Junction to Junction</option> <option value="Milepost">Milepost</option> </select></dd> <div id="bmp" style="display:none;"> <dt><label for="bmpDetails">BMP</label></dt> <dd><input class="inputtext" type="text" name="bmpDetails" id="bmpDetails" /></dd> <dt><label for="empDetails">EMP</label></dt> <dd><input class="inputtext" type="text" name="empDetails" id="empDetails" /></dd> </div> <div id="junction" style="display:none;"> <dt><label for="fromJunction">From Junction:</label></dt> <dd><input class="inputtext" type="text" name="fromJunction" id="fromJunction" /></dd> <dt><label for="toJunction">To Junction:</label></dt> <dd><input class="inputtext" type="text" name="toJunction" id="toJunction" /></dd> </div> <div id="mile" style="display:none;"> <dt><label for="milepostNum">Milepost</label></dt> <dd><input class="inputtext" type="text" name="milepostNum" id="milepostNum" /></dd> </div> <p> </dl> <p> </fieldset> </body> What I want to do, is that, when the user select one option out of many from the dropdown box some new fields appears. I was so close to make it , using this example: Code: <script type="text/javascript">
function showInfo()
{
var elem = document.getElementById('verify');
if(document.forms[0].menu.value == "verify"){
elem.style.display="inline";}
else{
elem.style.display="none";}
}
</script>
</head>
<body>
<form action="#" method="post">
<select name="menu" onchange="showInfo()">
<option value="none">Select an option</option>
<option value="email">Email</option>
<option value="verify">Verify</option>
</select>
<div id="verify" style="display:none;">
<input type="text" value="Username" >
<input type="password" value="password" >
</div>
</form>
But what I do want, is that two differen things appear on the page and in the different location of the page. And this script does not read the second <div>. So the result is, that the only first <div> appears. Here are some images of what I want to do. Befo http://img82.imageshack.us/img82/7093/beforens9.jpg After http://img246.imageshack.us/img246/2759/afterzh2.jpg (what has to be changed is on the red circules). So can someone help me with this script?? Please! I am pritty noob to the javascript. like for example i have text areas named upload1 and upload2 when I click or add input on upload1 a drop down list below upload2 will not change, but when I add input on upload2 the dropdown will select "parts" I have a select box with a few options. When the page loads I need to get the selected option in this select box and alert its inner text. Yet everything I try out on the net that should work wont work in IE, all other browser its fine. Please can someone show me the TRUE and correct way to get the inner text of a option from a select box in IE? Thanks! I couldn't think of a way to explain my idea thoroughly, but I'm learning javascript and I have an html <select> form selected by using getElementById. Now, how do I access the data within the option tags to write to a variable? I know there are many simple ways of making it so that the value of the options are the html color name rather than hex code, but I'm doing this to learn javascript. I have experience with ruby (ok, not THAT much, but I understand the concepts). Anyway's the code explains my problem much better, so here it is: Code: <body>
<form action= "">
<fieldset>
<select id="selColor">
<option value="FFFFFF">White</option>
<option value="#A9A9A9">Gray</option>
<option value="#000000">Black</option>
<option value="#FF0000">Red</option>
<option value="#FFA500">Orange</option>
<option value="FFFF00">Yellow</option>
<option value="#9ACD32">Green</option>
<option value="#0000FF">Blue</option>
<option value="#4B0082">Indigo</option>
<option value="#9400D3">Violet</option>
</select>
<input type="button"
value="Change Color"
onclick="changeColor()" />
</fieldset>
</form>
<script type="text/javascript">
//<![CDATA[
function changeColor() {
var selColor = document.getElementById("selColor")
var color = selColor.value
var colorid =
if (confirm("would you like to change color to "+colorid+"?")) {
document.body.style.backgroundColor = color
}
}
//]]>
</script>
</body>
I haven't initialized var colorid, but I'm trying to set it to either of the highlighted parts of the following piece of my code. <option id=" white " value="FFFFFF"> White </option> I want to access that part of the option tags of the element that the user selects. So, without changing the hex values to the color equivalent, how do I access the name of the selected option tag? ( I could make an if/switch statement to translate the hex color into a name and put it into the variable, but I would like to know how to do what I'm asking in case I run into a similair problem.) Hello everybody, I have a javascript adding new options to a drop down select menu getting the information from the database. The code is as written below: Code: function setOptions1() {
var selbox2 = document.egitimgiris.alttipID;
selbox2.options.length = 0;
selbox2.options[selbox2.options.length] = new Option('Option1','22')
selbox2.options[selbox2.options.length] = new Option('Option2','23')
selbox2.options[selbox2.options.length] = new Option('Option3','24')
selbox2.options[selbox2.options.length] = new Option('Option4','25')
}
I want one of them to be added as selected. I will put an "if" check and if it the value of the option and the value in the database is equal I want that option to be added as "selected". Is this possible? If yes, how? Please help. Thanks and regards telmessos I have a simple form with an options drop down box: Code: <form method="POST" name="form"> <select autocomplete="off" id="input" name="input" onchange="this.form.submit();goHere();"> <option>Choose...</option> <option>Question1</option> <option>Question2</option> <option>Question3</option> </select> I wish to identify the option chosen in the function but not by its value, by its position: Code: <script>
function goHere(){
var s = document.getElementById("input");
if (s.selectedIndex == -1) return;
var u = s.form.elements[i];
alert(u);
</script>
I was hoping that variable "u" would be either 0, 1, 2, or 3. How can I get a variable to alert me the position of the selected option in the form? I think it is elements[i]. I have an options list that is generated from a database. It currently has ~125 options in it. I've received the request that the user be able to either enter the corresponding number or select the option from the list. How can I update the "selected" attribute in the options list based on a number that may be entered in another text entry box? I'm taking a beginning javascript class and have been trying to figure out one last part of a homework assignment and am just not seeing how to work it out. Any help is greatly appreciated! What I'm having trouble with is doing the text verification. When a user selects an option from the select list they then need to type in the text area given. If the user doesn't type the word selected in the list then an error message should appear under the text area. If you look at my code you'll see that I have the text_check() function doing the verification. I can get it to work when there is only one option but once I add the other two it stops working. I've tried if... else and other variations, but can't seem to nail it down. Thanks! Code: function select_function()
{
var medical=document.getElementById("medical_list")
var selected_item=medical.selectedIndex
if (selected_item==0)
{
document.getElementById("enter_info").innerHTML="Enter Your" +"<span style='color:blue'>" +" Medication" + "</span>"+ " Information"
var comments=document.getElementById("comments");
comments.focus();
}
if (selected_item==1)
{
document.getElementById("enter_info").innerHTML="Enter Your" +"<span style='color:blue'>" +" Hospitalization" + "</span>"+ " Information"
var comments=document.getElementById("comments");
comments.focus();
}
if (selected_item==2)
{
document.getElementById("enter_info").innerHTML="Enter Your" +"<span style='color:blue'>" +" Physician" + "</span>"+ " Information"
var comments=document.getElementById("comments");
comments.focus();
}
}
function text_check()
{
var user_comments=document.getElementById("comments").value.toLowerCase();
var med_comment=user_comments.indexOf('medication');
var hosp_comment=user_comments.indexOf('hospitalization');
var phys_comment=user_comments.indexOf('physician');
mySelectList = document.getElementById("medical_list");
if (mySelectList.value='Medication' && med_comment==-1)
{
document.getElementById("word_error").innerHTML="You need to have the word,"+"<span style='color:red'>"+" Medication"+"</span>"+" somewhere in the text";
}
if (mySelectList.value='Hospitalization' && hosp_comment==-1)
{
document.getElementById("word_error").innerHTML="You need to have the word,"+"<span style='color:red'>"+" Hospitalization"+"</span>"+" somewhere in the text";
}
if (mySelectList.value= 'Physician' && phys_comment==-1)
{
document.getElementById("word_error").innerHTML="You need to have the word,"+"<span style='color:red'>"+" Physician"+"</span>"+" somewhere in the text";
}
}
function submit_alert()
{
alert("You submitted the form")
}
function clear_error()
{
document.getElementById("word_error").innerHTML="";
}
function changeDR()
{
var my_textarea=document.getElementById("comments");
var comment_string=my_textarea.value;
var doctor=comment_string.indexOf('Dr.');
var comment_string2='';
if (comment_string < 0)
{
comment_string2=comment_string
} else {
comment_string2=comment_string.replace('Dr.','Doctor')
}
my_textarea.value=comment_string2;
}
</script>
</head>
<body style="background-color: silver">
<h2>Medical History</h2>
Select Category: <br>
<select id="medical_list" onChange="select_function();">
<option>Medication</option>
<option>Hospitalization</option>
<option>Physician</option>
</select>
<br><br><br>
<div id="enter_info">Enter Your <font color="blue">Medication</font> Information:</div>
<br>
<form method="post" action="">
<textarea id="comments" cols="60" rows="15" onBlur="text_check();" onFocus="clear_error();" onkeyup="changeDR();">
</textarea><br>
<div id="word_error"></div><br>
<input type="submit" value="Submit Information" onClick="submit_alert();"/>
</form>
</body>
</html>
Hi, I am using following code-- Code: <td>
<centre>
<select id=\"extenddays\" size=\"1\" name=\"extenddays\">
<option value\=\"2\"> 2 </option>
<option value\=\"4\"> 4 </option>
<option value\=\"7\"> 7 </option>
</select>
<a href=?ext_days=\"extendform.extenddays.value\" & ?extfid=" . $data->{'fid'} ." \" >
<INPUT TYPE=\"SUBMIT\" NAME=\"extend\" VALUE=\"extend\" />
</a>
</centre>
</td>
Here, I want that when I click on 'extend' button, it should redirect to the url given in the href.. But while forming url run time , it is not retrieving the value of "extenddays" ( which is selected option value).. Please help. Cheers, Shashikant Shinde Greetings, I am trying to make a form that collects "Number of Children" a parent has. If they select "4" from the select input, then I want to slidetoggle out the appropriate divs, one for each child. Code: <select id="NumberofChildren" name="NumberofChildren">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
The div IDs to display are 1child, 2child, 3child, 4child, 5child. I have been able to use slidetoggle in the past when attached to a button, but this one has me lost. Anyone know how to accomplish this? Your help is greatly appreciated! Thank you! I'm trying to make a comment script with show/hide divs and are so far OK, but... I want to hide one div when another is activated... Here is what I have so far: Code: <?
for ($q = 1; $q <= 5; $q++) {
echo '<div id="jdivStart'.$q.'" style="padding:0px 0px 0px 0px;width:100%x;">';
echo '<textarea style="color:#999999;" rows=2 cols="66" onfocus="jchange'.$q.'(\'jdiv'.$q.'\');">Write comment</textarea>';
echo '</div>';
echo '<div id="jdiv'.$q.'" style="display:none;">';
echo '<textarea style="color:#999999;" rows=6 cols="66"></textarea>';
echo '</div>';
?>
<script language="javascript" type="text/javascript">
function jchange<? echo $q; ?>(divname) {
var currentShowingDivQ = document.getElementById('jdivStart<? echo $q; ?>');
var objDivQ = document.getElementById(divname);
if (currentShowingDivQ && currentShowingDivQ != objDivQ) {
currentShowingDivQ.style.display = 'none';
}
if(objDivQ.style.display == 'none'){
objDivQ.style.display = 'block';
} else {
objDivQ.style.display = 'none';
}
}
</script>
<?
}
?>
So if I activate the first textbox, then when I activates the second I want to be able to hide the first again... Any help i appreciated :-) Hi, Is there anyone who could help me figure out how to Change a Hidden Fields Name based on selected option. The hidden fields name is sent off and I need to change the name depending on what option they select. For if they select MyList the hidden field name needs to be SelectLists[40] or if they select testlist the hidden field name needs to be SelectLists[41]. This is probably way, way off but I've done this and it doesn't work. Any help would be greatly appreciated, thanks. <script language="JavaScript"> function changelist() { //here we assign the value of the hidden input to x x=eval(document.getElementByName("SelectLists[40]"); if(document.getElementById("SelectLists[40]").selected=true x=SelectLists[40] else(document.getElementById("SelectLists[41]").selected=true x=SelectLists[41] else(document.getElementById("SelectLists[42]").selected=true x=SelectLists[42] //now we assign the new value to the input document.getElementById("theHiddenInput").name=x; //and now we test alert(document.getElementById("theHiddenInput").name) } </script> <input type="hidden" id="theHiddenInput" name="SelectLists[40]" value="Yes"> <select class="inpBox" style="width: 287px" name='mailinglist' id="lists" onchange="changelist()"> <option value="SelectLists[40]" name="SelectLists[40]" id="SelectLists[40]">MyList</option> <option value="SelectLists[41]" name="SelectLists[41]" id="SelectLists[41]">testlist</option> <option value="SelectLists[42]" name="SelectLists[42]" id="SelectLists[42]">testlist2</option> |
|||||||