Show / Hide Depending On Form Selection - How Best To Arrange Data

May 13, 2009

I have a big form which I'm tidying up by only showing elements when they become relevant, based on the currently selected input (eg to only show an option for 'waist size' when garment type 'jeans' has been selected). I've done this many times, and probably used a different approach each time, so I just wanted to see what other people do. It's currently along these lines: "If a particular option is selected, then show this element, otherwise hide it".

Code:
//the onclick handler
function checkViewType() {
//go through radio inputs in the cell and check what's clicked
document.getElementById('supplierOptions').style.display=radioCollection.supp.checked?"":"none";
document.getElementById('subCatOptions').style.display=radioCollection.subcat.checked?"":"none";
document.getElementById('subCatTimeOptions').style.display=radioCollection.subcat_sumtype_time.checked?"":"none";
document.getElementById('subCatSumOptions').style.display=radioCollection.subcat_sumtype_sum.checked?"":"none";
document.getElementById('subcat_weekmonth_span').innerHTML=radioCollection.subcat_time_week.checked?"week":"month";
}

But it's a big form, with lots of nested options, and some elements can be triggered visible by several different options. So I'm looking for an elegant way to handle this without a million if..elses. Perhaps an array of element ids and which elements are allowed visible when that's selected.

View 4 Replies


ADVERTISEMENT

Show / Hide Form Fields Depending On Radio Button Selection

May 29, 2005

How to show and hide form fields depending on a selected radio button.

View 14 Replies View Related

JQuery :: Making Dropdown Show / Hide Depending On Selection

Jan 10, 2011

I have the following code that generates two dropdown boxes in a form, but I would like for the second to be hidden unless the first has 'Software problem' selected. Is it possible to do this?

<p id="parent-menu">
<select name='helpdesk-category' id='helpdesk-category' class='dropdown' tabindex="40">
<option value='-1'>Select a Category</option>
<option class="level-0" value="13">Software problem</option>
<option class="level-0" value="14">Hardware problem</option>
<option class="level-0" value="15">Suggestion</option>
<option class="level-0" value="16">General query</option>
</select>
</p>

<p id="toggle-menu">
<select name='software-category' id='software-category' class='dropdown' tabindex="50">
<option value='-1'>Select a Program</option>
<option class="level-0" value="6">BigHand</option>
<option class="level-0" value="7">IRIS</option>
<option class="level-0" value="8">MS Outlook</option>
<option class="level-0" value="9">MS Word</option>
<option class="level-0" value="10">MS Excel</option>
<option class="level-0" value="11">Oyez</option>
<option class="level-0" value="12">Internet Explorer</option>
</select>
</p>

View 2 Replies View Related

Show/hide Elements Of A Form Based On Drop Down Box Selection

Feb 13, 2006

I am setting up a contact form, and want to have a drop down box with a handful of options. Clicking one option should display fields to input username & password, whereas all others will not. So far, I've tried and (replacing 'none with 'block' for the option that is supposed to show the input fields) but neither does what I need it to. I'm fairly new to javascript, just muddling my way through with the aid of tutorials.

View 2 Replies View Related

Hide Fields Depending On Selection

Sep 1, 2009

In the following code I am attempting to get certain fields to only appear if the user Selects dependent else those fields should be hidden.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"[URL]">
<html xmlns="[URL" xml:lang="en" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Display and Hide</title>
<script language="JavaScript">
function showhidefield(){
if (document.HelpAdd.RecordType.value == "Parent"){
document.getElementById("hideablearea").style.visibility = "hidden";
} else {
document.getElementById("hideablearea").style.visibility = "visible";
} }
</script>

</head>
<body>
<form name='HelpAdd' action='nextpage.asp'>
<table align="center" border="3" cellspacing="0" cellpadding="3">
<tr><td>Record Type:</td>
<td><select id="RecordType" name="RecordType" onchange=showhidefield()>
<option value='0'>Parent</option>
<option value='1'>Dependant</option><br/>
<tr><td>Topic Title:</td>
<td><input type="text" name="TopicName" ID="TopicName" maxlength="25"></td></tr>

<div id='hideablearea' style='visibility:hidden;'>
<tr><td>Parent:</td>
<td><select name="Parent">
<input type="text" name="ParentID" ID="ParentID" maxlength="25"></td></tr>
<tr><td>Topic Body:</td>
<input type="hidden" name="MAX_FILE_SIZE" value="<?php echo $MaxFileSize ?>" />
<td><input id="helpfile" name="helpfile" type="file" /></td></tr>
</div>
<tr><td colspan="2" align="center">
<input type="submit" name="submit" value="Submit">
<a href="/help.php"><button>Back</a>
</td></tr>
<tr><td colspan="2" align="center">
<?php echo $Message ?>
</td></tr>
</table>
</form>
</body>
</html>

View 4 Replies View Related

Show/Hide Text And Form Field Based On Drop Down Selection

Jul 20, 2005

I'm trying to show/hide a simple piece of text and a text field on a
form based on what choice is made from a drop down box.

<select name="dropdown" size="1">
<option selected value="">Please make a selection</option>
<option value="1">Choice 1</option>
<option value="2">Choice 2</option>
<option value="3">Choice 3</option>
<option value="4">Other</option>
</select>

i.e. if Choice 2 is selected I'd like to display a new <tr> with the
following:

<tr>
<td>New text field:</td>
<td><input name="newField" type="text size="20"></td>
</tr>

if any other choices are made, I don't want to display anything.
I've tried several onchange() functions but can't achieve what I'm
looking for.

View 6 Replies View Related

Jquery :: Realtime Order Form - Change Form Elements Depending On Selection

Aug 25, 2010

I've been struggling trying to get a small order form to work the way I want it to. Here is a link to the live page: [URL] And here is the code in question:

[Code]...

I have two questions...

Question 1 How can I make this piece of script act a little smarter. Look at the order form, I'm catering for up to 4 people and providing lunch for them. If they select 3 people and the spaghetti bol for lunch, it's only adding $10 where it should be adding $30. Obviously this is simple multiplication but since the values in my form are prices it makes it a little tricky. I'm guessing an onselect on the first part of the form which changes the pricing of the other items would be the way to go, but how do I do this?

Question 2 The "Total Price" is placed before the <form> tag by the script. This is ok but it's not where I want it. How can I position this text elsewhere in the document?

View 3 Replies View Related

Show Hide Table Row Depending On A Variable?

Jan 28, 2010

I have a multipage form. I can put data entered in hidden form elements from previous pages. I want to show or hide table rows depending on this data value.
For example, I collect a list of names in first form, but if some names are blank I dont want to show the table row associated with that name to collect more data.
I have seen loads of code to toggle rows but cant find any which shows me how to toggle on a variable.

View 2 Replies View Related

JQuery :: Show/hide DIV Elements Depending On Select Value?

Aug 4, 2010

how one can show and hide a div element using a pulldown menu. i need the different selections in the pulldown menu to show hidden DIV elements on the page. this will be used in a system where i only have access to the template, so the only approach i can use is jquery. how to change it for the specific selectors i need.

<!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>

[Code].....

View 2 Replies View Related

Table Row Show/hide Depending On The Contents Of A Variable?

Feb 3, 2010

I want to get javascript to show or hide a row in a table depending on whether a value is held by a variable collected in a mulitple part formmail. If only 1 adult fills in their name on the earlier form there is no need to show the row which asks him to agree to membership on a later form page. This is what Ive got so far<form name="frm3" method="post" action="bookingscript.php">

<input type="hidden" name="adult2fn" value="$adult2name" />
<script Language="JavaScript">
var name1 = document.frm3.adult2fn.value;
if(name1 =="")

[Code]....

View 7 Replies View Related

How To Hide/show The Rows Of A Table Depending On The Value Selected By A User From A Drop Down List??

Feb 15, 2006

I am maintaining a site which is written in ASP. Now i have to create
some new pages.

In one page we have a table with many rows. Now, I want to enable or
disable(showing and hiding also) 2 rows of this table depending upon
the value selected by the user from a drop down list.

View 4 Replies View Related

Show / Hide Table On Selection?

Nov 17, 2011

I got a selection tag which pulls values from DB to populate,i want to hide or show related div/table based on the selection. now i got two confusions. how can i know what is selected coz the option tag value is coming from DB, also i never work with show/hide thingy. how can i achieve it?

View 6 Replies View Related

Toggling Hide/Show On Radio Selection?

Aug 15, 2011

I have a calculator that I want users to be able to select a radio option that will display the coresponding calculator and hide it when the other radio button is selected in other words I want to only have one visible div at a time. How would I do this?

Here is my Javascript:

HTML Code:
<html>
<head>
<script type="text/javascript">

[Code]....

View 2 Replies View Related

Show/Hide Buttons Based On Radio Selection

Jul 20, 2005

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.

View 3 Replies View Related

Show - Hide Div Based On Radio Selection - Prototype

Apr 27, 2010

I 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.

View 1 Replies View Related

Show/hide Several Elements Based On List Selection?

Jan 26, 2009

I got a table.Each row has a list of statuses.If status == yes, then several elements will be shown in the rowif status != yes, then hide those elements.Im not sure if I have made a good solution, but it seem to work ok (opera9.6, ff2, ie7)The status selector passes on a unique rowid, and itself. This way the js function can get the row, and the status of the selection. Then toggle various elements in that row.Only annoying thing is the way row elements are named and found. It kinda have to rely on some hard coding, but its ok I guess.Im not sure if its possibel to just call toggle( this ), and that way get to the elements in the row.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

[code].....

View 7 Replies View Related

JQuery :: Show / Hide A <div> When Changing The Selection Of A Radio Button?

Mar 2, 2010

I want that a <div> element will show when yes is selected and when no it should be hidden. For show and hind i will use the functions from the jQuery UI. But I don't find a way to call the hide / show function when the selection change.

The radio selection: <input type="radio" name="lang_anz" value="1"> Yes<br> <input type="radio" name="lang_anz" value="0" checked="checked"> No<br> When I understand the documentation I can request the current value from the radio with: <script type="javascript"> $('input:radio[name=lang_anz]:checked').val(); </script>But how i can now call the show / hide function when I change the selection?

View 1 Replies View Related

Dropdown Menu Hide Or Show Content Based On Selection

Nov 26, 2009

I'm pretty bad with Javascript, but I need to hide or show a snippet of text (could be inside a div without problems) based on the selection of a dropdown menu (<select>). If they choose anything with the word "Series" on it, I need to show the snippet. If they choose anything without "Series" on it, then the snippet needs to disappear. I should mention the snippet is part of a form, just a checkbox but that shouldn't be a problem I don't think.

View 24 Replies View Related

JQuery :: Submit A Form Depending On Success Data Of An Internal Ajax Post?

Jun 14, 2011

I would like to submit a form depending on the success data of an ajax post.

Below is my jquery code; as you see #theform is the main form and before submitting the form I need to check the availability of the the date and time and the room using$.ajax. However it doesn't submit the main form if the date, time and the room is available.

required=["txtCal_Event_CalendarID","txt_TreatmentRoom","txtTreatmentID","txtTreatmentTypeID","datepicker1","datepicker2","timepicker1","timepicker2"];
emptyerror="Please fill out this field.";

[Code].....

View 2 Replies View Related

Show/hide Data On Label Click?

Feb 27, 2009

I am creating a static(only raw data) web site and want to show a panel as following.

Contact us panel

label1
Label2
Label3

when label1 click it would show as below

Label1-> on click Label 1
Label 1 details
abc location bla bla

how i can achive funtionality to click on label 1 and show details data and again clicking hides label1 data I am using page breeze html editior, Is it possible i can use java script functions in it,

View 2 Replies View Related

JQuery :: (.) Period In Value Field - Show/hide A Div Based Based On The Selection Made Via A Dropdown

Apr 9, 2010

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.

View 4 Replies View Related

JQuery :: Show / Hide Elements Or Remove / Add Elements Based On Radio Selection By User?

Mar 14, 2010

I have a page I am working and I am having some trouble with: I need to show and hide areas based on a radio selection. I initally started using the show / hide feature in Jquery but the problem is the elements need to be removed but then put back if the user selects the radio buttonagain as it has form elements that have validaion on them. The validation is still trying to validate the form elements becuase they are still on the page but just not showing. This is the radio group the user makes the selection from:

<input name="terms_usr" type="radio" id="terms_usr_1" value="1"/>
<label for="terms_usr_1">Credit Card</label>
<input type="radio" name="terms_usr" id="terms_usr_2" value="2"/>
<label for="terms_usr_2">C.O.D</label>

[Code]....

View 3 Replies View Related

Hide Forms On Page Then Display Form Based On Option Selection?

Nov 17, 2010

I want to have several forms on one page that are not displayed until a selection is made from the category drop down box(select element). The form displayed will depend on the selection made. Here is the code I have so far.

<body>
<label id="Label1">ADMINISTRATOR CONSOLE - ADD AND EDIT ASSETS<br />
</label>

[code]....

View 3 Replies View Related

Hide Forms On Page Then Display Form Based On Option Selection

Nov 17, 2010

I want to have several forms on one page that are not displayed until a selection is made from the category drop down box(select element). The form displayed will depend on the selection made.

Here is the code I have so far.

View 1 Replies View Related

Change Second Menu Depending On Selection In First

Feb 15, 2009

Basically I have a form, with two simple select menus, both identical except for different name values to post:

HTML Code:
<p>Make current?</p>
<select name="is_current">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
<br />

<p>Put in list?</p>
<select name="in_list">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>

Some PHP code governs whether the "yes" or the "no" option in either menu gets the 'default' "selected="selected" showing, based on database information. For instance, in the first menu, if the page deals with a case where the the first "is_current" value is indeed current, then the PHP code will write the default "selected="selected" for "yes":

HTML Code:
<select name="is_current">
<option value=yes" selected="selected">Yes</option>
<option value=no">No</option>
</select>

If the page deals with a case where the value isn't current, the selected="selected" code will be written for the "no" value instead. The same goes for the second select menu. Now, the logic of my situation requires that, if the user selects "Yes" in the first "is_current" drop-down, then only "Yes" should be available to select in the second "in_list" menu. Anyway, I don't know javascript very well, but I found a function that seemed to be able to do this.

Code:
<script type="text/javascript">
(function () {
function updateLevel() {
var limit = Number(this.value);
// find the next select element
var selects = this.form.getElementsByTagName('select');
var select;
for (var i = 0; i < selects.length; i++) {
if (selects[i] === this && selects[i+1]) {
select = selects[i+1];
break; .....

(Apparently the script has to be put or called just before the </body> tag at the end of the page.) Then the select menus are recast as:

HTML Code:
<p>Make current?</p>
<select name="is_current" id="in_list">
<option value="1">Yes</option>
<option value="2">No</option>
</select>
<br />

<p>Put in list?</p>
<select name="in_list">
<option value="1">Yes</option>
<option value="2">No</option>
</select>

Now this appears to work, up to a point. If the user selects "Yes" for the first "is_current" selection, then only "Yes" becomes available for selection in the second "in_list" menu. A posted value of "1" represents "yes", and a value of "2" represents "no". Except, in Firefox, the javascript somehow overrules the default selected="selected" code. That is, the source code in the browser is correct, but the javascript draws it incorrectly.

For instance, say the database/PHP has drawn selected="selected" for the value "yes" in the second menu. Even though I can see that the source code is OK in the browser, the javascript will make the browser show a "No" selection as the initial default. This happens in Firefox, though not in Safari, and I haven't tested other browsers yet. This may be obvious but I'm not sure of javascript.

View 11 Replies View Related

DropDown List Popup Depending On Selection?

Oct 27, 2010

Here is my dropdown menu:
<select name="peeps">
<option value="Frank Tompson">Frank Tompson</option>
<option value="Henry Wilson">Henry Wilson</option>
<option value="Bill Kent">Bill Kent</option>
<option value="Jessi McDonald"> Jessi McDonald</option>
<option value="John Hays">John Hays</option>
How can I make it so if I click on John Hays a JavaScript pop up will say Hello John Hays, and if I click on Bill Kent a popup will say hello Bill Kent and if I click on any other name nothing happens?

View 3 Replies View Related







Copyrights 2005-15 www.BigResource.com, All rights reserved