jQuery AJAX Form


Using the jQuery JavaScript API in the HTML Box you can create a AJAX Form UI - User Interface. The jQuery API reduces the direct JavaScript Code required.

AJAX


AJAX - Asynchronous JavaScript and XML uses dynamic methods to update specific data without a large data call. 

Other data performance technologies beyond XML include AMF, SOAP and JSON, where Data and Calls are optimized.

 jQuery Method : Serialize();


The jQuery JavaScript API has many functions that can be called , such as Serialize(); which can dynamically call ALL the parameters from a form.

var strFull = $("form").serialize();

Example of an AJAX Form

















Google APi Library

https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.js

HTML Box Example Code:


Copy and paste the code below and Insert > HTML Box in your Google Sites webpage.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.js"></script>
  
<style>
  body, select { font-size:12px; }
  form { margin:5px; }
  p , #t1{ color:red; margin:5px; font-size:14px; }
  b { color:blue; }
  </style>
  

  

<form action="..." method="get">
Question1: ...<br />
    <select name="q1">
       <option value="0">Single</option>
      <option value="2">Single2</option>
    </select>

<br />
   Question2: ...<br />
    <select name="q2" size="3">
      <option value="0">Multiple</option>
      <option value="2">Multiple2</option>
      <option value="3">Multiple3</option>
    </select>
<br/>
    <input type="checkbox" name="q3" value="1" id="ch1"/>
    <label for="ch1">check1</label>
    <input type="checkbox" name="q3" value="2" checked="checked" id="ch2"/>
    <label for="ch2">check2</label>
<br />
    <input type="radio" name="q4" value="0" checked="checked" id="r1"/>
    <label for="r1">radio1</label>
    <input type="radio" name="q4" value="2" id="r2"/>
    <label for="r2">radio2</label>

<br /><br /><br /><p>Results (Textbox):<input type="text" id=t1 value=""/></p>
  </form>
  <p>Results: <tt id="results" ></tt></p>
<p>Full Parameters: <tt id="total"></tt></p>
<script>
    function showValues() {
      var strFull = $("form").serialize();
      var str = $("form").serialize();
      str = str.replace(/=/gi,'');
      str = str.replace(/&/gi,'');
      str = str.replace(/q1/gi,'+');
      str = str.replace(/q2/gi,'+');
      str = str.replace(/q3/gi,'+');
      str = str.replace(/q4/gi,'+');

      $("#results").text(str);
      $("#t1").val(str);
      $("#total").text((strFull));
      //Test $("#total").text( new Function( 'return ' + str ));
    }
    $(":checkbox, :radio").click(showValues);
    $("select").change(showValues);
    showValues();
</script>