Javascript on change event

warlordste

warlordste

New Member
Messages
653
Reaction score
0
Points
0
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?
 
M

misson

Community Paragon
Community Support
Messages
2,572
Reaction score
72
Points
48
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).
 
lemon-tree

lemon-tree

x10 Minion
Community Support
Messages
1,420
Reaction score
46
Points
48
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: 
<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.
 
Last edited:
essellar

essellar

Community Advocate
Community Support
Messages
3,295
Reaction score
227
Points
63
misson said:
Firstly, a checkbox (<input type="check" .../>) is more natural than a select when the options are yes/no.
Click to expand...

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

descalzo

Grim Squeaker
Community Support
Messages
9,373
Reaction score
326
Points
83
essellar said:
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.
Click to expand...

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.
 
Last edited:
lemon-tree

lemon-tree

x10 Minion
Community Support
Messages
1,420
Reaction score
46
Points
48
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.
 
Last edited:
warlordste

warlordste

New Member
Messages
653
Reaction score
0
Points
0
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: 
  <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 />
 
You must log in or register to reply here.
Top