Collecting form data

[TimFA]

I have a previous topic, but it is old and now I've realized this problem is effecting me everywhere. Ok, heres my code:

if (window.XMLHttpRequest)
{ 
xmlhttp=new XMLHttpRequest();
} 
else 
if (window.ActiveXObject)
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
} 

function RSchange() {
if (xmlhttp.readyState==1) {
document.getElementById('div').innerHTML="Loading..."
}
else if (xmlhttp.readyState==4) {
document.getElementById('div').innerHTML=xmlhttp.responseText
}
}
function go() {
var who=document.getElementsByName("who").value;

var data="who=" + who;

if (xmlhttp) {
d=document
xmlhttp.open("POST", "data.php", true);
xmlhttp.onreadystatechange=RSchange
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
xmlhttp.send(data)
}
}

This is just a sample, (meaning I removed all the correct values, such as its not really sending who ) but its the exact code I use. Problem being data.php never gets the data. I've tried many different configurations as suggested in my previous thread, but none work.

Thanks,
Tim

[brentnicholas]

Tim,

Do I understand you correctly that you want to basicly grab all the form data no matter how many elements or types of elements there may be?

If so, (at the risk of sounding like a prototype vendor..) you should look at using the prototype library. I've been using it now for about 4 months and it's all that and a bag of chips.

Your solution would be as follows:



$('MY_FORM').serialize()



Don't confuse the '$' with php '$', it's a prototype shortcut for grabbing an element id.

Simple hu?

In action your ajax request would look like this as well:

function insertProfessionalOutreach() {
new Ajax.Request('data.php',
{
method: 'post',
parameters: $('MY_FORM').serialize(),
onComplete: someFunctionCallAfterwards,
onFailure: function(r) {
throw new Error( r.statusText );
}
}
);
}

function someFunctionCallAfterwards(){
// Do what ever you need to do here after the data was submitted
}


It might be a little daunting to dive into Prototype mid-project-stream but let me tell you, there are Soooo many nice little helpers that are cross browser compatible in Prototype that it makes doing ajax really pleasent.

I hope that helps, I couldn't even begin to address all the issues that need to be thought of in generic javascript form marshalling.

[TimFA]

Thanks alot man, but I gave up trying to make it work long ago.

Tim

[TimFA]

Actually, I'm looking into this problem and I would prefer not to use the Prototype library, I realize its simpler and not hard to implement but I don't want to lean on it. So if anybody knows how please tell me how to make my original version.

[TimFA]

Anyone know how to fix this?

[Master_script_maker]

try this:

if (window.XMLHttpRequest)
{ 
xmlhttp=new XMLHttpRequest();
} 
else 
if (window.ActiveXObject)
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
} 

function RSchange() {
if (xmlhttp.readyState==1) {
document.getElementById('div').innerHTML="Loading...";
}
else if (xmlhttp.readyState==4) {
document.getElementById('div').innerHTML=xmlhttp.responseText;
}
}
function go() {
var who=document.getElementsByName("who").value;

var data="who=" + who;

if (xmlhttp) {
//d=document; //didn't seem nessessary 
xmlhttp.open("POST", "data.php", true);
xmlhttp.onreadystatechange=RSchange;
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
xmlhttp.send(data);
}
}

[TimFA]

Thanks Master, I'll try it as soon as I can. Even if it fails miserably with errors or something (but I'm sure it will work), atleast someone gave it a shot.

Tim

[boogyman]

xmlhttp.open("POST", "data.php", true);

I believe you need to use GET rather than POST

xmlhttp.send(data);

data needs to be null
by setting the "send" method to null, you are not refreshing the entire page, but rather just the content you want... aka remote scripting

xmlhttp.send(null);

you also have not properly checked for the existence of the HTTP Object.

replace

if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
if (window.ActiveXObject)
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

with

xmlhttp = getHTTPObject(); /* checks if remote scripting is possible */
function getHTTPObject() {
     var xhr = false;
     if (window.XMLHttpRequest) {
          xhr = new XMLHttpRequest();
     } 
     else if (window.ActiveXObject) {
          try {
                    xhr = new ActiveXObject("Msxml2.XMLHTTP");
          } 
          catch(e) {
               try {
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
               } 
               catch(e) {
                    xhr = false;
               }
          }
          return xhr;
     }
}

[TimFA]

Boogyman, if I set send to null then how do I tell it what I want it to send to data.php?? I.e.:

xmlhttp.send(null)l

Then how does the JavaScript know what I want sent?

Thanks

[boogyman]

everything is sent

xmlhttp.open("POST", "data.php", true);