Show/hide table rows via select menu choices - And I changed my Javascript up a little so that I would have an easier time remembering it.Here are the codes:
HTML
<table cellspacing="5" cellpadding="5" border="0">
<tr>
<td><strong>Request Service:</strong></td>
<td><input type="radio" value="Website Design" />
[code]....
Trying to get the divs to switch style properties when selected form select menu
<script type="text/javascript">
function showstuff(element){
if(document.getElementById(element).style.display = 'block')
[code].....
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
[code]....
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:
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.
<select name="Event_Type_ID">
<option value="1">Choice A</option>
<option value="2">Choice B</option>
[code]....
i would like to have 2 radio buttons each with a associated div when the page loads the first radio button will be checked and its corresponding div will be show when the user checks the other radio button its corresponding div is shown and the first div is hidden:
View 2 Replies View RelatedI am going to achieve something like this.
<div id="sidebar">
<div id="html1"><h2>Test 1</h2></div>
<div id="html2"><h2>a1 tes2</h2></div>
<div id="html3"><h2>a2 tes3</h2></div>
</div>
The thing is that first I need to detect if the div id is "sidebar" if its "sidebar" then it will pickup all the text inside h2 tag and will search for a1 or a2 in the text.If a1 is found then it will pickup the id html2 and make this div only visible.So in this case it will pickup id html2 and make it visible while other ids like html1 and html3 will be hidden.
Using jQuery, the hide show part is easy. I need to show or hide a single section of a form based on the value of a select box. More specifically, if the select box is one of 30 countries, then show, else hide.
What's the easiest way to handle this?
I am using the following script on one of my pages (script comes from [url]:
Code:
The script works great, BUT I need to use it in 2 different areas of the same form. It only works on an id="selectMenu" and of course I cannot have more that 1 id.
How can I get this script to work in multiple select fields? (at least more than 1)
Im using a jQuery script to show/hide a div based based on the selection made via a dropdown.
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
The problem im having is that the value used in the dropdown lists are price values eg 10.00
Consequently jQuery seems to interprit these as css notations, meaning the code doesnt work.
I want to have a select box be able to show a choosen Paragraph depending on the value choosen by the select box. Ex:
<select name='color'>
<option value='red'>red</option>
<option value='yellow'>yellow</option>
</select>
If the person chooses 'red' then 'Roses are Red" would show (say in a textbox or div)
If the person chooses 'yellow' then "The sun is yellow' shows up in a textbox or div.
i have a select box, when user select value other than 'H' then the hidden <DIV> element will showed up, and when user select value 'H' the <DIV> element will hide again
the code is like this :
HTML Code:
<select name="show_status">
<option value="H">Is Hidden</option>
<option value="S">Show me the DIV</option>
[Code].....
I am using jquery with the cookie plugin and I have multiple image buttons that can hide/show multiple elements. My question is how can I add a cookie to this code to remember whether each separate element is opened or closed?
The code,
$(document).ready(function() {
// choose text for the show/hide link - can contain HTML (e.g. an image)
var showText='<div class="expanddown"></div>';
var hideText='<div class="expandup"></div>';
// initialise the visibility check
var is_visible = false;
// append show/hide links to the element directly preceding the element with a class of "toggle"
$('.toggle').prev().append('<a href="#" class="togglelink">'+hideText+'</a>');
// capture clicks on the toggle links
$('a.togglelink').click(function() {
// switch visibility
is_visible = !is_visible;
// change the link depending on whether the element is shown or hidden
$(this).html( (!is_visible) ? hideText : showText);
// toggle the display - uncomment the next line for a basic "accordion" style
//$('.toggle').hide();$('a.toggleLink').html(showText);
$(this).parent().next('.toggle').slideToggle('fast');
// return false so any link destination is not followed
return false;
});
});
HTML,
<a class="togglelink" href="#"></a>
<div class="toggle">
Content
</div>
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. how to show hide part.
View 7 Replies View RelatedI know from scouring the Web that this is a very common Javascript question, but I have a twist on the question which is giving me headaches, and I hope some of the brilliant minds here at DaniWeb can help show me the error of my ways.
Say a user has checked a checkbox when submitting a form. I have a PHP script that records that check in a MySQL record. Later when they visit the page, the PHP script shows the checkbox as being checked. That's all working fine.
Now here's what I'm TRYING to do: Since the checkbox is checked when the page loads, I want a certain div to show up. And when the user UNchecks the checkbox, I want the div to go away. Simple, right?
Here's the Javascript I've placed in the header:
In the CSS, I've styled a div thusly:
And here's what I'm doing in the <body>:
This should show up when you click Yellow Box. And it should go away when you click it again. </div>
When I uncheck the checkbox (first click), nothing happens: the div still shows up.
Then when I re-check the checkbox (second click), the div goes away.
And then when I un-check the checkbox again (third click), the div comes back.
In other words, it's doing the OPPOSITE of what I want.
It seems that when I click the checkbox the first time (to uncheck it), the Javascript pulls an empty value. Only with the second click is it finding a value ('none').
I have a script I am trying to use to show or hide a div id. It uses a cookie, set on link click, to remember if the div should be displayed or not.
It works, but I'm having two problems:
1) The function only shows/hides the first instance of the div, not all instances.
2) Reloading the page after an initial cookie set causes the div to always initially be displayed regardless of the last cookie value (cookie seems to automatically re-set itself to 'tutor-show').
Here is the code:
You can see it in action here: uomeds{dt}com/cbl/cbl-2.htm
I would like to show or hide a header element (e.g. <h3></h3>) based up a div tag that either contains content or not. The content is dynamically added or shown, but the header element isn't, which results in having the header element shown with no content below it many times.
Here's an example:
I'm basically looking for script that uses hide show functionality. with the addition of save state ability based on a cookie that remembers what item the user last expanded for his/her previous visit.
In other words lets say a user expands a link that has a list of information.
Then the user leaves the page and comes back to the same page. It would be ideal if that page remembers(via cookie) what the user last expanded.
Does ANYONE... know where or can perhaps paste some sample code?
I have a script to show and hide various divs based on a function & var. The problem I am 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:
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:
<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>
I have a simple jQuery code that shows or hides a DIV based on the selected value of a select tag. Currently it looks like this and it's working fine:
if (selected == "0") jQuery("#divPublishDate").show('slow')
I want to add an else so that the if the value is anything other than 0, I want to hide the div. What's the proper syntax in this case? I assume this is the short version of an IF statement without the { }.
I've got a fixed div that has a fixed tab as a trigger. I'd like to only show the trigger tab when the user scrolls down the page "X" pixels from the top (say like 200px). Can someone point me in the direction of implementing this?
View 4 Replies View RelatedI have a div that should be hidden on default, but when a certain URL parameter is present, then the div is visible.
[Code]...
I have a form with three radio options. And I have three buttons:
<input type="submit" name="mainform_action" value="Edit Data">
<input type="submit" name="mainform_action" value="View Data">
<input type="submit" name="mainform_action" value="Delete Data">
If the first radio button is selected, I only want all three buttons to be
visible to the user.
If the second radio button is selected, I only want the "Edit Data" and "View
Data" buttons to be visible.
If the third radio button is selected, I only want the "View Data" button to be
visible.
Is it possible to accomplish this in Javascript? In particular, I want to
continue using the "input type=submit" buttons without having to create my own.
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 = '' ;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.
View 2 Replies View RelatedThe two page sections you see on the page "One Time Gift" or "Monthly Subscription" are normally hidden via a document.write via a body onload. Generally, all of this functions well. But, I want to expand the use a bit here so I want to pass a $_POST value to this page from another page which hides or shows these two sections based on this passed value. So, if the value in "once", I want the div with the id="onetime" to be visible and the other div to be hidden. If the value is "monthly", then the opposite would happen. Now this is supposed to all happen as the page loads because we are just arrivng here from the sending page.
View 9 Replies View RelatedI have 3 divs that contain radio with labels and beneath each radio button I would like to show/hide a form based on whether the radio is selected or not.
Code idea:
So if the radio1 input is selected this would show form1. Selecting radio2 input would hide any other forms (form1, form3) and show form 2 etc.