In my list box if i select one item corresponding to that 4 fields has
to be appear below the list box and if i select another item only 1
field has to be appear below the list box and if i select another item
no fields has to be selected.
First post here - I am trying to hide options in a form select field if they are empty. The code below works...but even I know it must be a horrid way of doing it! Anyone care to tidy it up for me? I would learn much from the experience,
[Code]...
I'm working on an ordering form which calculates the total order price using Javascript. I have a checkbox which I want to use to toggle the display of various items, and also reset the value of an item depending on whether or not it is checked.
Further details
I have a checkbox for the colour "Black" which, when checked, hides a SELECT, a bit of text, and "Quantity" field. It also resets the value of the "Quantity" field to zero.
When the "Black" checkbox is unchecked, the three items (SELECT, text and Quantity) are revealed again, and the Quantity field for "Black" is reset to zero and hidden.
The reason is that users can only either EITHER a black item or select from a list of colours. Black items are a different price to all others.
How the form works
When the user enters a quantity into a text field for each item, the price of that item is added to the total at the bottom of the form. When the form is submitted (with PHP validation), it emails the order to a salesperson. The price of each item (for emailing the order) is set using hidden form fields with defined values, while the order total is calculated using the id of each quantity field (e.g. "item_31_85.00").
What I need to know
I want to achieve the following when the "Black" checkbox is clicked:
Toggle the display of three items (SELECT field, text (in a DIV) and an INPUT)
Reset the value of the INPUT field (and reset a different INPUT when the checkbox is clicked again)
My current code
The code I'm currently using in the PHP form is below (truncated for readability):
Code:
<input type="checkbox" name="black" onclick="togglecontent('colour_box','colour_price','color_quantity','quantity_reset')" /> Black
[Code].....
Currently I can hide the SELECT and accompanying text when I check the "Black" checkbox, but it won't reset the INPUT value nor hide it. I've not yet attempted to do unhide and hide the Black text and input since I can't get this part working yet.
I have a contact info form with about 16 fields. I need to hide a subset of fields for address when the end user either (1) tabs out of the subset group, (2) clicks anywhere outside the subset field group.
I do not want to hide the fields when the end-user is tabbing within the subset of address fields, yet the focusout handler is triggered when it shouldn't be.
[Code]...
So the following code hides/shows fields in a form when radio buttons are clicked, the problem is on the same form I have a checkbox and when said check box is selected the showing and hiding of the fields doesn't work.
Code:
<!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">[code]...........
I am having a problem with a simple javascript validation routine for a drop-down list, which works fine when there is only one form on the web page, but breaks when another form is added. I am new to javascript, so I expect this is a simple error in syntax.
When there was only one form on the page: Code:
I have some form fields that the user can either type in or he can check a checkbox so that MySQL data for an option selected from a dynamically generated (PHP/MySQL) select menu is filled in. How can this be implemented? I have the code for the select menu.
View 3 Replies View RelatedI need to be able to change the fields of a form based on a drop-down list. Like if someone picks option A field 1 shows and if they change it to option B field 1 and 2 show up without reloading the page.
If you need me to explain more I will try to do a better job. If I could be pointed in the general direction that would be great, I dont exactly need to be spoon-fed, although I do like spoons if you catch my drift .
rm validation! I want this to be validated upon selection of the drop down list (not when it comes to submit button)I have 2 drop down lists:Starting date (June 5th, 6th 7th)Ending date (June 5th, 6th 7th)I want to write a script that would NOT ALLOW one to choose:- Starting date June 6th and Ending date June 5th- Starting date June 7th and Ending date June 6th- Starting date June 7th and Ending date June 5th
View 6 Replies View RelatedI have an select option list, each option has a numerical id, value and text. Each option has an array of its own. So when I choose an option from this list, I want to insert the options array into another option list with an id, value and text. Whats the best way of doing this? How do I select an array based on the value or text of a select option? For for example, take a list of car makes. If I choose the make Audi, how do I select the array of Audi models and insert these models into another select option list. All makes and models have their own numerical id, value and text.
View 9 Replies View RelatedI want to hide/show div's in my HTML depending on the selected option of a listbox. I don't know what I'm doing wrong.
Code:
<HTML>
<HEAD>
<SCRIPT type="text/javascript">
function SwitchHiddenDiv(){
switch
[Code]...
Basically, I need the script to hide two divs if one of the options in a <select> menu is selected.
Here's the code I've got for the Javascript:
function typeoflisting() {
var selectform = document.getElementById('propertytype');
if (selectform.options[selectedIndex].value == "sell") {
[Code]....
I am creating a simple web form and am having trouble with a quick jQuery script I am using. A few of the fields on my form are not needed if the topic is not "Get a Quote" so I have a script that hides them if "Get a Quote" is not selected in a dropdown box. I does hide them if I select something else but when I go back to "Get a Quote" the fields do not reappear.
$(document).ready(function(){
$("#CAT_Custom_169338").change(function(){
if ($(this).val() == "Get A Quote" ) {
$(".showmore").slideDown("fast"); //Slide Down Effect
} else {
$(".showmore").slideUp("fast");
//Slide Up Effect
}});});
There are two input fields in a form, but only one of them is required, they are not required at the same time. Either A or B is required. ( A is required OR B is required). In other words, a user can input data to field A, or he can input data to filed B, but he can not input data to Both A and B at the same time. How to implement this constraint in Jquery form validation?
View 17 Replies View RelatedI have a form that uses jeditable to edit-in-place several fields and select boxes. Everything is working great. Now I need to a way to add a new option to the select list. What I would like is the user select "Add New..." from the select list that would pop-up a dialog window where several fields are filled in. When the form is saved the select field is updated with the new ID and description. I use Facebox for pop-up windows to display notes when the user clicks on a topic. I know Facebox can be used to display a form. It would be ideal to use this ability when creating a new option for the select box.
View 1 Replies View Relatedive just got this script ive got set up and it works fine, but not what i expected.i want it so i have headings and when i click those headings sub headings show up and when i click on that heading again they dissapear however i also want it so that you can have multiple headings open at once .how would i be able to modify this code so that if i have say sub1 open and i click to open sub2 sub1 remains open
var persistmenu="yes" "yes" or "no". Make sure each SPAN content contains an incrementing ID starting at 1 (id="sub1", id="sub2", etc)
var persisttype="sitewide" enter "sitewide" for menu to persist across site, "local" for this page only if (document.getElementById){ DynamicDrive.com change[code].....
This is my FIRST attempt at using Jquery to make a site menu for a client, and I'm pretty new to Javascript as a whole..I have a two column horizontal menu, and when an anchor on the left column is clicked it brings up a list in the right column..how do I hide list in the left column when a different anchor is clicked, bringing the new list to the top of the column?
<style type="text/css">
ul.nobulletnoindent {
list-style-type: none;
[code]....
Let's say I have two lists for menus and one list for sortable content.
If I click on "A" in the #type list, the content list is sorted, the li's with the classes "B" and "D" are hidden by attaching a class of .hidden to display:none. In turn becoming:
My question is, how do I apply the new content results to the #location menu? If "B" and "D" are hidden then numbers "3" and "4" shouldn't be displayed. I'm having trouble getting the two to talk to each other. I've tried .is(':visible"), .each(), etc. and can't quite crack it.
I have a form, what I want to happen is that a user clicks a checkbox and a list appears or is enabled so that the user can then select a option. Also when the checkbox is unchecked again, I want the list to disapear or become unabled and it's value set back to whatever was the default.
After a bit of looking around I thought I has done it, but no luck. Can anyone let me know whats going on here? Code:
I am building a sort of tree view in javascript with items that can be expanded and collapsed (with default being collapsed).The problem is the page can get very large, and the user sees the the browser render the list with all the items expanded, and then sees them all collapse after half a second.[/quote]You could use a setInterval in the head section that's on a tight loop, that waits and watches for the tree, then hides it and removes the setInterval process.
View 2 Replies View RelatedI've built a tool where users can search for something & the results show up in a select list as selectable options..... sometimes the results can take a few seconds to load depending on how many results there are... so I was attempting to show some "Results are loading" text when they search, & then hide it when they are displayed.
However for some reason it's not working correctly.. both commands don't appear to work until the select list options have loaded & hence rendering them redundant.... I have tried putting them inside separate functions but no change in the behavior.
What basically happens is I press the button to search & it searches & once the results show up so does the loading text.... however if I include the hide text command then the text doesn't show at all as it's hidden as soon as it's shown.
Here is the code I am using..
function searchCats(text) {
// Set URL for ajax request
var url = 'search_cats.php?search_text='+text;
// Set up element we're modifying
[Code]....
I have a simple HTML:
<tr><td><div class="panel">Click me 1</div></td></tr><tr><td>...</td></tr>... several tr's to be hidden on Click me 1 ...<tr><td>...</td></tr>
<tr><td><div class="panel">Click me 2</div></td></tr>
<tr><td>...</td></tr>
[Code]....
Is it possible to write jQuery code that will hide all <tr>'s that's under the <tr> with <div> (Click me 1) inside them? But not to hide those that's under the <tr> with <div> (Click me 2).
Class name "panel" must be same for all clickable <div>'s. <tr>'s and <td>'s can't have any class or id.
The following code works perfectly in FF, Chrome, and IE7, but in IE8 the two tab divs do not hide (or then show; they are visible) with clicking the tabs.
html4strict Code:
<div class="tabbed sermons">
<ul class="tabs sermons">
<li><a rel="tab1" href="#" onclick="donothing();return false;">Sunday Mornings</a></li>
[Code]....
I can't see why this would not work in IE8. I am not familiar with all the CSS changes in this new browser, so perhaps that's the issue? Again, the tabs never hide and clicking the tabs does nothing, so I'm guessing that section of script is not doing anything.
I would like to know if there is a way to keep the script as is but also add a function to this script so that if a user clicks on another tab (div) the open tab will close on click? Please see code below:
<!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].....
I have a select dropdown with several options. The user selects an option and fills out the following few fields. If the user then changes his mind and changes the option in the dropdown, I want all the fields - or just the ones already filled out - to be cleared.
Note: reset() of the form is not an option as there are other things going on (hide/display of fields based on the dropdown option selected).
I'm getting started with jQuery. I want to write a form where I can add and hide fieldsets.At the end there is a button "add Theme". If I click on it, the next fieldset whose display is none should be shown. And every fieldset except the first one have a button remove. This is my code, but it doesn't work .
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>[code]....