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.
AJAXOther 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 | 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> |
Google Sites Ninja > Google Sites jQuery >