|
JavaScript - Show/hide Div Based On Select Box Choice
Ok so I have a select box where the value must be passed via the form. If the users selects choice B or Choice C then I want a specific div to show. If they choose choice A then I want the div to hide or remain hidden. It should be hidden on page load.
Code: <select name="Event_Type_ID">
<option value="1">Choice A</option>
<option value="2">Choice B</option>
<option value="3">Choice C</option>
</select>
<div id="showme">
Content to show if EITHER Choice B or C is chosen. Otherwise this div should be hidden.
</div>
Can anyone lead me in the right direction? Thanks! Similar TutorialsHello all, I need some help! I am trying to finish a script that shows a particular div based on the last 2 chars in the cookie value. I have the cookie part done. I just need a little help with the show hide part. Can anyone help! Thanks in advance! Code: <HTML>
<HEAD>
<TITLE>cookie set, delete, get value and create</TITLE>
<SCRIPT LANUAGE="JavaScript">
/**
* Sets a Cookie with the given name and value.
*
* name Name of the cookie
* value Value of the cookie
* [expires] Expiration date of the cookie (default: end of current session)
* [path] Path where the cookie is valid (default: path of calling document)
* [domain] Domain where the cookie is valid
* (default: domain of calling document)
* [secure] Boolean value indicating if the cookie transmission requires a
* secure transmission
*/
function setCookie(name, value, expires, path, domain, secure) {
document.cookie= name + "=" + escape(value) +
((expires) ? "; expires=" + expires.toGMTString() : "") +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
((secure) ? "; secure" : "");
}
/**
* Gets the value of the specified cookie.
*
* name Name of the desired cookie.
*
* Returns a string containing value of specified cookie,
* or null if cookie does not exist.
*/
function getCookie(name) {
var dc = document.cookie;
var prefix = name + "=";
var begin = dc.indexOf("; " + prefix);
if (begin == -1) {
begin = dc.indexOf(prefix);
if (begin != 0) return null;
} else {
begin += 2;
}
var end = document.cookie.indexOf(";", begin);
if (end == -1) {
end = dc.length;
}
return unescape(dc.substring(begin + prefix.length, end));
}
</SCRIPT>
</HEAD>
<BODY>
<input type="button" value="Set Cookie" onclick='setCookie("location", prompt("Enter your location:\n Enter \"Baltimore, MD\" in the text box below."))' />
<br>
<br>
<script>
var state = getCookie("location").slice(-2);
if (state=='MD' || state=='NC'){
alert("location stripped to" + " - " + state);
//Show hide code here...
}
</script>
Refresh page after setting the cookie to "Baltimore, MD"<br>
<br>
<div id="image1">Image1</div>
<div id="image2">Image2</div>
<div id="image3">Image3</div>
</BODY>
</HTML>
Hi ya all, how can I show / hide the content of sub divs based on whether the input is != or = and be able to repeat this. I tried to hide the sub divs using , onclick if bla bla = '' ; Code: document.getElementById('hideme').innerHTML = '';
which works, but once I try to enter a new input, then nothing happens, even if the content of the sub divs is = input thx Hi guys, another day, another problem I have a select: Code: <label for="tiers">Number of tiers</label> <select name="tiers" id="tiers" onchange="showtiers()"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> So depending what the user will choose, I want to show below divs: Code: <div class="tier" id="tier_1" style="display:block">
<label for="tier1">Tier 1</label>
<select name="item" id="tier1" onchange="recalculate(this)">
<option value="0">Please choose1</option>
</select>
</div>
<div class="tier" id="tier_2" style="display:none">
<label for="tier2">Tier 2</label>
<select name="item" id="tier2" onchange="recalculate(this)">
<option value="0">Please choose2</option>
</select>
</div>
<div class="tier" id="tier_3" style="display:none">
<label for="tier3">Tier 3</label>
<select name="item" id="tier3" onchange="recalculate(this)">
<option value="0">Please choose3</option>
</select>
</div>
<div class="tier" id="tier_4" style="display:none">
<label for="tier4">Tier 4</label>
<select name="item" id="tier4" onchange="recalculate(this)">
<option value="0">Please choose4</option>
</select>
</div>
As you can see, on page load you can only see select/div nr 1, three others are hidden. How can I make that happen? I'm trying with below code placed in the head: Code: function showtiers() {
var dropdownIndex = document.getElementById('tiers').selectedIndex;
var dropdownValue = document.getElementById('tiers')[dropdownIndex].value;
if (dropdownValue == 2) {
document.getElementById(tier_2).style.display = 'block';
document.getElementById(tier_3).style.display = 'none';
document.getElementById(tier_4).style.display = 'none';
}
if (dropdownValue == 3) {
document.getElementById(tier_2).style.display = 'block';
document.getElementById(tier_3).style.display = 'block';
document.getElementById(tier_4).style.display = 'none';
}
if (dropdownValue == 4) {
document.getElementById(tier_2).style.display = 'block';
document.getElementById(tier_3).style.display = 'block';
document.getElementById(tier_4).style.display = 'block';
}
}
If someone could point out what am I doing wrong I'd really appreciate it. Hey all, I'm trying to get the two followup questions underneath the checkbox to show up only if someone places a check there, but for some reason the way I've got it set up now it's simply hiding the area I want to show up altogether, and the checkbox has no effect on it. Rather than waste tons of space pasting it here, here's the pastebin: http://pastebin.ca/1822165 alternatively here is the live version: http://soniajacobwedding.com/site/rsvptest.html I'd prefer to have the form collapse when the additional questions are hidden, though if i can get this working at all I'd be pretty happy. Greetings, I recently learned that the <option> tags can not use the onclick attribute inside of IE. This works great for firefox, but sadly not a single version of internet explorer supports it (from what I am told via countless Google searches). I have been modifying my attempit at a solution to use the <select> tag with the attribute onchange. Maybe I am casing this wrong, or not seeing a solution as the below code does not operate in any browser, and no errors are reported back through firebug or IE. Excuse my sloopy attempt at {smarty tags} this script is written in a bunch of PHP object->vales and to save space cored the issue down to it's basics. On change of the select box, the value="5-28" is sent to javascript showBox to split the number away from the id_trips and only focus on the locations (the number before the '-' . IF the location matches the switch value then the box should show / hide or value change. The IDs are all correct I just think that there is a ' or a " or something off as I am not a javascript expert. my SQL return values <code class="php"> //PHP VARIABLES from QUERY sample loop 1 trip-number = 200 locations = 5 id_trips = 28 </code> my HTML form loop <code class="html"> {BEGIN LOOP 'trips'} <!--HTML form for {trip-number} --> <form id="trip{trip-number}" method="post" action="#"> <select id="depid{trip-number}" name="depId" class="inputed greybig required" onchange="showBox(this.value, '{trip-number}', 'dep');"> <option value="">Select Time</option> <option value="{locations}|{id_trip}">{trip-time}</option> </select> </form> <!--/HTML form for {trip-number} --> {/END LOOP 'trips'} </code> my javascript at the bottom of the page before the </body> <code class="javascript"> <!-- JAVASCRIPT AT END OF PAGE BEFORE CLOSING </body> I am using the jQuery Tools latest build 1.4.2 pull value, split and process for hide / show options --> <script type="text/javascript"> function showBox(val, trip, arrdep){ var splitVal = val.split("-"); switch (splitVal[0]){ case 1: //Airport $("#"+arrdep+"dep_win_airport"+trip).show(); case 2: //Port of Miami $("#"+arrdep+"_win_cruse"+trip).show(); case 4: //Port Canaveral $("#"+arrdep+"_win_cruse"+trip).show(); case 5: //door drop off $("#"+arrdep+"_win_door"+trip).show(); case 6: //Door Pick Up case 7://Airport NO FLIGHT default: $("#"+arrdep+"_window"+trip).hide(); $("#"+arrdep+"_info_"+trip).hide(); $("#"+arrdep+"_win_door"+trip).hide(); $("#"+arrdep+"_win_cruse"+trip).hide(); $("#"+arrdep+"_win_airport"+trip).hide(); $("#"+arrdep+"info_"+trip).val("Supply Address"); }; //end switch splitVal }; //end function showBox </script> </code> Trying to get the divs to switch style properties when selected form select menu. Any help would be great! Code: <script type="text/javascript">
function showstuff(element){
if(document.getElementById(element).style.display = 'block')
{
document.getElementById(have).style.visibility="block";
document.getElementById(look).style.visibility="none";
}
else if(document.getElementById(element).style.visibility = 'block')
{
document.getElementById(look).style.visibility="block";
document.getElementById(have).style.visibility="none";
}
}
</script>
<select name="type" onchange="showstuff(this.value);">
<option value="look">Look</option>
<option value="have">Have</option>
</select>
<div id="have" style="display:block;">Have</div>
<div id="look" style="display:none;">Look</div>
Hi, I have a web form that I'm creating and it has some expandable checkboxes that need to be restricted based on choice. This is my criteria: If someone chooses checkbox number 1, they cannot choose any other checkbox. If someone chooses checkbox number 2, they may also choose number 3 but not 1 or 4, they must also answer the question that appears below. If someone chooses checkbox number 3, they may also choose number 2 but not 1 or 4, they must also answer the question that appears below. If someone chooses checkbox number 4, they cannot choose any other checkbox, and must answer the questions that appears below. One more caveat: If checkbox number 2 is chosen, and they've filled in all three lines of the question below, I need for them to dynamically add more lines as needed. I have attached my web form so you can see what I've done. I've researched these options and tried code from various examples but I can't seem to get it to work. Does anyone know how to accomplish all of this? Thank you in advance! I have a radio button that asks Does your URL exist or need to be purchased? and a drop down menu that lists different types of web projects (i.e. new website and website redesign). What I'm trying to achieve is, if the user selects that the URL exists, I would like the drop down menu option new website to be removed from the list. Form: Code: <form> <input type="radio" name="website_status" value="exists"/> Exists <input type="radio" name="website_status" value="purchase_required"/> Needs to be purchased <select name="projects"> <option></option> <option value="new_website">New Website</option> <option value="website_redesign">Website Redesign</option> </select> </form> JavaScript: [CODE] <script> window.onload = initForms; function initForms() { for (var i=0; i<document.forms.length; i++) { document.forms[i].onsubmit = function() {return validForm();} } } function validForm() { var inputarray = document.getElementsByTagName("input"); var selectarray = document.getElementsByTagName("select"); var textarea = document.getElementsByTagName("textarea"); if (inputarray[0].checked == true) { selectarray[0].remove(options[1]); return false; } </script> I've been experimenting with this for the last couple hours and am getting nothing! Could someone please point me in the right direction? What I would like to do is have a page with a dropdown menu, and depending on which option the user chooses from the dropdown, reload the page and display a particular iframe below the dropdown, based on the users choice. Also, a default iframe would load (the one connected to the default choice in the select box). Hopefully that makes sense. I was trying to make this work with PHP (without having the user having to click a submit button) but I couldn't find a way to make it happen.
I am facing an issue where a link on my website opens in a new window if you simply click on it. However, if you right click and say open in new window or new tab, it opens the same window (URL) again from where the link is clicked. Self Service Option is a link and the JSP calls a function getSelfServSite() when the link is clicked. This is how the code flows in my case function getSelfServSite() { getToTheLink("${myConfigInfo.selfServiceURL}"); // this is because the URL is configurable } function getToTheLink(url) { window.open (url, "currentWindow", ""); } What am I doing wrong. I want it to go to the right link no matter how the user click it. Please advise. Thanks I've been having problems getting my select option to change the options of another select option. I'm not much of a javacsript coder, so I'm at a lost. When I select the first option nothing appears in the second option. here's the javascript code: Code:
function createOption(OptionText, OptionValue){
var temp = document.captcha_form("option");
temp.innerHTML = OptionText;
temp.value = OptionValue;
return temp;
}
function valChange(){
var firstList = document.getElementById("emailaddress");
var secondList = document.getElementById("subject");
while(secondList.hasChildNodes())
secondList.removeChild(secondList.childNodes[0]);
switch(firstList.value){
case "1":{
secondList.appendChild(createOption("Report Site Browsing Issue", Report Site Browsing Issues));
secondList.appendChild(createOption("Report Page Errors", Report Page Errors));
secondList.appendChild(createOption("Other", Other));
break;
}
case "2":{
secondList.appendChild(createOption("Report Unauthorized Game", Report Unauthorized Game));
secondList.appendChild(createOption("Report Spam", Report Spam));
secondList.appendChild(createOption("Report Harassment", Report Harassment));
secondList.appendChild(createOption("Report Illegal Activities", Report Illegal Activities));
secondList.appendChild(createOption("Request Account Removal", Request Account Removal));
break;
}
// ....
default:{
secondList.appendChild(createOption("Please select from the first list", ""));
break;
}
}
}
window.onload = valChange;
this is the form code Code: <div class="mailto_form"> <form method="POST" id="captcha_form" name="captcha_form" action="../includes/mailform.php"> <div style="padding-bottom: 1em;">Choose Recipient: <select name="emailaddress" id="emailaddress" onchange="valChange();"> <option value=""></option> <option value="1">Webmaster</option> <option value="2">Admin</option> </select> </div> <div style="padding-bottom: 1em;">Subject: <br /><select name="subject" id="subject"> </div> <div style="padding-bottom: 1em;">From: <br /><input type="text" name="email" id="email" value=""> </div> <div style="padding-bottom: 1em;">Enter the text contained in the image into the text box: <br /><img src="../includes/captcha.php" /> <br /><input type="text" name="userpass" value=""> </div> <div style="padding-bottom: 1em;">Message: <br /><textarea name="message" id="message" rows="10" cols="60"><?php echo "</tex" . "tarea>"; ?> </div> <div style="padding-bottom: 1em;"><input name="submit" type="submit" value="Submit"> </div> </form> </div> Link to the page http://www.netgamegurus.com/contact/ Hi JS Experts, I am working on a class registration system that requires students to register for a main class (101, 102 or 103). The student is supposed to select one main course as well as provide a second choice in case the first is not available. I have two dropdown select fields to capture data 1) Choice -1: 101 / 102 / 103 ( Student needs to select one - Reading the classID from classes table) 2) Choice -2: 101 / 102 / 103 ( If student selects 101 in Choice-1 then the only classes available under Choice-2 should be 102 or 103). How can I accomplish the above? Further to this there are two fields on the form where I would like to auto populate based on what they have selected in Choice-1 and Choice-2. For Example: If a parent selects choice1: 101 the child Choice1 field should autopopulate with 100. If a parent selects Choice2: 201 the child Choice2 field should autopopulate with 200 Any help would be really appreciated. Thanks Vinny Hello, I am trying to make a simple code that has a selection list (with the choice fruit or veggie). When the user chooses fruit, the second list displays the options apple, orange, banana. When the user changes their choice to veggie, the second select list then contains carrot, corn, potatoes (and the apple, orange, banana disappear). I need some advice on how to do this Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled</title> </head> <body> <form name = "form1"> <fieldset> <legend>Fruit or Veggie</legend> <select name = "S1"> <option name = "fruit">Fruit </option> <option name = "veggie">Veggie</option> </select> <select name = "S2" </select> </fieldset> </form> <script language="JavaScript" type="text/javascript"> ??? </script> </body> </html> Hi Guys, I'm a new member, so hello all! I'm ok at html/xhtml, but i know nothing about javascript, so hoping someone here can help! Basically, I have a contact form on my website that offers 2 different types of contact: RSVP and Other. these two types are available in a selection box. What I want to happen is when the "RSVP" option is selected, the following options are displayed: "Yes/No" radio buttons "additional info" textarea And when the "Other" option is selected, the following option is displayed: "Message" text area How can i make this happen?! i've tried searching the internet but I can't get anything i find to work. I can't even get the elements to hide! At the moment, my form looks like this: - Code: <form method="POST" action="contact.php"> <table class="contact"> <tr> <td>Name:</td> <td><input type="text" name="name" size="20"></td> </tr> <tr> <td>Email:</td> <td><input type="text" name="email" size="20"></td> </tr> <tr> <td>Contact Type:</td> <td><select size="1" name="type"> <option value="rsvp" >RSVP</option> <option value="other">Other</option></td> </tr> <tr> <td colspan=2> </td> </tr> <div id="rsvp" style="display:none;"> <tr> <td colspan=2><input type="radio" name="response" value="y"> Yes Please!</td> </tr> <tr> <td colspan=2><input type="radio" name="response" value="n"> Sorry, but No. </td> </tr> <tr> <td colspan=2>Additional Comments (Please include any special dietary requirements): </td> </tr> <tr> <td colspan=2><textarea rows="5" name="rsvpmsg" cols="30"></textarea></td> </tr> </div> <div id="other" style="display:none;"> <tr> <td colspan=2>Message:</td> </tr> <tr> <td colspan=2><textarea rows="9" name="othermsg" cols="30"></textarea></td> </tr> </div> <tr> <td> </td> <td><input type="submit" value="Submit" name="submit"> <input type="reset" value="Reset" name="reset"></td> </tr> </table> </form> Please note, the style="display:none;" parts aren't even working I appreciate any help you can give! thanks! Hi all, Check this code: PHP Code: <a>text</a> <div id="pkg">pkg</div> <div id="table_pkg">table_pkg</div> I'd like to show table_pkg and hide pkg when I click on <a>text</a>. How can I do? Thank you very much Hello, I'm trying to have a div be hidden on loading the page but when you click a link it will show the div... here's code I have but it doesn't show when you click the link... <script type="text/javascript"> function show(){ document.getElementById(test).style.display="block"; } </script> <div id="test" style="display:none;"> <p>Some text</p> </div> <a href="#" onclick="show(); return false;">Show</a> I don't know a lot about Javascript... still learning.. I am trying to create a show/hide effect that displays an image based on the users text input. I have coded this before for a list/menu and it works fine. With this particular project there are too many selections to choose from to put in a list/menu. I am trying to use if and else if statements to make this work. With the code the way it is only the first function on the list works. I tried just using repeating if statements and only the last function on the list works. Here is the code: Code:
<script type="text/javascript" >
function showSample() {
if (document.getElementById('input').value='SW001') {
document.getElementById('SW001').style.display='block';
document.getElementById('SW002').style.display='none';
document.getElementById('SW003').style.display='none';
document.getElementById('SW004').style.display='none';
}
else if (document.getElementById('input').value='SW002') {
document.getElementById('SW001').style.display='none';
document.getElementById('SW002').style.display='block';
document.getElementById('SW003').style.display='none';
document.getElementById('SW004').style.display='none';
}
else if (document.getElementById('input').value='SW003') {
document.getElementById('SW001').style.display='none';
document.getElementById('SW002').style.display='none';
document.getElementById('SW003').style.display='block';
document.getElementById('SW004').style.display='none';
}
else if (document.getElementById('input').value='SW004') {
document.getElementById('SW001').style.display='block';
document.getElementById('SW002').style.display='none';
document.getElementById('SW003').style.display='none';
document.getElementById('SW004').style.display='none';
}
else if (document.getElementById('input').value='SW005') {
document.getElementById('SW001').style.display='none';
document.getElementById('SW002').style.display='none';
document.getElementById('SW003').style.display='none';
document.getElementById('SW004').style.display='block';
}
}
</script>
<style type="text/css">
<!--
#main {
width: 400px;
margin-right: auto;
margin-left: auto;
height: 125px;
}
#imageArea {
float: right;
width: 200px;
}
#formArea {
float: left;
width: 200px;
height: 125px;
}
.image {
height: 125px;
width: 125px;
margin-right: auto;
margin-left: auto;
display: none;
}
#SW001 {
background: url(../_images/Colorfil/SW0001.jpg) no-repeat center center;
}
#SW002 {
background: url(../_images/Colorfil/SW0002.jpg) no-repeat center center;
}
#SW003 {
background: url(../_images/Colorfil/SW0003.jpg) no-repeat center center;
}
#SW004 {
background: url(../_images/Colorfil/SW0004.jpg) no-repeat center center;
}
#SW005 {
background: url(../_images/Colorfil/SW0005.jpg) no-repeat center center;
}
-->
</style>
</head>
<body>
<div id="main">
<div id="imageArea">
<div class="image" id="SW001"></div>
<div class="image" id="SW002"></div>
<div class="image" id="SW003"></div>
<div class="image" id="SW004"></div>
<div class="image" id="SW005"></div>
</div>
<div id="formArea">
<form action="" method="get">
<input type='text' name="input" id='input' />
<input name="" type="button" onclick="showSample(this.selectedIndex)"/>
</form>
</div>
</div>
</body>
</html>
Any help would be greatly appreciated! Im pretty new to JS so Im sure this is not the best way to go about this but it'll do for now, any suggestions welcome I have a script to show and hide various divs based on a function & var. The problem im having is that when ANY of the variables ('hate', 'ok' and 'love') are passed all 3 different feedback forms ('FeedbackHate', 'FeedbackOk' and 'FeedbackLove') appear, not just the one I want. here is the JS: Code: function sitesurveyswitch(emotion) {
var e = emotion;
document.getElementById('site_survey_hate').style.backgroundPosition = '0px 0px';
document.getElementById('site_survey_ok').style.backgroundPosition = '0px 0px';
document.getElementById('site_survey_love').style.backgroundPosition = '0px 0px';
document.getElementById('FeedbackHate').style.display = 'none';
document.getElementById('FeedbackOk').style.display = 'none';
document.getElementById('FeedbackLove').style.display = 'none';
if (e == 'hate')
document.getElementById('site_survey_hate').style.backgroundPosition = '-80px 0px';
document.getElementById('FeedbackHate').style.display = 'block';
if (e == 'ok')
document.getElementById('site_survey_ok').style.backgroundPosition = '-80px 0px';
document.getElementById('FeedbackOk').style.display = 'block';
if (e == 'love')
document.getElementById('site_survey_love').style.backgroundPosition = '-80px 0px';
document.getElementById('FeedbackLove').style.display = 'block';
}
and here is the code related to this function: Code: <div id="siteSurveyBox">
<span id="site_survey_hate" onclick="sitesurveyswitch('hate');return false;"></span>
<span id="site_survey_ok" onclick="sitesurveyswitch('ok');return false;"></span>
<span id="site_survey_love" onclick="sitesurveyswitch('love');return false;"></span>
</div>
<div id="FeedbackHate" style="display:none; margin-top:-28px;">
FEEDBACK FORM IS HERE
</div>
<div id="FeedbackOk" style="display:none; margin-top:-28px;">
FEEDBACK FORM IS HERE
</div>
<div id="FeedbackLove" style="display:none; margin-top:-28px;">
FEEDBACK FORM IS HERE
</div>
Hi guys, im new to forums and need some help with my website. I have embed a flash player known as: JW player into my website and put it into a div. Now my problem is I want javascript to hide the div containing the flash player for atleast a few seconds to display a loading image.gif. How would I set this up? Im not to familiar about using javascript so im not sure if its even possible. Anways thx for any help ore suggestions related to this subject. Hello, I have the folowing code but it seems to be broken between "SM Decision Support" and "Incident and Request Management". Does anyone know how I resolve ?. The idea is when somebody opens the page all the sections are hidden/uncollapsed and the user can collapse individually each section with a click or by hitting the expand/collapse all link. ------------ Have placed code in attachment as too long for this section |
|||||||