JQuery :: Hiding Empty Form Option Fields - Working But Inelegant?
May 11, 2009
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,
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.
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.
I am trying to test a form whether the fields are empty or not. If so, displays warning, doesn't proceed. Here is my javascript , and the forms.
/* Validate Forms */ function validate(){ var notify = document.getElementById('notification1'); if ( null == document.getElementById('usrname').value ||
[Code]....
The problem is it works only for the passwd, but not for the usrname, meaning when the username is empty it shows the message as i wanted but right after showing the notification, it is going to the action page. Since it is returning false, it is not supposed to proceed. For passwd, it is fine, it shows the warning and stops without proceeding action.jsp.
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.
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'm using a Javascript gallery (runs on Prototype library) that populates a caption field if the user has entered a caption for an image.
I need a little bit of code to hide the caption's div entirely if the user hasn't entered a caption for a particular image (var 'caption' is empty).
It's the bottom-right white box below the image, you'll have to click over to the second page of the gallery (NEXT) to see an example of an empty one that I want to hide:
[url]
Here's the CSS:
Here's the HTML:
I'm sure this isn't that hard, but I've spent more time trying to get that caption box to hide than setting up the gallery.
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.
I am using the validate plugin with the defaultvalue plugin (empty fields given a default value and class of empty), and would like to use it together with the validator plugin. Is there a way to mark required fields with only the default value (and class empty) as invalid on submit? E.g.: First_name field is required by validate, has a default value of "Enter your first name" and class of "empty" - how can I get the validator to mark this as invalid?
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 }});});
I know someone will enjoy rewritting this chunk of code for me and the community! It's a simply cookie to remember the position of an animated panel so it stays open (or closed) after a page reload. It is working*, but I am sure it can be shorte*Actually it's not perfect, when you close the panel you lose the button altogether until another page refresh! Long code that doesn't work!
I am building a registration page . If the user completes all the required field i load the info into the database but if there are missing fields I combined some javascript into php to display next to the empty field a note that it should be filled. This is my code...
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?
I am trying to check and see if three fields are empty and if they are then to alert the user saying to fill in one of the three fields. I tried this:
if (StreetNumber.value.length == 0) { if (StreetName.value.length == 0) { if (City.value.length == 0) { alert("Please enter a street number, street name, or city.");
I am trying to throw in some client-side validation to my php web form. My problem is that only one field is actually getting validated. Here is the code:
Form: onSubmit="return checkForm(this);"
script: function checkForm(form) { var firstname = document.getElementById("wpFirstName").value; var lastname = document.getElementById("wpLastName").value;
The if statement evaluating the last name field is the only statement that evaluates to true. It seems the first statment is bypassed. Any ideas? PS. the element with the id lastNameError/firstNameError is in a div tag.
I'm using a web form with php. I want, that when user clicks submit button and it will be an error (some fields will be empty) then I want it to show a little popup window... A simple javascript popup window generator don't fits me, because I have a php function:
Code: <?php if( !$isHideForm ): global $sErr ; if( $sErr ) print "<br><a name='error'></a><center><font class='form_error' > $sErr</font></center><br> HERE SHOULD BE MY AUTO POPUP WINDOW"; $starColor = $sErr ? "#ff0000" : "#000000"; $style=" class='form_text' "; ?>
I am building some JS and would like to share my limitation. This is the code: Code JavaScript: <script language = "Javascript"> function onComposeSubmit() { var formDOMObj = document.Login; var TrocaImagem if (formDOMObj.email.value == "" || formDOMObj.anexo.value == "" ) alert("<%response.write Idioma.Item(Session("Idioma")&"_10")%>") TrocaImagem= "1" else TrocaImagem="0" return true; return false; // change button if TrocaImage="1" document.getElementById("submitButtonDiv").style.display = "none"; if (navigator.appName == "Microsoft Internet Explorer") { document.getElementById("progressBar").innerHTML = ""; document.getElementById("progressBar").style.display = "block"; document.getElementById("progressBar").innerHTML = "<img src='img/progressbar.gif' alt='Progress Bar'>"; } else { document.getElementById("progressBar").style.display = "block"; } else } </script>
Things I am trying to Do: - Check if email field isn't empty and check if the anexo field isn't empty. Actually I would like to have it separeted but I dunno how to do this. - If email and anexo isn't empty run the change button part of the code, witch will change the submit button for a progressbar.gif image. Actually this part of the code works great but without the field validation above.
I have a CMS website that has a pop up upload panel that you use to upload a file into the website. It has a location field which you press browse to locate a file on your computer and then the field will be filled with the pathway to that file and it has an upload button.You locate the first file, press upload, and then the upload panel closes. You then try to upload following files, when the upload panel opens, it has the pathway of the old uploaded file in the location field. This can become very annoying having to manually delete it each time.What I would like to do is whenever the upload panel is opened, that the field will be empty.
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") {