|
JavaScript - Show Hide Divide Onchange Of Input
This code works to show divide with id "it" when select option "it" is chosen and it shows divide "de" when option "de" is chosen.
Problem: it will not show the nested divides inside the "it" and "de" divides. It only shows the <p></p> tags. Does someone know how I can get it to show the divides inside the main divide as well? Thanks in advance for your help. Head Code: function showstuff(divID)
{
els = document.getElementById( 'mydiv' ).getElementsByTagName( 'div' );
for (var i = 0; i < els.length; i++)
{
els[i].style.visibility="hidden";
els[i].style.display="none";
}
if( divID )
{
document.getElementById(divID).style.visibility="visible";
document.getElementById(divID).style.display="block";
}
if( window.event )
window.event.returnValue = false;
return false;
}
window.onload=function()
{
showstuff('');
}
Body Code: <select size="1" hide_label="0" id="experience" class=" validate['required']" title="" type="select" name="experience" onchange="showstuff(this.value) ;"> <option value="">(Please select)</option> <option value="it">IT</option> <option value="de">Design Engineer</option> <option value="both">BOTH</option> </select> <div id="mydiv"> <div id="it"> <p>why dont you show anything else!</p> <div class="ccms_form_element cfdiv_header" id="_h3_it_disciplines_check_all_that_apply_h3___container_div"><h3>IT Disciplines (Check all that apply)</h3><div class="clear"></div></div> </div> <div id="de"> <p>why dont you show anything else! UGH!!</p> <div class="ccms_form_element cfdiv_header" id="_h3_design_engineer_disciplines_check_all_that_apply_h3___container_div"><h3>Design Engineer Disciplines (Check all that apply)</h3><div class="clear"></div></div> <p>why dont you show anything else!</p> </div> </div> Similar TutorialsTrying 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>
As you can see the above warning will be only shown when there is an error while inserting the data into the login form. Now I have tried to achieve it by: Hiding the div say "warning". Use a javascript while submitting the form to check for input validation. If found any error, the hidden div "warning" will show above the form as shown as in the image. I have tried it in Edit fiddle - JSFiddle Ples help 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 All, I am really strugling with this and I hope somebody can help me on this. I would like to have a dropdown to only show when a certain value is chosen from another drop down. So if in this dropdown the value ETS Rep Discount is chosen he should show the other dropdown Code: <div class="row"> <div class="fieldName">Discount Type</div> <div class="fieldValue"> <asp:DropDownList ID="discountTypeDropDownList" runat="server" AutoPostBack="True" Width="295px" OnSelectedIndexChanged="DiscountTypeDropDownList_SelectedIndexChanged"> <asp:ListItem Value="<%$ AppSettings:DiscountType.General %>">General Discount</asp:ListItem> <asp:ListItem Value="<%$ AppSettings:DiscountType.Golf %>">Golf Only Rep Discount</asp:ListItem> <asp:ListItem Value="<%$ AppSettings:DiscountType.ETS %>">ETS Rep Discount</asp:ListItem> </asp:DropDownList> </div> </div> Code: <div class="row"> <div class="fieldName">Category</div> <div class="fieldValue"> <asp:UpdatePanel ID="UpdatePanelCategory" runat="server"> <ContentTemplate> <asp:DropDownList ID="CategoryDropDown" runat="server" Width="295px"> </asp:DropDownList> <asp:Label ID="CategoryRequiredLabel" runat="server" Font-Bold="True" ForeColor="Red" Visible="False">required!</asp:Label> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="discountTypeDropDownList" /> </Triggers> </asp:UpdatePanel> </div> </div> thanks in advance I have an idea for a little script.....I'm just stuck on one little part: When a user changes the value in a input or textarea box, I want it to change the value of a certain hidden input tag too. Here's what I have so far: function getNewValue(inputhidden, textinput) { var data = document.getElementById(inputhidden); var text = document.getElementById(textinput); data.value = text.value; } <input type= "text" name= "name" id= "name" onChange="getNewValue('detail', 'name')"> <input type= "hidden" name= "detail" id="detail" value= ""> However, this is not working and I'm not sure why Hello, I'm working on a quote generator and I'm running into an issue with onChange events not firing when a text field is dynamically populated via a child window. Here's my setup: I have 3 text boxes (quantity, price, markup) that are multiplied together in order to give the total of that product. Each text box has an onChange event [called calculator()] that calls an external javascript file, which handles the multiplication and instantly updates the total of that product. Up to this point, everything works fine - - when I manually edit any of the 3 inputs, the total updates correctly. However, my problem is that I now have the "price" text box being dynamically populated, and when it updates it is not firing the onChange event attached to it. The text box is being filled by way of launching a child window and running the following code within it: Code: function call_submit()
{
opener.document.quote_form.item_price_1.value=document.child.prods.options[document.child.prods.selectedIndex].id
self.close();
}
I've also tried to call the calculator function from within the child window, with no luck: Code: function call_submit()
{
opener.document.estimator_form.item_price_1.value=document.child.prods.options[document.child.prods.selectedIndex].id
calculator ()
self.close();
}
So, as of right now, the following is happening - - I launch the child window, I select the product to add to the quote, the child window closes and the price is correctly populates within the "price" text box, BUT the total stays at zero. If I manually edit any of the fields, it then catches back up and properly updates the total. Is their any way to fire the onChange event at the time when the text field is populated from the child window? Any help would be appreciated. Thanks in advance. The simplified code below works, and should give you an idea of what Im trying to achieve. The final version will have dozens of input fields so you can see why the below method stinks Code: <html><head><title>Values</title>
<script type="text/javascript">
<!--
function getid() {
var myNum = document.frm1.field1.value;
if(myNum == "A"){
document.frm1.field2.value = "1"
} else if(myNum == "B"){
document.frm1.field2.value = "2"
} else {
document.frm1.field2.value = ""
}
var myNum2 = document.frm1.field3.value;
if(myNum2 == "A"){
document.frm1.field4.value = "1"
} else if(myNum2 == "B"){
document.frm1.field4.value = "2"
} else {
document.frm1.field4.value = ""
}
}
//-->
</script>
</head><body>
<form name="frm1" id="frm1">
<input type="text" size="40" name="field1" id="field1" onChange="JavaScript:getid();" /><input type="text" size="4" id="field2" name="field2" /> <br>
<input type="text" size="40" name="field3" id="field3" onChange="JavaScript:getid();" /><input type="text" size="4" id="field4" name="field4" /> <br>
</form>
</body>
</html>
Each text input will have A or B written in by the user, which should automatically place that letters associated ID in its partner field. If any other letter is entered the ID will automatically be left blank. With the above code I'd need to repeat it over and over for each of the dozens of input fields. The final version wont be using simply A/B either but around 50 possible inputs each with their own ID which would make around 1000 possible variations. What am I missing here that will simplify the process? Thanks Hello, On a simple form, there is a radio button group with two radio buttons, a text box, and a submit button. The first radio button is checked(selected) by default. The text box input has the onChange event handler so that if the text is changed, the second radio button will be checked(selected). The problem is the input radio name contains a hyphen that breaks the JavaScript and the name can not be changed. What is the correct syntax for referencing a hyphenated form input radio name in the onChange event? Here is the form that works correctly with no hyphen in the input radio name: Code: <form name="myFormGood" action="" onsubmit="return false;"> Good Form with no hyphen in radio button name<br> <input name="radio1" type="radio" value="4" checked> First Option<br> <input name="radio1" type="radio" value="5"> Second Option<br><br> Change the text to select the Second Option<br> <input type="text" name="text1" onChange="document.myFormGood.radio1[1].checked = 'true';" size="10" value=" "><br><br> <input type="button" name="submit" value="It Works!"> </form> Here is the form that breaks the JavaScript because it has a hyphen in the input radio name: Code: <form name="myFormBad" action="" onsubmit="return false;"> Bad Form with hyphen in radio button name breaks JavaScript<br> <input name="radio-1" type="radio" value="4" checked> First Option<br> <input name="radio-1" type="radio" value="5"> Second Option<br><br> Change the text to select the Second Option. Nothing Happens.<br> <input type="text" name="text1" onChange="document.myFormBad.radio-1[1].checked = 'true';" size="10" value=" "><br><br> <input type="button" name="submit" value="It Doesn't Work!"> </form> 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>
ok trying to get a Div tag to show if something is True and hide if something is False JS Code: unction eToggle(anctag,darg)
{
var ele = document.getElementById('Module1');
var ele = document.getElementById('Module2');
var ele = document.getElementById('Module3');
var ele = document.getElementById('Module4');
if("module1" + "module2" + "module3" + "module4" <40)
{
div.id.Failed = "block";
div.Failed = "Failed";
}
else
{
div.style.Passed = "block";
div.Passed = "show";
}
}
HTML Code: <div id="Fail" class="hidden" style="display: none"><b><i>You will need to Repeat the Semester!</b> <br /> </div> <div id="Passed" class="hidden" style="display: none"> <img src="faces.png" width="50" height="50"><b><i> "Good Job you passed the Semster!"</b></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'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> 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 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 this is what im trying to do: http://www.linkstraffic.net/programm...d/movebox.html using this code: http://www.linkstraffic.net/programm...nd/movediv.php heres my code. can someone fix it? html: [CODE] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Chris MacDonald - Javascript Assignment 2</title> <link href="styles/styles.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="java.js"></script> <div id="header"> <div id="logo"><img src="images/beat.png" /></div> </div> <ul id="nav"> <li><a href="#">Home</a></li> <li><a href="http://beatthreads.bigcartel.com/category/tees">Shirts</a></li> <li><a href="#">About Us</a></li> </ul> </head> <body> <div id="content"> <a href="#" onclick="interv=setInterval('ShowBox()',3);return false;">Upcoming Designs</a> <div id="coverlogin"> <div id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tristique cursus dui, a venenatis diam consectetur fermentum. Nulla facilisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent aliquam ornare nunc non semper. Morbi blandit lectus non elit ultricies ultricies. Fusce mattis purus et eros ultrices et facilisis nulla consequat. Vestibulum tellus libero, tempor vel tincidunt nec, consectetur non ante. Donec sed malesuada felis. Mauris lorem lorem, ornare a rutrum quis, rutrum in mauris. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. <br/> <p align="left"><a href="#" onClick="interv=setInterval('HideBox()',3);return false;">X</a></p> </div> </div> </div> <div id="footer"> <div id="footertext">Beat Threads - 2010</div> </div> </body> </html> [CODE] javascript: // JavaScript Document var hh=0; var interv; //we show the box by setting the visibility of the element and incrementing the height smoothly function ShowBox() { //Depending on the amount of text, set the maximum height here in pixels if(hh==40) { clearInterval(interv); return; } obj = document.getElementById("coverlogin"); obj.style.visibility = 'visible'; hh+=2; obj.style.height = hh + 'px'; } function HideBox() { obj = document.getElementById("coverlogin"); if(hh==2) { obj.style.visibility = 'hidden'; obj.style.height = '0.1em'; clearInterval(interv); return; } hh-=2; obj.style.height = hh + 'px'; } [CODE] Can someone fix this for me? Code: <html>
<head>
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript">
function showonlyone(thechosenone) {
var noticecontent = document.getElementsByTagName("div");
for(var x=1; x < noticecontent.length; x++) {
name = noticecontent[x].getAttribute("name");
if (name == 'noticecontent') {
if (noticecontent[x].id == thechosenone) {
noticecontent[x].style.display = 'block';
}
else {
noticecontent[x].style.display = 'none';
}
}
}
}
</script>
</head>
<body>
<center>
<div id="parentdiv">
<div id="expandall">OPEN/CLOSE ALL</div>
<div id="noticeheading1" class="noticeheading" name="noticeheading"; onClick="showonlyone('noticecontent1');">Heading 1</div>
<div id="noticecontent1" name="noticecontent" class="noticecontent">awertysergyetwhwgertrhztrxdtykpopmift6hwe5awfwedaserhdy4hatefeshdgtrgd</div>
<div id="noticeheading2" class="noticeheading" name="noticeheading"; onClick="showonlyone('noticecontent2');">Heading 2</div>
<div id="noticecontent2" name="noticecontent" class="noticecontent">fh56serhgzsrxdtrjhgzsrltkjuytinubvre6io4exjhgftxtrokzet6ttawruthrthwru</div>
<div id="noticeheading3" class="noticeheading" name="noticeheading"; onClick="showonlyone('noticecontent3');">Heading 3</div>
<div id="noticecontent3" name="noticecontent" class="noticecontent">fdfjesrtaw5u4wgy5gw45use4syzerhgtawerfatrastaghgryseerathw5uz4de5ser5s</div>
</div>
</center>
</body>
</html>
can anyone help on "OPEN/CLOSE ALL" to show or hide all .noticecontent divs 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! Hi Im looking for a way to show hide text box on select option change PHP Code: <select name="letter_type" id="lt"> <option value="Registered">Registered</option> <option selected="selected" value="Unregistered">Unregistered</option></select> <input name="textfield7" id="regty" type="text" accesskey="1" tabindex="1" size="20" /> i wana show that text box if user select "Registered" from select option. any help would be great sorry for language errors. Thanks How can i make a function that a div container is hiding when i move with my mose over and it should be showed when i move with my mouse out. i tried it like that: <script type = text/javascript> function show() { document.getElementById("sidebar").style.visibility = "hidden"; } function hide() { document.getElementById("sidebar").style.visbility = "visible"; } </script> <div id ="sidebar"> <a href ="#" onmouseover = "show()"; onmouseout = "hide()"> </div> please tell me how i can solve this problem. and sorry for my english, i am from austria ;-) thanks Hey, I wonder how I'm going to do when it comes to the function of "show/hide" with JavaScript. My question is: I'm working on a web form. The following question is on the form: "Was ITK used?", and you're supposed to be able to pick "Yes" or "No" (by radio buttons), and this I've already fixed with no issues. But what I CAN'T do, for some strange reason, is that when you've clicked "Yes" on that question, it should appear another question: "Does customer have ITK in their network?", and when that comes up you're supposed to choose between "Yes"/"No" with radio buttons there as well. BUT if you click "No" on the first question (Was ITK used?), the other question (Does customer have ITK in their network?) shouldn't appear... Do you understand what I mean? How do I do this? Thanks in advance! |
|||||||