×
INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Students Click Here

Radio button values not sending through AJAX
2

Radio button values not sending through AJAX

Radio button values not sending through AJAX

(OP)
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

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

RE: Radio button values not sending through AJAX

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

RE: Radio button values not sending through AJAX

Hi

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

CODE --> JavaScript

case "radio":
  if (i.checked) {
    params[x] = urlencode(i.name) + "=" + urlencode(i.value);
  }
break;
 

Feherke.
http://rootshell.be/~feherke/

RE: Radio button values not sending through AJAX

(OP)
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.

RE: Radio button values not sending through AJAX

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

RE: Radio button values not sending through AJAX

Hi

Quote (milo3169):

I didn't want to reload the whole page when the form is submitted.
As an alternative, you can set the target attribute of the form to a hidden iframe. That way you can use the browsers built-in form-submitting mechanism without having the main document replaced.

Feherke.
http://rootshell.be/~feherke/

RE: Radio button values not sending through AJAX

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!"

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members! Already a Member? Login


Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close