HTML form radio value in an AJAX-loaded div

I'm unable to get a radio value in a form loaded by AJAX into a div. Here is the JavaScript code I'm using: (the radio name is 'categorie_add' in get function):

function getCheckedValue(radioObj) {
if(!radioObj)
    return "";
var radioLength = radioObj.length;
if(radioLength == undefined)
    if(radioObj.checked)
        return radioObj.value;
    else
        return "";
for(var i = 0; i < radioLength; i++) {
    if(radioObj[i].checked) {
        return radioObj[i].value;
    }
}
return "";

}

function get(obj) {
    var poststr ="cat_title=" + escape(encodeURI(document.getElementById("cat_title").value )) +
                 "&cat_description=" + escape(encodeURI( document.getElementById("cat_description").value ))+
       开发者_StackOverflow中文版          "&cat_id=" + escape(encodeURI( getCheckedValue(document.categorie_add.cat_id) ));
    makePOSTRequest('categorie.php', poststr);
}

and I have this in a PHP file:

            echo '<li><input type="radio" name="cat_id" id="cat_id" value="' . $value['cat_id'] . '" /> ' . htmlentities($value['cat_title']) . '<br />';

You may need to read this tutorials:

http://www.w3schools.com/jsref/prop_radio_checked.asp
http://www.w3schools.com/html/html_forms.asp
http://www.w3schools.com/htmldom/dom_methods.asp

I suppose the problem is in the way you catch the radio object in DOM ....

Please write too the code how make the call to the function getCheckedValue.

Try in Jquery way...

$('#cat_id:checked').val();

Jquery is Rock.

JavaScript function:

function getCheckedValue(radioObj) {
  for ( var i in radioObj )if (radioObj[i].checked) return radioObj[i].value;
  return false;
}

I would say the problem is the way you generate your radio buttons:

echo '<li><input type="radio" name="cat_id_' . $value['cat_id'] 
   . '" id="cat_id_' . $value['cat_id'] 
   . '" value="' . $value['cat_id'] . '" /> ' 
   . htmlentities($value['cat_title']) . '<br />';

Try to get jQuery to make your life simple. You could get your values like that:

$('#cat_ul input[type=radio]:checked').val();

(assuming your <li> tags are wrapped in a <ul id="cat_ul"> tag)

In addition to what marvinlabs says, try to use chrome development tools to see what happening on the code return by ajax. You will see what the exact ajax responseText and also the contents of the Headers sent to the server. This also include the field and its value.

Assuming you want to keep on not using jQuery, change your code to the following:

function getCheckedValue(radioObjArr) {
  if(!radioObjArr)
    return "";
  for (var ii = 0; ii < radioObjArr.length; i++) {
    if (radioObjArr[ii].checked) {
      return radioObjArr[ii].value;
    }
  }
  return "";
}

And

function get(obj) {
  var poststr ="cat_title=" + escape(encodeURI(document.getElementById("cat_title").value )) +
             "&cat_description=" + escape(encodeURI( document.getElementById("cat_description").value ))+
             "&cat_id=" + escape(encodeURI( getCheckedValue(document.getElementsByName("cat_id")) ));
  makePOSTRequest('categorie.php', poststr);
}

Your current code is unclear, though. You use an ID ("cat_id") on your radio button, but your getCheckedValue-function also supports getting an array of objects. An ID has to be unique, though. I changed your code a little so you'll always use an array of objects, even if it has only one element.