Radio button values not sending through AJAX 2

[milo3169]

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

<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

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

 

[Diancecht]

I don't understand this: are you using an XMLHttpRequest object to send a form? Why not using the normal way and reduce complexity?

Cheers,
Dian

 

[feherke]

Hi

The only error I see is plain JavaScript, not AJAX : no need for looping because the outer [tt]for[/tt] will step over each [tt]radio[/tt] [tt]input[/tt] separately :

[b]case[/b] [green][i]"radio"[/i][/green][teal]:[/teal]
  [b]if[/b] [teal]([/teal]i[teal].[/teal]checked[teal])[/teal] [teal]{[/teal]
    params[teal][[/teal]x[teal]][/teal] [teal]=[/teal] [COLOR=darkgoldenrod]urlencode[/color][teal]([/teal]i[teal].[/teal]name[teal])[/teal] [teal]+[/teal] [green][i]"="[/i][/green] [teal]+[/teal] [COLOR=darkgoldenrod]urlencode[/color][teal]([/teal]i[teal].[/teal]value[teal]);[/teal]
  [teal]}[/teal]
[b]break[/b][teal];[/teal]

Feherke.

http://rootshell.be/~feherke/

 

[milo3169]

Hi Diancecht,
I want to use an XMLHttpRequest because I have a page that has tab navigation on it with different forms. I didn't want to reload the whole page when the form is submitted. That way I can have only parts of the page reload. I am also doing it for learning purposes.

 

[milo3169]

Thanks feherke,
I removed the for loop, and it works great. Thanks for all of your help.

 

[feherke]

Hi

I didn't want to reload the whole page when the form is submitted.

As an alternative, you can set the [tt]target[/tt] attribute of the [tt]form[/tt] to a hidden [tt]iframe[/tt]. That way you can use the browsers built-in form-submitting mechanism without having the main document replaced.

Feherke.

http://rootshell.be/~feherke/

 

[1DMF]

Just a heads up, if you dynamically generate radio buttons based on DB data and handle them as an array, remember if you happen to display a page and the named radio only has one instance on the page it is no longer an array and needs to be handled as a single value/pair.



"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!