Refresh an input field

delayedinsanity · 07-27-2008, 02:04 AM

Does anybody know of any AJAX either standalone or part of the jquery or mootools library that will allow me to refresh text inside of a single input field without reloading the page?

All I can find are input form field 'hint' scripts. I want to add a link next to a field that says 'generate new random string' and it'll use a php function I have to refresh the string that's in the input field.
-m

ryanmr · 07-27-2008, 03:43 AM

Here's a script with Mootools.
HTML first.

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Quick</title>

  <script type="text/javascript" src="mootools-1.2-core.js"></script>
  <script type="text/javascript" src="mootools-1.2-more.js"></script>
  <script type="text/javascript">
  
  /*
	This uses mootools 1.2.
  */
  
	// global variables so you don't need to redeclare.
	var myRequest = null; 
	var random_input = null;
	
	// domready to set events and define the request object.
	window.addEvent("domready", function(){
		myRequest = new Request({method: 'post', url: 'random.php', onSuccess: myCallBack});
		random_input = $("random_input");
		
		// adding an event to the input field.
				$("random_string").addEvent("click", function(e){
					
					// you can add your arguments here as a query string
					myRequest.send('your=args&right=here');
					e.stop();
					
				});
		
	});
	
	// this is a call back function, adds the returned value from random.php to the input field
	function myCallBack(text, xml) {
		if ( text==null ) {return false;}
		if ( $type(text) == "string" ) {
			random_input.set("value", text);
			// some effects for fun, a highlight of the parent of the input field.
			random_input.getParent().highlight();
		}
	}
	
  </script>
  
</head>
<body>

	<!--
		The input field has the "random_input" id.
		The link has "random_string" id.
	-->

	<form action="" method="post">
		<input type="text" name="myfield" id="random_input" /><br />
		<a href="#" id="random_string">Generate new random string!</a>
		<input type="submit" name="go" value="Go" />
	</form>

</body>
</html>

And my /really/ complex php.

PHP Code:


			
<?php



    echo( round(rand() * 100) );



?>

Hope this helps! (Go mootools!)

Third_Degree · 07-27-2008, 05:30 AM

To do this with no library and make it a lot easier

Code:

<script type="text/javascript">
function regenerate() {
	var ajax;
	try { 
		ajax=new XMLHttpRequest();
	}
	catch (e) {
		try { 
			ajax=new ActiveXObject("Msxml2.XMLHTTP");
		}
		catch (e) {
			try { 
				ajax=new ActiveXObject("Microsoft.XMLHTTP");
			}
			catch (e) {
			document.write("This page needs AJAX to run");
			return false;
			}
		}
	}
	ajax.onreadystatechange=function() { 
		if(ajax.readyState==4) {
			document.getElementById("string").value=ajax.responseText;
		}
	}
	ajax.open("GET","gen.php",true);
	ajax.send(null);
}
</script>
<input id="string" type="text" /> <a href="javascript: regenerate();return false;" onclick="javascript: regenerate();return false;">Regenerate</a>

And PHP:

Code:

<?php
header( 'Cache-Control: no-cache, must-revalidate' );
header( 'Expires: Mon, 26 Jul 1997 05:00:00 GMT' );
print substr( md5( rand( 0, 100 ) ), 0, 5 );
?>

ryanmr · 07-27-2008, 05:33 AM

If he's already using a library, there is no reason to reinvent the wheel!

Third_Degree · 07-27-2008, 05:48 AM

Quote:

Originally Posted by ryanmr

If he's already using a library, there is no reason to reinvent the wheel!

In this case there is, because a lot of ajax libraries are extremely heavily coded, and if it's such a simple job like this, better to just use your own. Also, he did say in his post "standalone"...

By the way, to make it even lighter and still usable in all modern browsers you could even downsize to this

Code:

<script type="text/javascript">
function regenerate() {
	var ajax;
	ajax = new XMLHttpRequest();
	ajax.onreadystatechange=function() { 
		if(ajax.readyState==4) {
			document.getElementById("string").innerHTML=ajax.responseText;
		}
	}
	ajax.open("GET","gen.php",true);
	ajax.send(null);
}
</script>

delayedinsanity · 07-27-2008, 07:48 AM

Nice, thanks both of you.. I am using two libraries actually, because my knowledge of PHP is growing, but my knowledge of AJAX and Javascript is next to none... so I have jquery on my web site to do a few neato things here and there (nothing useful, just neato), and I'm using mootools in my documentation so that the anchors scrolllllll nice and smoothly instead of jumping. Again, not useful, just neatoooo.

Neither is in the middle of a situation where performance is made questionable, so I'm good with it. This will be my first 'useful' use of AJAX hahah. I have to use a seperate php script hey, no way to call a function that's already embedded in the same page? (well technically it's not, the file it's from is included, but eh...) I'll give it a go here soon and let you know how it went, thanks again.
-m