gathering all textfields with getElementById

[Crusader]

[code]function createRequestObject() {
var req;
if(window.XMLHttpRequest){
// Firefox, Safari, Opera...
req = new XMLHttpRequest();
} else if(window.ActiveXObject) {
// Internet Explorer 5+
req = new ActiveXObject("Microsoft.XMLHTTP");
} else {
// There is an error creating the object,
// just as an old browser is being used.
alert('Problem creating the XMLHttpRequest object');
}
return req;
}

function handleDivTag(divtag)
{
var divtag;
return divtag;
}

// Make the XMLHttpRequest object
var http = createRequestObject();

// Create the Divtag Handler -- Mainly an IE 6 Fix
var divhandler = new handleDivTag(null);

function sendRequestGet(act,divtag) {
// Open PHP script for requests
http.open('get', 'process.php?act='+act);
http.onreadystatechange = handleResponse;
divhandler.divtag = divtag;
http.send(null);
}

function sendRequestPost(act,divtag) {
// Open PHP script for requests
http.open('post', 'process.php');
http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
http.onreadystatechange = handleResponse;
divhandler.divtag = divtag;
http.send('dob='+act);
}

function handleResponse() {
if(http.readyState == 4 && http.status == 200){
// Text returned FROM the PHP script
var response = http.responseText;
if(response) {
// UPDATE ajaxTest content
document.getElementById(divhandler.divtag).innerHTML = response;
}
}
}[/code]

I've pieced this together so far but I need help gathering all the values of input textfields to put through sendRequestPost. This is how it works right now.

[code]<div id="test">
<input type="text" id="value1" value="" size="10" maxlength="4" />
<input type="text" id="value2" value="" size="10" maxlength="4" />
<input type="button" value="Submit" onclick="sendRequestPost(document.getElementById('value1').value,'test');" />
</div>[/code]

Right now I can only get 1 value...

Any ideas or tips on putting all of the values in an array?

[ober]

I'm not clear on the problem.  You can send as many items as you wish.  You also don't need to send them as arguments.  You can get the values within the javascript function using the same call that you did.

As far as the http.send, just build it out like a regular URL: http.send('dob='+act+'&something='+var2);

[Crusader]

Agh. I feel so stupid, I didn't know you could do it like that :| But what am I supposed to put into sendRequestPost?

[code]<input type="button" value="Submit" onclick="sendRequestPost(document.getElementById('value1').value,'test');" />[/code]

Thanls

[ober]

[code]function sendRequestPost() {
// Open PHP script for requests
        var1 = document.getElementById('value1').value;
        var2 = document.getElementById('value2').value;
http.open('post', 'process.php');
http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
http.onreadystatechange = handleResponse;
divhandler.divtag = divtag;
http.send('dob='+var1+'&blah='+var2);
}[/code]

Something like that.

[Crusader]

I came up with exactly that a few minutes ago, thanks!

[tomfmason]

Here is what I like to do.

[code]
function getFormElements(form) {
    var fld = document.forms[form].elements;
var fmax = fld.length;
var param;
for (var i = 0; i < fmax; i++) {
    if (fld[i].name !== "submit") {
    if (fld[i].value == '') {
    error[] == fld[i].name;
}
        if (i == 0) {
        param += fld[i].name + '=' + fld[i].value;
    } else {
        param += '&' + fld[i].name + '=' + fld[i].value;
    }
}
}
var request = param.split('undefined');
return request;
}

function sendRequest(form, file) {
    var param = getFormElements(form);
    http.open('POST', file);
    http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    http.send(param);
    http.onreadystatechange = yourotherfunction;
}
[/code]

Now you can call this function like this <input type="button" value="something" name="submit" onclick="sendRequest(this.form.name, 'yourscript');">

Good Luck,
Tom

[Crusader]

It seems to be telling me my sendRequest function is undefined when I put getFormElements in :(

[code]function createRequestObject(){
var req;
if(window.XMLHttpRequest){
// Firefox, Safari, Opera...
req = new XMLHttpRequest();
} else if(window.ActiveXObject){
// Internet Explorer 5+
req = new ActiveXObject("Microsoft.XMLHTTP");
} else{
// There is an error creating the object,
// just as an old browser is being used.
alert('Please upgrade your browser.');
}
return req;
}

function handleDivTag(divtag)
{
var divtag;
return divtag;
}

// Make the XMLHttpRequest object
var http = createRequestObject();

// Create the Divtag Handler -- Mainly an IE 6 Fix
var divhandler = new handleDivTag(null);

function getFormElements(form) {
    var fld = document.forms[form].elements;
var fmax = fld.length;
var param;
for (var i = 0; i < fmax; i++) {
    if (fld[i].name !== "submit") {
    if (fld[i].value == '') {
    error[] == fld[i].name;
}
        if (i == 0) {
        param += fld[i].name + '=' + fld[i].value;
    } else {
        param += '&' + fld[i].name + '=' + fld[i].value;
    }
}
}
var request = param.split('undefined');
return request;
}

//function sendRequest(form, file) {
  //  var param = getFormElements(form);
    //http.open('POST', file);
    //http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    //http.send(param);
    //http.onreadystatechange = yourotherfunction;
//}

function sendRequestPost(form,divtag){
// Open PHP script for requests
var bits = getFormElements(form);
http.open('post', 'http://www.nearfantastica.com/blue/templates/process.php');
http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
http.onreadystatechange = handleResponse;
divhandler.divtag = divtag;
http.send(bits);
}

function handleResponse(){
if(http.readyState == 1){
var response = '<div id="loading"><br /><br /><span class="newstitle">Processing</span><br /><img src="http://www.nearfantastica.com/blue/images/spinner.gif" border="0" width="32" height="32" alt="" title="" align="absmiddle" /><br /><br /></div>';
if(response){
// Loading Screen
document.getElementById(divhandler.divtag).innerHTML = response;
}
}
if(http.readyState == 4 && http.status == 200){
var response = http.responseText;
if(response){
// Update Div
document.getElementById(divhandler.divtag).innerHTML = response;
}
}
}[/code]


The html portion:
[code] <!-- comment field begins -->
<div id="sign">
<form name="signbook" id="signbook">
<input type="hidden" id="for" name="for" value="69" />
<textarea id="message" name="message" rows="10" cols="48"></textarea><br />
<input type="text" id="name" name="name" size="12" maxlength="24" /> Name 
<input type="text" id="email" name="email" size="15" maxlength="24" /> E-Mail
<input type="checkbox" id="displayemail" name="displayemail" value="1" /><br />
<input type="text" id="captcha" name="captcha" size="10" maxlength="24" /> <img src="http://www.nearfantastica.com/blue/albums/iac.jpg" height="30" width="110" align="absmiddle" alt="CAPTCHA CHECK" title="CAPTCHA CHECK"/> Code<br />
<input type="button" value="Post Comment" name="submit" onclick="sendRequestPost('signbook','sign');">
</form>
</div>
<!-- comment field ends -->[/code]

[tomfmason]

If it is saying that the function is undefined then you most have misspelled it or something.  Can you post a link to a live version.

[Crusader]

I've edited my previous post. But the experimental page is up at: http://www.nearfantastica.com/blue/test.html

[tomfmason]

sorry I forgot to remove these lines

[code]
if (fld[i].value == '') {
  error[] == fld[i].name;
}
[/code]

Remove that and see what happens

[Crusader]

It's telling me the parameter is incorrect now for the output in getFormElements but otherwise it looks like its working :D

Firefox Error: Error: uncaught exception: [Exception... "Component returned failure code: 0x80070057 (NS_ERROR_ILLEGAL_VALUE) [nsIXMLHttpRequest.send]"  nsresult: "0x80070057 (NS_ERROR_ILLEGAL_VALUE)"  location: "JS frame :: http://www.nearfantastica.com/blue/templates/nf.js :: sendRequestPost :: line 61"  data: no]

Internet Explorer: The parameter is incorrect.

[Crusader]

Solved it!

[code]var request = param.replace('undefined','')[/code]

Split replaces it with a comma.