Jump to content

Archived

This topic is now archived and is closed to further replies.

Crusader

gathering all textfields with getElementById

Recommended Posts

[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?

Share this post


Link to post
Share on other sites
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);

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
[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.

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
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]

Share this post


Link to post
Share on other sites
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.

Share this post


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

Share this post


Link to post
Share on other sites
sorry I forgot to remove these lines

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

Remove that and see what happens

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
Solved it!

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

Split replaces it with a comma.

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.