AJAX

Ajax auto submit form without buttons?

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

Thread Solved

•

Join Date: Aug 2008

Posts: 954

Reputation: essential will become famous soon enough

Solved Threads: 131

essential

Offline

Posting Shark

Re: Ajax auto submit form without buttons?

#11

Jun 12th, 2009

Not tested on any server, so it may not provide exact results' that you want.

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html id="xhtml10S" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://www.w3.org/2005/10/profile">
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Free Live Help!</title>
<script id="script15" type="text/javascript">
// <![CDATA[
var handleRequest = function() { 
   var div = (( document.getElementById ) ? document.getElementById("request") : document.all.request );
   response = xmlHttp.responseText;
   if (( xmlHttp.readyState === 4 ) || ( xmlHttp.readyState === "complete" )) {
       if ( xmlHttp.status === 200 ) {
div.innerHTML = response; // If the user have provided sufficient data on its entry then you'll get the response from the server without submitting the form.
         }
      }
   };
 
var sendRequest = function( ids ) {
   ids = (( document.getElementById ) ? document.getElementById( ids ) : document.all[ ids ] ); // input element, referred as the "barcode field"
 
   url = "action.php?"; // URL for the form processing.
   querystr = encodeURIComponent( "barcode=" + ids.value ) // query string that will be sent to the server, ( fix appropriate value as needed ).
   xmlHttp = null;
   method = "POST"; // Request method can be set to ( GET or POST ).
 
// Do not edit anything below this line >>>
   try {
      if ( window.XMLHttpRequest ) {
      xmlHttp = new XMLHttpRequest();
   } else if ( window.ActiveXObject ) {
         try {
         xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
         } catch( e1 ) {
         xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
         }
      }
   } catch( e2 ) {
   (( window.createRequest ) ? xmlHttp = window.createRequest() : xmlHttp = null );
   }
   (( xmlHttp.overrideMimeType ) ? xmlHttp.overrideMimeType("text/xml") : xmlHttp );
   if ( xmlHttp !== null ) {  
           xmlHttp.onreadystatechange = handleRequest;
   xmlHttp.open( method, encodeURI( url ), true );
   (( xmlHttp.setRequestHeader && method === "POST" ) ?  xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded") : xmlHttp ); 
   xmlHttp.send((( method === "POST" ) ? querystr : null ));
   } else {
      alert("\nYour browser does not support AJAX Request!"); 
   }
};
// ]]>
</script>
</head>
<body>
<div id="main">
<form id="testform" action="action.php" method="post">
<div> 
<input type="text" id="barcode" name="barcode" value="" onblur="sendRequest( 'barcode' );" /> <br /> 
</div>
</form>
<div id="request">
<!-- Results' will be displayed here -->
</div>
</div> 
</body>
</html>
 
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html id="xhtml10S" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://www.w3.org/2005/10/profile">
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Free Live Help!</title>
<script id="script15" type="text/javascript">
// <![CDATA[
var handleRequest = function() { 
   var div = (( document.getElementById ) ? document.getElementById("request") : document.all.request );
   response = xmlHttp.responseText;
   if (( xmlHttp.readyState === 4 ) || ( xmlHttp.readyState === "complete" )) {
       if ( xmlHttp.status === 200 ) {
div.innerHTML = response; // If the user have provided sufficient data on its entry then you'll get the response from the server without submitting the form.
         }
      }
   };

var sendRequest = function( ids ) {
   ids = (( document.getElementById ) ? document.getElementById( ids ) : document.all[ ids ] ); // input element, referred as the "barcode field"

   url = "action.php?"; // URL for the form processing.
   querystr = encodeURIComponent( "barcode=" + ids.value ) // query string that will be sent to the server, ( fix appropriate value as needed ).
   xmlHttp = null;
   method = "POST"; // Request method can be set to ( GET or POST ).

// Do not edit anything below this line >>>
   try {
      if ( window.XMLHttpRequest ) {
      xmlHttp = new XMLHttpRequest();
   } else if ( window.ActiveXObject ) {
         try {
         xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
         } catch( e1 ) {
         xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
         }
      }
   } catch( e2 ) {
   (( window.createRequest ) ? xmlHttp = window.createRequest() : xmlHttp = null );
   }
   (( xmlHttp.overrideMimeType ) ? xmlHttp.overrideMimeType("text/xml") : xmlHttp );
   if ( xmlHttp !== null ) {  
           xmlHttp.onreadystatechange = handleRequest;
   xmlHttp.open( method, encodeURI( url ), true );
   (( xmlHttp.setRequestHeader && method === "POST" ) ?  xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded") : xmlHttp ); 
   xmlHttp.send((( method === "POST" ) ? querystr : null ));
   } else {
      alert("\nYour browser does not support AJAX Request!"); 
   }
};
// ]]>
</script>
</head>
<body>
<div id="main">
<form id="testform" action="action.php" method="post">
<div> 
<input type="text" id="barcode" name="barcode" value="" onblur="sendRequest( 'barcode' );" /> <br /> 
</div>
</form>
<div id="request">
<!-- Results' will be displayed here -->
</div>
</div> 
</body>
</html>

•

Join Date: Jul 2008

Posts: 148

Reputation: mschroeder is on a distinguished road

Solved Threads: 25

mschroeder mschroeder is offline

Offline

Junior Poster

Re: Ajax auto submit form without buttons?

#12

Jun 12th, 2009

@essential

I may be wrong, but wouldn't the onblur event mean the field needs to lose focus?

If its auto-submitting the form then it should probably wait for a delay indicating the user has finished typing. Something like the solution posted in the comments on this site: http://www.openjs.com/scripts/events...ter_typing.php works very elegantly for this.

I didnt see anything in your code like this, so i apologize if i missed it.

If you're question/problem is solved don't forget to mark the thread as Solved!

-- Code I post is usually but not always tested. If it is tested it will be against 5.2.11 or 5.3.0

•

Join Date: Aug 2008

Posts: 954

Reputation: essential will become famous soon enough

Solved Threads: 131

essential

Offline

Posting Shark

Re: Ajax auto submit form without buttons?

#13

Jun 12th, 2009

Or if you just want to submit the form automatically, w/o using any of those fancy button's, then you can simply apply the script provided below along with your page:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html id="xhtml10S" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://www.w3.org/2005/10/profile">
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Free Live Help!</title>
<script id="script15" type="text/javascript">
// <![CDATA[
var submitForm = function( form ) {
   var viaID = Boolean( document.getElementById );
   try { 
   form = document.forms[ form ];
   } catch( e ) {
   form = (( viaID ) ? document.getElementById( form ) : (( document.all && !viaID ) ? document.all[ form ] : document.layers[ form ] ));
   } if (( form ) && ( form.barcode.value || form.barcode.length )) {
   // form.action = "action.php" // if you need to change something on the action URL, you can do it here.
   alert("Your barcode ( #" + form.barcode.value + " ) entry has been validated, press ok to continue.");
   form.submit();
   return true;
   } alert("Insufficient data, please enter your barcode #");
   return false;
};
 
// ]]>
</script>
</head>
<body>
<div id="main">
<form id="testform" action="action.php" method="post">
<div> 
<input type="text" id="barcode" name="barcode" value="" onblur="submitForm( 'testform' );" /> <br /> 
</div>
</form>
 
</div> 
</body>
</html>
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html id="xhtml10S" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://www.w3.org/2005/10/profile">
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Free Live Help!</title>
<script id="script15" type="text/javascript">
// <![CDATA[
var submitForm = function( form ) {
   var viaID = Boolean( document.getElementById );
   try { 
   form = document.forms[ form ];
   } catch( e ) {
   form = (( viaID ) ? document.getElementById( form ) : (( document.all && !viaID ) ? document.all[ form ] : document.layers[ form ] ));
   } if (( form ) && ( form.barcode.value || form.barcode.length )) {
   // form.action = "action.php" // if you need to change something on the action URL, you can do it here.
   alert("Your barcode ( #" + form.barcode.value + " ) entry has been validated, press ok to continue.");
   form.submit();
   return true;
   } alert("Insufficient data, please enter your barcode #");
   return false;
};
    
// ]]>
</script>
</head>
<body>
<div id="main">
<form id="testform" action="action.php" method="post">
<div> 
<input type="text" id="barcode" name="barcode" value="" onblur="submitForm( 'testform' );" /> <br /> 
</div>
</form>

</div> 
</body>
</html>

•

Join Date: Aug 2008

Posts: 954

Reputation: essential will become famous soon enough

Solved Threads: 131

essential

Offline

Posting Shark

Re: Ajax auto submit form without buttons?

#14

Jun 12th, 2009

Hi mschroeder,

Sorry i didnt noticed that you had a post.

I understand your point, but it's the only way that i can perform to complete all my entries in the field, preventing the post to get submitted with insufficient data.

It's up to eshko on what event he prefer to use to make his AJAX call. It's either 
so what about you? What do you think is best for this call?

•

Join Date: Apr 2009

Posts: 818

Reputation: Airshow is on a distinguished road

Solved Threads: 116

Airshow

Offline

Practically a Posting Shark

Re: Ajax auto submit form without buttons?

#15

Jun 12th, 2009

Whoops, I just discovered Page 2 after drafting something.

Much simpler than Essential's but here it is anyway:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script language="javascript" type="text/javascript">
function checkForm(f){
	var barcodeDefault = "Enter a barcode";
	if( f.barcode.value == '' || f.barcode.value == barcodeDefault ){
		f.barcode.value = barcodeDefault;
		return false;
	}
	else{ return true; }
}
 
onload = function(){
	checkForm(document.forms.barcodeForm);
}
 
</script>
</head>
 
<body>
 
<form id="barcodeForm" action="action.php" method="post" onsubmit="return checkForm(this);">
<input name="barcode" type="text" value="" onfocus="this.value=''" onblur="if(checkForm(this.form))this.form.submit();" />&nbsp;
<input type="submit" value="Add" />
</form>
 
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script language="javascript" type="text/javascript">
function checkForm(f){
	var barcodeDefault = "Enter a barcode";
	if( f.barcode.value == '' || f.barcode.value == barcodeDefault ){
		f.barcode.value = barcodeDefault;
		return false;
	}
	else{ return true; }
}

onload = function(){
	checkForm(document.forms.barcodeForm);
}

</script>
</head>

<body>

<form id="barcodeForm" action="action.php" method="post" onsubmit="return checkForm(this);">
<input name="barcode" type="text" value="" onfocus="this.value=''" onblur="if(checkForm(this.form))this.form.submit();" />&nbsp;
<input type="submit" value="Add" />
</form>

</body>
</html>

As you will see, two events, barcode onblur and clicking Add, both cause the function checkForm() to be called, which in turn calls barcodeValid() (my test is VERY simple and can no doubt be improved).

On failure, checkForm puts a message in the barcode field and returnns false - thereby suppressing form submission. If the barcode is valid then the function returns true and form submission is allowed.

Just to round things off, checkForm is called on page load to cause the "Enter a barcode" message to appear in the barcode field by default.

I think that's about it. Probably too simple but the general structure may be about right.

Hope it helps

Airshow

Last edited by Airshow; Jun 12th, 2009 at 2:01 pm.

•

Join Date: Jun 2009

Posts: 8

Reputation: eshko is an unknown quantity at this point

Solved Threads: 0

eshko

Offline

Newbie Poster

Re: Ajax auto submit form without buttons?

#16

Jun 12th, 2009

Huh...
Guys, thank you very much... I didn't expected to someone do whole thing for me... Lol... So, thank you again... Hehe...

The both scripts works good!

Best regards,
Eshko

•

Join Date: Apr 2009

Posts: 818

Reputation: Airshow is on a distinguished road

Solved Threads: 116

Airshow

Offline

Practically a Posting Shark

Re: Ajax auto submit form without buttons?

#17

Jun 12th, 2009

Appologies, my script doesn't quite tally with my decription. I did a last minute change and forgot to re-paste it from the editor (FirstPage 2000 recommended). However the change was of no great import and the version I posted is functionally identical.

Airshow

50% of the solution lies in accurately describing the problem!