09 enhancing web forms
Upcoming SlideShare
Loading in...5
×
 

09 enhancing web forms

on

  • 357 views

 

Statistics

Views

Total Views
357
Views on SlideShare
357
Embed Views
0

Actions

Likes
0
Downloads
2
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

09 enhancing web forms 09 enhancing web forms Presentation Transcript

  • ENHANCING WEBFORMS WITH JQUERYForms can be usable. No, really. They can!
  • Forms allowusers tosubmit datato the webserver
  • You can pointto formelements likeweve pointedto everythingelse
  • ... but dont use name, use id<script type=text/javascript>! $(#goButton).click(function () {! alert($(#city).val());! });!</script>!<form action=postForm.jsp method=GET>! <input type=text name=city />! <input type=button name=goButton />!</form>!•  This wont work. Why?• Because forms may use name, but jQuery uses id.
  • But there are some special attributes youcan use to select form elements•  :checked •  Applies to: Checkboxes and radio buttons •  Selects: All that are checked or turned on •  Example: $(input[name="networks"]:checked) – All checkboxes with the name "networks" that the user has checked•  :selected •  Applies to: Listboxes and dropdowns •  Selects: All that the user chose •  Example: $(#idOfListBox :selected) – All choices in the listbox that the user has chosen
  • Radiobuttons are weird<input type="radio" name="shipMethod" id="Fedex" value="Fedex"/>!<input type="radio" name="shipMethod" id="UPS" value="UPS"/>!<input type="radio" name="shipMethod" id="USPS" value="USPS"/>!•  On a radiobutton, the change() event only fires when the radiobutton turns on.•  So dont point to each button:$("#Fedex").change(doSomething());!•  Point to the group instead:$("input[name=shipMethod]").change(doSomething());!
  • MANIPULATING THEFORM
  • You can read and alter the data on a form $(#city).val(Bedrock);! $(#optIn).prop(checked,checked);!var x = $(#city).val();!var y = $(#optIn).prop(checked);!
  • Forms have special events that we canrespond to•  Submit•  Focus and Blur•  Click•  Change
  • You should placeyour users in a fieldto help themunderstand the form•  $(#name).focus();
  • You can disable fields that shouldnt beused right now•  $(#fieldId).prop(disabled, true);
  • In fact, whynot just hidethedisallowedfields?
  • JQUERY VALIDATION
  • Server-sidevalidations areexpensive. Dothem client-side.
  • An easy way is touse the Validationplug-in1.  Include jQuery itself2.  Download the validation plug-in3.  Add validation rules •  class="required" •  class="date" •  class="digits"4.  Add your custom error messages5.  $(#myForm).validate()
  • Advanced validationrules: {! fieldname : validationType,! fieldname : {! validationType : true,! validationType : value,! validationType : [min,max],! etc. etc.! },! etc. etc.!}!
  • You can also have advanced errormessagesmessages: {!fieldname : {! validationType : Error message,! validationType : Error message, ! etc. etc.! },! etc. etc.!}!
  • !
  • Conclusion•  We can make HTML forms easier to use through jQuery•  Use jQuerys special form selectors (:checked, etc.)•  Get and set values with val() and prop(checked)•  Place the user in the right field with focus()•  Hide unneeded options with hide()•  Show them again when ready with show()•  Validate on the client with the jQuery Validation plug-in