jQuery #5

jQuery UI Interactions
• draggable: jq_05_draggable.html
• droppable: droppable demo
• resizeable: resizeable demo


jQuery UI Widgets (combination of function + UI)
• autofill: jq_05_autofil.html
• menu: menu demo, API
• dialog: dialog demo
• datepicker: datepicker demo

• basic form: jq05_basic.html
• form + jquery: jq05_form.html

• Form tutorial from w3schools
• reference form selectors for jquery
• jquery validate -- rigorous form checking infrastructure
• online jquery form examples

<form>
  <input type="radio" name="shipment" class="ship" value="ups" checked> UPS <br>
  <input type="radio" name="shipment" class="ship" value="fedex">FedEx <br>
  <input type="radio" name="shipment" class="ship" value="usps">USPS<br>


<input type="submit" id="submit" value="Submit">
</form>

  $('form').submit(function(evt){
     // Prevent form from submitting a request to the server (default behaviour)
     evt.preventDefault();                  
     alert("turned off default behavior");

    // Overwrite the page using html() function.
    // Alternatively, jquery has a load() function that allows you to load html files but
    // it won't allow you to do it on local files. It needs to come from the same domain
    // $('body').load("http://people.reed.edu/.... .html"); // this will work granted this HTML file is on people.reed.edu
    //
    var method;
    $('.ship').each(function(){
       if( $(this).is(':checked')) {
         //alert($(this).val());
          method = $(this).val();
      }
    });

    $('body').html("Thanks for buying. You owe me " + $('#total').val() + " dollars using " + method)

  });

 <form>
  First name:<br>
  <input type="text" id="firstname" name="firstname" value="Amanda">
  <br>
  Last name:<br>
  <input type="text" id="lastname" name="lastname" value="Reed">
</form>

  // use of focus as command (not as an event handler)
  $('#firstname').focus();

  // Erase the default value of Reed when user focuses on input for firstname
  $('#lastname').focus(function(){
      if( $(this).val() == "Reed" ){
           $(this).val('');
      }
  });

<form>
<input type="checkbox" id="gift" name="gift">gift?<br><br>
  <div id="giftarea" style="margin:0 0 0 40px;">
  <input type="checkbox" class="giftoptions" name="wrap">wrap<br>
  <input type="checkbox" class="giftoptions" name="boxed">boxed<br>
  <input type="checkbox" class="giftoptions" name="card">card<br>
  </div>
</form>

  // if the gift checkbox is unchecked, turn off the giftoptions (wrap, boxed, card)
  $('#gift').click(function(){
    // alert( $('#gift').prop('checked') );   // this is an example of print debug to see what I am getting

   if ( $('#gift').prop('checked') == true ){     // if it is a gift
      $('.giftoptions').prop('disabled', false);  // instead you can do $('.giftptions').show()
      $('#giftarea').css('backgroundColor', 'yellow');
    }
    else {                                        // not a gift
      $('.giftoptions').prop('disabled', true);   // instead of disabling, you can do $('.giftptions').hide()
      $('#giftarea').css('backgroundColor', '');
    }
  });

<form>
<label for="country" class="label">Country</label>
<select name="country" id="country">
  <option>Choose your country</option>
  <option value="/us/">U.S.A. </option>
  <option value="/af/">Afghanistan </option>
  <option value="/al/">Albania </option>
  <option value="/af/">Afghanistan </option>
  <option value="/al/">Albania </option>
  <option value="/dz/">Algeria </option>
  <option value="/as/">American Samoa </option>
  <option value="/ad/">Andorra </option>
  <option value="/ao/">Angola </option>
  <option value="/ai/">Anguilla </option>
  <option value="/ag/">Antigua </option>
  <option value="/ar/">Argentina </option>
  <option value="/am/">Armenia </option>
  <option value="/aw/">Aruba </option>
  <option value="/au/">Australia </option>
  <option value="/at/">Austria </option>
</select>
</form>

  // if the country is not selected, alert user
  $('#country').change(function(){
    if( $(this).val() == 'Choose your country'){
       alert('Select a country');
    }
  });

<form>
  Quantity: <input type="text" id="quantity" name="quantity" id="quantity"> x $9.95 each<br>
  Total: <input type="text" id="total" name="total" value="">
</form>

   $('#quantity').change(function(){
      var q = $('#quantity').val();
      if( $.isNumeric(q) ){
          var t = q * 9.95;
          $('#total').val(t);
      }
   });