AJAX POST GET Form With Multiple Checkbox, Radio, Select Option
This simple tutorial will cover how to sending form using AJAX in GET action. So why you choose GET than POST action? The answer is, when we sending data using AJAX in POST action we always send data with TRUE condition. Example if you want to send form with checkbox that confirm client male or female, with this method you always get first option, male. Maybe with advanced javascript can cover it but we need a simple way. Right? Check demo application in Universal Ajax Link Checker.
So i choose GET action to send data to server and send back to client. It will check any input tag like checkbox, radio, or select option dropdown condition. Example if checbox was checked so it will send to server but if not, it will not send to server. So is this only work in input tag? how about textarea? It will work on all part of form as long you defined ID so AJAX can handled it and define in AJAX script what ID must be send to server.
Basic script come from here. I just added textarea to be process in this AJAX. Also added status when loading process 
So this my improved code.
index.php
<html> <head> <!-- AJAX GET improved by SmileyLover http://blog.smileylover.com --> <style type="text/css"> #load{color:green} </style> <script type="text/javascript" language="javascript"> var http_request = false; function makeRequest(url, parameters) { http_request = false; if (window.XMLHttpRequest) { // Mozilla, Safari,... http_request = new XMLHttpRequest(); if (http_request.overrideMimeType) { // set type accordingly to anticipated content type //http_request.overrideMimeType('text/xml'); http_request.overrideMimeType('text/html'); } } else if (window.ActiveXObject) { // IE try { http_request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { http_request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {} } } if (!http_request) { alert('Cannot create XMLHTTP instance'); return false; } http_request.onreadystatechange = alertContents; http_request.open('GET', url + parameters, true); http_request.send(null); } loadstatustext="<div id='load'><img src='http://i37.tinypic.com/4gt6k0.jpg' /><br /><br />Checking links ...<br /></div>" //Loading status function alertContents() { document.getElementById('myspan').innerHTML=loadstatustext //Display "fetching page message" if (http_request.readyState == 4) { if (http_request.status == 200) { //alert(http_request.responseText); result = http_request.responseText; document.getElementById('myspan').innerHTML = result; } else { alert('There was a problem with the request.'); } } } function get(obj) { var getstr = "?" + "&links=" + encodeURI( document.getElementById("links").value + "&" ); for (i=0; i<obj.childNodes.length; i++) { if (obj.childNodes[i].tagName == "INPUT") { if (obj.childNodes[i].type == "text") { getstr += obj.childNodes[i].name + "=" + obj.childNodes[i].value + "&"; } if (obj.childNodes[i].type == "checkbox") { if (obj.childNodes[i].checked) { getstr += obj.childNodes[i].name + "=" + obj.childNodes[i].value + "&"; } else { getstr += obj.childNodes[i].name + "=&"; } } if (obj.childNodes[i].type == "radio") { if (obj.childNodes[i].checked) { getstr += obj.childNodes[i].name + "=" + obj.childNodes[i].value + "&"; } } } if (obj.childNodes[i].tagName == "SELECT") { var sel = obj.childNodes[i]; getstr += sel.name + "=" + sel.options[sel.selectedIndex].value + "&"; } } makeRequest('process.php', getstr); } </script> </head> <body> <h2>AJAX GET FORM</h2> <form action="javascript:get(document.getElementById('myform'));" name="myform" id="myform"> <textarea cols="50" rows="5" id="links" name="links"></textarea><br /><br /> <input type="text" name="myfield" value="teststring"><br /> <input type="radio" name="myradio" value="0" checked> 0 <input type="radio" name="myradio" value="1"> 1<br /> <input type="checkbox" name="mycheck1" value="1"> 1 <input type="checkbox" name="mycheck2" value="2"> 2 <input type="checkbox" name="mycheck3" value="3"> 3 <input type="checkbox" name="mycheck4" value="4"> 4 <input type="checkbox" name="mycheck5" value="5"> 5 <br /> <select name="myselect"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> <br /> <input type="button" name="button" value="Submit" onclick="javascript:get(this.parentNode);"> <input type="submit" name="button" value="Normal Submit Button"> </form> <br /><br /> Server-Response:<br /> <span name="myspan" id="myspan"></span> </body> </html> |
And this is code for process.php.
<
><?php print_r($_GET); ?> |
A simple php for printing all data sent. So change your form now using AJAX for more sophiscated.
Pass : blog.smileylover.com
Hi
Nice site!
Bye
Thank YOU so much – this saved my day !