Show / Hide Form Fields Depending On Radio Button Selection
May 29, 2005How to show and hide form fields depending on a selected radio button.
View 14 Replies
ADVERTISEMENT
Show / Hide Depending On Form Selection - How Best To Arrange Data
May 13, 2009I 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.
JQuery :: Show / Hide A <div> When Changing The Selection Of A Radio Button?
Mar 2, 2010I 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?
Hide Fields Depending On Selection
Sep 1, 2009In 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>
JQuery :: Pass Radio Button Selection To Hidden Div And Then Show Div List From Chosen Radio Button?
Mar 16, 2010I am a PHP programmer and new to Javascript and jQuery and I have tried about 20 examples/tutorials and cannot seem to get even close to what I want.I have a form (PHP/MySQL) with a list of subjects I got from my database, and then create a set of radio buttons from that list. And based on what radio button they select, I need to pass that variable to a div (at least that's what I want to use) and then show a list of videos that match the radio buttons value. I don't care if its a get or post or other.I tried to use GET or POST so I can use that value for my PHP/MySQL lists.I am open to any suggestions/tutorials, etc.
View 1 Replies View RelatedJQuery :: Making Dropdown Show / Hide Depending On Selection
Jan 10, 2011I 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>
JQuery :: Show/hide Form Elements Based On Radio Button Selections ?
Mar 17, 2011I have a set of radio buttons on my pricing page:
And a corresponding text_field input element div I'd like to display based on which radio button the user selects:
When the page loads, I'd like to see:
When the user clicks on a (different) radio button, or clicks one for the first time, I'd like whichever div is currently showing to be hidden, and the newly selected one to be shown.
Right now I have jQuery code at the bottom of my page that looks like this:
For each of the four options.
When the page loads, the correct div is shown, and when I select a new button, the new div is shown, but the already showing one isn't hidden.
I've read some posts that suggest using change() instead of click(), but others indicate that's problematic in IE.
Toggling Hide/Show On Radio Selection?
Aug 15, 2011I 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]....
Show/Hide Buttons Based On Radio Selection
Jul 20, 2005I 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.
Show - Hide Div Based On Radio Selection - Prototype
Apr 27, 2010I 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.
Show Dynamic List With PHP Using A Radio Button Selection
Mar 15, 2010I have a form with a list of subjects (radio buttons) that I get from my database with PHP, and I want to show a list of videos (also from my video table using PHP), based on which subject they choose.
I have tried multiple POST, GET methods with JavaScript examples, but cannot get it to work. I am not having any issues with the PHP getting either list, it is just getting the radio buttons to pass either the POST or GET data to JavaScript, and have it take that value so I can get the list from my database with PHP. I tried to use a div for the list of videos, and didn't have much success.
JQuery :: Validate: Check Certain Form Fields Depending On Button Pressed?
Feb 4, 2011I have a form with a series of fields. Only certain fields need to be validated when certain buttons are pressed. The reason for this is mainly because I had to build my own wizard style setup with jquery so, even though it's one big form, only certain bits need to be checked as they progress. I tried to tweak the accordion example given by the creators but it can't really apply to my scenario.
I've simplified the code down a bit and it is behaving exactly the same way as the big form...which is to say it's not behaving at all.
In this code, I want it to only validate field txt1 if button 1 is pressed and text2 if field 2 is pressed. One odd thing to note, when I set it up exactly as the site recommended with one big mass validation and such, it would only acknowledge the existence of the first field even though they both had class="required" on them.
<!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].....
Show And Hide Radio Button?
Sep 17, 2010I have to 2 radio buttons and two hidden divs. How would I be able to show and hide them depending on the selection I've chosen?
View 4 Replies View RelatedForm With Radio Buttons To Hide Fields?
Feb 12, 2011I have a form which has two radio buttons at the beginning which show and hide fields depending on what button is clicked:
I want to adapt this js and html code so that when the page loads it checks whether one of the two radio buttons is clicked and depending on that it displays/hides the divs which are declared in the current function, at the moment it performs this when the user clicks one of the radio buttons but I want to perform it when the page is loaded and also when the user first enters the page I want the yes radio button to be selected and obviously show/hide
[Code]...
Very Basic Show/hide Div With Radio Button?
Apr 2, 2009i have made this request as simple as possible.When my page loads I would like div1 and div2 to both be hidden
If user clicks Div 1 radio then
div1 = visible
div2 = hidden
[code].....
Form Action Url Selection On Radio Button Value
Jul 5, 2005I have 2 radio button first is a and second is b.
If a is selected then the form action should be a.php or b is selected then b.php.
Any idea how to do this. I don't want to this in server side script.
JQuery :: Show/hide On Radio Button Click
Aug 4, 2009I'm trying to do a show/hide on a radio button click and I do have it working, but I'd like to make it more...extensible/independent of hard- coding children elements to show hide.
My dummy html structure is:
I left some commented out stuff at the top of the function, hopefully to give you an idea of what I tried.
In particular:
I was trying to get the first ul (the children to show/hide) on "this" (the radio button clicked). I'd like this to be flexible to where you could add more radio button/children and as long as the structure stays the same, the show/hide functionality works.
Show/hide Div Based On Radio Button Select
Jul 12, 2007i 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 RelatedJQuery :: Show / Hide Elements Or Remove / Add Elements Based On Radio Selection By User?
Mar 14, 2010I 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]....
JQuery :: Hide/Show Based On Radio Button Selected?
Sep 14, 2009I am trying to create a script that will display content based on if aradio button is selected, and if the other is selected would hide thecontent. Now, each of these radio buttons are part of a radio group,so their names are the same. Most examples show nput:radio[@name=item] Since I have 2 items that have the same name, I can't usename, so I thought I would try id or value. It isn't working. If I addonly the show, whenever you select either radio button, it shows, andif I add the hide code, it doesn't work at allHere is what I have right now.
$(document).ready(function(){
$('#offices_checkboxes').hide();
$("input:radio[@value=1]").click(function() {
[code]....
Show/hide Elements Of A Form Based On Drop Down Box Selection
Feb 13, 2006I 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 RelatedShow And Hide Form Fields?
Mar 23, 2011I have a drop down selection where it shows and hides form inputs depending on selection. When the page loads it shows the drop down selections with no form inputs. After user selects drop down it shows the form fields. It works great but I want it to show the same form fields after the user hits the submit button which submits the page to itself. It currenlty goes back to the default selection list and doesnt show any of the form fields. Basically it hides all the form fields after the user hits submit button. How do I make it keep the last shown form fields after the user hits the submit button?
test3.html looks like this:
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Show/Hide</title>
<script type="text/javascript">
[Code]...
Hide/unhide Fields Depending Upon Other Fields?
Apr 26, 2009i have to hide/unhide some fields on basis of some other fields. i found this script on the web.i can't understand the function completely what is the if ( txt.match(id1) ) block doing ?? is there any other way of doing the same...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
[Code]...
Display Specific Input Fields Depending On Combobox Selection?
Nov 5, 2009Within a classic asp webform (using vbscript) I would like part of the form (input boxes within table structure) to be specific/displayed depending on the users selection from the combo box in the row above.
I think the best solution would be using Javascript can anyone suggest a solution or example code?
Show/Hide Text And Form Field Based On Drop Down Selection
Jul 20, 2005I'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.
Show / Hide Div Layer / Change Link Color / When Radio Button Is Selected
Aug 16, 2010I am trying to develop an exam system.Find my code below.I request you to copy the code and save it as an html file .I have 2 problems:
1. Kindly notice that when the quiz is loaded,it shows both the questions by default.I want only question 1 to be visible when the quiz loads.What happens presently is that ,both questions are visible even after I click on the link
Q.1( referring to question 1).However,when I click on
Q. 2,then only question 2 can be seen and then(after clicking on Q.2) if I click on Q.1,then only question 1 can be seen
What I want is that when the page loads only question 1 is visible.Then when I click on Q.2,I can see only question 2 and when I click on Q.1, I can see only question 1.I later plan on adding many questions,so it should be a general solution rather than a solution good only for 2 questions.
2.Also,what I want is that,if someone selects any of the answers of a particular question,it's link color should turn green to indicate to the user that he answered that question.So for,instance,if I select an answer to the first question(select one of London,New York,Seattle,Washington,Chicago), the link Q.1 should turn green.