Jump to content


Photo

gathering all textfields with getElementById


  • Please log in to reply
11 replies to this topic

#1 Crusader

Crusader
  • Members
  • PipPipPip
  • Advanced Member
  • 74 posts
  • LocationCanada

Posted 28 October 2006 - 10:45 AM

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;
		}
	}
}

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.

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

Right now I can only get 1 value...

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

#2 ober

ober
  • Staff Alumni
  • Advanced Member
  • 5,337 posts
  • LocationEast Coast, USA

Posted 28 October 2006 - 12:04 PM

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);

Info: PHP Manual


#3 Crusader

Crusader
  • Members
  • PipPipPip
  • Advanced Member
  • 74 posts
  • LocationCanada

Posted 28 October 2006 - 06:31 PM

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

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

Thanls

#4 ober

ober
  • Staff Alumni
  • Advanced Member
  • 5,337 posts
  • LocationEast Coast, USA

Posted 28 October 2006 - 07:24 PM

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);
}

Something like that.

Info: PHP Manual


#5 Crusader

Crusader
  • Members
  • PipPipPip
  • Advanced Member
  • 74 posts
  • LocationCanada

Posted 28 October 2006 - 08:24 PM

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

#6 tomfmason

tomfmason
  • Staff Alumni
  • Advanced Member
  • 1,696 posts
  • Locationstealing your wifi

Posted 29 October 2006 - 09:40 AM

Here is what I like to do.

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;
}

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

Good Luck,
Tom

Traveling East in search of instruction, and West to propagate the knowledge I have had gained.

current projects: pokersource

My Blog | My Pastebin | PHP Validation class | Backtrack linux


#7 Crusader

Crusader
  • Members
  • PipPipPip
  • Advanced Member
  • 74 posts
  • LocationCanada

Posted 29 October 2006 - 07:31 PM

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

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;
		}
	}
}


The html portion:
<!-- 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 -->


#8 tomfmason

tomfmason
  • Staff Alumni
  • Advanced Member
  • 1,696 posts
  • Locationstealing your wifi

Posted 29 October 2006 - 07:39 PM

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.

Traveling East in search of instruction, and West to propagate the knowledge I have had gained.

current projects: pokersource

My Blog | My Pastebin | PHP Validation class | Backtrack linux


#9 Crusader

Crusader
  • Members
  • PipPipPip
  • Advanced Member
  • 74 posts
  • LocationCanada

Posted 29 October 2006 - 07:42 PM

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

#10 tomfmason

tomfmason
  • Staff Alumni
  • Advanced Member
  • 1,696 posts
  • Locationstealing your wifi

Posted 29 October 2006 - 07:54 PM

sorry I forgot to remove these lines

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

Remove that and see what happens


Traveling East in search of instruction, and West to propagate the knowledge I have had gained.

current projects: pokersource

My Blog | My Pastebin | PHP Validation class | Backtrack linux


#11 Crusader

Crusader
  • Members
  • PipPipPip
  • Advanced Member
  • 74 posts
  • LocationCanada

Posted 29 October 2006 - 08:09 PM

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.nearfanta...templates/nf.js :: sendRequestPost :: line 61"  data: no]

Internet Explorer: The parameter is incorrect.

#12 Crusader

Crusader
  • Members
  • PipPipPip
  • Advanced Member
  • 74 posts
  • LocationCanada

Posted 30 October 2006 - 03:28 AM

Solved it!

var request = param.replace('undefined','')

Split replaces it with a comma.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users