SmileyLover Blog » ajax radio button http://blog.smileylover.com Sharing Knowledge and Resources Sun, 04 Apr 2010 18:32:35 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 AJAX POST GET Form With Multiple Checkbox, Radio, Select Option http://blog.smileylover.com/ajax-with-checkbox/ http://blog.smileylover.com/ajax-with-checkbox/#comments Tue, 02 Sep 2008 19:06:51 +0000 Admin http://blog.smileylover.com/?p=35 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

?View Code JAVASCRIPT
<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.
<

?View Code PHP
>&lt;?php
 
print_r($_GET);
 
?&gt;

A simple php for printing all data sent. So change your form now using AJAX for more sophiscated.

Download Source Code.

Pass : blog.smileylover.com

]]> http://blog.smileylover.com/ajax-with-checkbox/feed/ 2