Javascript on change event

**warlordste** · 10-26-2010 05:47 AM

Hi guys how you all doing i was wondering if anyone could give me abit of help I have a form for a quote system where the person can request for the item to be delivered or picked up which i have set in a list box with yes and no as the values i was wondering how can i get it so if it changes to yes the javascript show the options for delivery address and if it changes to no it hides this infomation?

**misson** · 10-26-2010 07:34 AM

Firstly, a checkbox (<input type="check" .../>) is more natural than a select when the options are yes/no. Second, if you're asking how to show or hide an element, you can set the element's display to 'none' or (better yet) create a class that has a display of "none". To hide an element, give it the hidden class; to show it, remove the class. Note that if you're using a JS lib (such as jQuery, Prototype or MooTools), it should have functions that hide and show elements. Such libraries offer many benefits, such as animating hiding or showing of the element (sliding into place is less unsettling than simply appearing and disappearing, hence a better user experience).

**xpsystemservices64** · 10-27-2010 07:38 AM

The "onchange" event is calling when control loosing the focus. Use "onclick" instead "onchange".

**lemon-tree** · 10-27-2010 07:58 AM

Actually, even if it is calling on loss of focus (Although I don't think it should be), you should still use onchange and then within the called function check what the state of the checkbox is using the .checked property of the element. You should never just assume that because it has been clicked that it is now checked, so you should always include an actual verification of the element. Here is a very crude example that would work but isn't technically the best way:

HTML Code:

<html>
	<head>
		<script type='text/javascript'>
			function checkChange(element){
				if(element.checked === true){
					//THE ELEMENT IS CHECKED
					document.getElementById('customerAddress').style.display = 'none';
				}else{
					//THE ELEMENT IS NOT CHECKED
					document.getElementById('customerAddress').style.display = 'block';
				}
			}
		</script>
	</head>
	<body>
		<label><input type='checkbox' onchange='checkChange(this)'/>Collect?</label>
		<div id='customerAddress' style='display: block'>
			123, This Street<br/>
			That Town</br>
			Etc
		</div>
	</body>
</html>

You can test this script out here.

Edit: Just checked in Safari and the onchange event definitely isn't being called on loss of focus, so something is up with your browser. I could check a whole bunch more, but I don't feel it would be worth the effort.

Edit 2: Altered the code to show how you could use it.

**essellar** · 10-27-2010 01:10 PM

Originally Posted by misson

Firstly, a checkbox (<input type="check" .../>) is more natural than a select when the options are yes/no.

I'm going to assume their was a small stroke in progress as you typed this (because I know for a fact that you're not an idiot).

For those who don't know better: a radio button set is what you'd actually want under these circumstances.

HTML Code:

<input type="radio" name="fieldName" value="Yes" id="fieldName_Yes" /><label for="fieldName_Yes">Yes</label>
<input type="radio" name="fieldName" value="No" id="fieldName_No" /><label for="fieldName_No">No</label>

Why? By convention, a radio button set must always have exactly one choice selected from the list. A checkbox set, on the other hand, will always allow zero or more items to be selected. Although you can enforce an "at least x choices" or a "not more than x choices" policy during validation of a checkbox, there's never a guarantee that anything is selected, or that mutually-exclusive selections cannot be made at any point in time. Mutually-exclusive selections from a small list of choices (say a half-dozen at maximum) should almost always be represented by a radio button set.

As for when the onchange event fires, it depends on the widget. Radios, checkboxes and selects fire an onchange immediately when they change value. Text and textareas won't do that -- it would be silly to fire an onchange with every keystroke while a user is typing away madly -- the onchnge event fires when the user is finished with the field, and that is indicated by moving focus out of the field (onchange normally fires immediately before onblur).

**descalzo** · 10-27-2010 04:07 PM

Originally Posted by essellar

I'm going to assume their was a small stroke in progress as you typed this (because I know for a fact that you're not an idiot).

For those who don't know better: a radio button set is what you'd actually want under these circumstances.

Wrong. Not when the choices are Yes/No or Off/On.

If you have two choices of say, 'Oatmeal' and 'Bacon and Eggs', then radio button set would be better

It's not 100% clear of what OP's 'options' would be.

**lemon-tree** · 10-27-2010 04:33 PM

It ultimately depends upon how he wants to word this:

• If it is worded, 'Would you like to collect from the warehouse?' then a checkbox may be more suitable.
• If it is worded, 'How would you like to receive the product?' then radio buttons with 'Collect' and 'Delivery' would make more sense.

There is no definitive right or wrong answer in this situation and it is really up to the taste of the user and how they want the interaction to take place. You could probably find some UI guide that would give you a suggestion, but those are talking in a very general case and don't really help with specifics.

**warlordste** · 11-01-2010 09:29 AM

Hi guys this is what i have so far in my code and its this i want to hide inless the box is selected

HTML Code:

  <p>How would you like to receive the product?:
  <select name="delivered">
  <option value="sorted">Delivery</option>
  <option value="no">Collect</option>
  </select>
  </p>
  <p>
  <label>Delivery Price
  <input type="text" name="deliveryprice" />
  </label>
  <label>Delivery Quantity
  <input type="text" name="deliveryquantity" />
 </label>
<label>Delivery First Name
<input type="text" name="deliveryname" />
 </label>
       <br />
        <br/>
  <label>Delivery Surname
     <input type="text" name="deliverysurname" />
                                                      </label>
                                                    </p>
                                                    Delivery Address Line 1:
<input name="deliveryadd1" type="text" id="deliveryadd1" />                          
<br />
                          <br />
                          Delivery Address Line 2:
                          <input name="deliveryadd2" type="text" id="deliveryadd2" />
                          <br />
                          <br />
                          Town:
                          <input name="deliverytown" type="text" id="town" />
                          <br />
                          <br />
                          Postcode:
                          <input name="deliverypostcode" type="text" id="postcode" />
                          <br>                                                 </div>
                          </label>
						                          <div align="center">
						                          <div align="center"><br />

Thread: Javascript on change event

LinkBack

Thread Tools

Display

Javascript on change event

Re: Javascript on change event

Re: Javascript on change event

Re: Javascript on change event

Re: Javascript on change event

Re: Javascript on change event

Re: Javascript on change event

Re: Javascript on change event

Similar Threads

Change background color with JavaScript?

Javascript change style attribute of span

Event Managment

javascript text class change for heading

Javascript to change iframe url

Posting Permissions