PHP & Ajax w/ Form GET

[musclehead]

I've successfully created a PHP form that submits and returns the checkbox values selected in the form via Ajax.

 

The input tag is fairly simple:

 

<form action="javascript:get(document.getElementById('myForm'));" name="myForm" id="myForm">
<input type="checkbox" name="cb1" value="one" /><br />
<input type="checkbox" name="cb2" value="two" /><br />
<input type="checkbox" name="cb3" value="three" /><br />
<input type="button" name="button" value="Submit" onclick="javascript:get(this.parentNode);">
</form>

 

This works perfectly returning the value of the checkbox selected when the form is submitted (without refreshing the page). However, when I attempt to format the page (putting the inputs into a div or table), it stops working. I can't for the life of me figure out why. It works before formatting in Firefox and IE, but fails in both when the inputs are aligned at all. Can anyone shed some light on this?

 

The

[Rohan Shenoy]

Make sure the DIVs are not breaking the continuity of form tag.

[haku]

?? that wont matter if the values are being called in the javascript.

 

Post your ajax code, however you are calling the values of the checkboxes, its being broken when you put the inputs into divs. Thats where your problem lies.

[musclehead]

This is the AJAX:

 

var http_request = false;
function makeRequest(url, parameters) {
  http_request = false;
  if (window.XMLHttpRequest) {
    http_request = new XMLHttpRequest();
    if (http_request.overrideMimeType) {
      http_request.overrideMimeType('text/html');
    }
  } else if (window.ActiveXObject) {
    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);
}
function alertContents() {
  if (http_request.readyState == 4) {
    if (http_request.status == 200) {
      result = http_request.responseText;
      alert(result);
    } else {
      alert('There was a problem with the request.');
    }
  }
}
function get(obj) {
  var getstr = "?";
  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 + "&";
        }
      }
      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('get.php', getstr);
}

[haku]

change this:

 

function get(obj) {
  var getstr = "?";
  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 + "&";
        }
      }
      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('get.php', getstr);
}

 

To this:

 

function get(obj)
{
   var getstr = "?";
   var theElements = obj.getElementsByTagName("input")
   for (i=0; i<theElements.length; i++)
   {
      if (theElements[i].type == "text")
      {
         getstr += theElements[i].name + "=" + theElements[i].value + "&";
      }
      if (theElements[i].type == "checkbox")
      {
         if (theElements[i].checked)
         {
            getstr += theElements[i].name + "=" + theElements[i].value + "&";  
         }
      }
      if (theElements[i].type == "radio")
      {
         if (theElements[i].checked)
         {
            getstr += theElements[i].name + "=" + theElements[i].value + "&";
         }
      }
      var theSelects = obj.getElementsByTagName("select")
      var sel = theSelects.childNodes[i];
      getstr += sel.name + "=" + sel.options[sel.selectedIndex].value + "&";
   }
   makeRequest('get.php', getstr);
}

 

Assuming your original code was correct, this should solve your problems. The problem was that you were getting all the parent nodes of the object you were passing into the function, but since you were putting the children into divs, they were no longer children, but rather grandchildren.

[musclehead]

That did the trick! I don't have any select items in the form, so the script was originally bailing on:

 

      var theSelects = obj.getElementsByTagName("select")
      var sel = theSelects.childNodes[i];
      /getstr += sel.name + "=" + sel.options[sel.selectedIndex].value + "&";

 

Commenting that out did the trick - works perfectly! Thanks for your help!