milo3169
Programmer
- May 2, 2007
- 42
- 0
- 0
Hi everyone,
I have this form with about 4 radio buttons. When I submit the form through an AJAX request, it's not sending the value. I've tried to search on the Internet to try to find out what the problem is, but I have been unsuccessful. I think I have narrowed id down to the JavaScript function, but I could be wrong. all other types of form fields seem to work except the "Radio" type field. Could someone be able to look to see what I am overlooking?
HTML
The radio buttons are created dynamically from a database.
AJAX Code
In the switch statement for "radio" in the getFormElements function seems to overlook this so to speak.
Any help and suggestions would be greatly appreciated. Thanks
I have this form with about 4 radio buttons. When I submit the form through an AJAX request, it's not sending the value. I've tried to search on the Internet to try to find out what the problem is, but I have been unsuccessful. I think I have narrowed id down to the JavaScript function, but I could be wrong. all other types of form fields seem to work except the "Radio" type field. Could someone be able to look to see what I am overlooking?
HTML
Code:
<form method="get" action="php_processes/add_portfolio.php" onsubmit="return submitForm(this, 'php_processes/add_portfolio.php', 'get');">
<label class="radio-btn" for="cat1">
<input type="radio" name="catgroup" value="1" id="cat1" />People
</label>
</p>
<p class="radioBtn-style">
<label class="radio-btn" for="cat2">
<input type="radio" name="catgroup" value="2" id="cat2" />Places
</label>
</p>
<p class="radioBtn-style">
<label class="radio-btn" for="cat3">
<input type="radio" name="catgroup" value="3" id="cat3" />Still Life
</label>
</p>
<p class="radioBtn-style">
<label class="radio-btn" for="cat4">
<input type="radio" name="catgroup" value="4" id="cat4" />Commission
</label>
<!-- rest of the form -->
</form>The radio buttons are created dynamically from a database.
AJAX Code
Code:
var http_request = false;
function makeFormRequest(url, parameters, method) {
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) {}
}
} //end elseif
if (!http_request) {
alert('Cannot create XMLHTTP instance');
return false;
}
http_request.onreadystatechange = alertContents;
if (method == "get" || method == "GET"){
http_request.open(method, url + parameters, true);
http_request.send(null);
return false;
} else {
http_request.open(method, url, true);
http_request.send(params);
}
}
function alertContents() {
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 urlencode(str){
return encodeURI(str);
}
function getFormElements(frm, method){
var elems = frm.elements;
var params = new Array();
for (var x=0; x < elems.length; x++){
var i = elems[x];
switch (i.type){
case "text":
case "hidden":
case "password":
case "textarea":
params[x] = urlencode(i.name) + "=" + urlencode(i.value);
break;
case "checkbox":
if (i.checked){
params[x] = urlencode(i.name) + "=" + urlencode(i.value);
}
break;
case "radio":
for (var j = 0; j < i.length; j++){
if (i[j].checked){
params[x] = urlencode(i[j].name) + "=" + urlencode(i[j].value);
}
}
break;
case "select-one":
params[x] = urlencode(i.name) + "=" + urlencode (i.options[ i.selectedIndex].value);
break;
case "select-multiple":
for (var j=0; j < i.options.length; j++){
if (i.options[j].selected){
params[x] = urlencode(i.name) + "[]="+ urlencode (i.options[j].value);
}
}
break;
} //end switch
} //end for loop
var jArray = params.join('&');
if (method == "get" || method == "GET"){
return "?"+jArray;
} else {
return jArray;
}
}
function submitForm (frm, url, method){
//first get the fields
var params = getFormElements(frm, method);
makeFormRequest (url, params, method);
return false;
}In the switch statement for "radio" in the getFormElements function seems to overlook this so to speak.
Any help and suggestions would be greatly appreciated. Thanks
