Ajax auto submit form without buttons?

[eshko]

Hi everyone,
I have one-field form on my website, which is supposed to be filled with barcode number. It was functional until few days age when the need emerged for the auto-submit.
As you can see, I have to make script which will automatically submit form when data is filled in barcode field.
Does anyone can give me some short guides how to do that, or just give me a link to some good tutorial or something?
Thanks...

[essential]

You can submit your form by stating it inside your conditional statement.
e.g

if ( true ) {
document.formId.submit(); return true; }
return false;

[Airshow]

Eshko,

Do you really mean AJAX?

Form submission is a feature of bog-standard HTML/HTTP and can be triggered either by the user clicking the form's submit button or from javascript, eg, forms[0].submit() , which is safe as long as you have just one form on the page. This approach will send a standard HTTP request and will cause the page to be refreshed or renewed depending on the form's action .

Yes, you can cause form data to be submitted via an "AJAX request" but you only do this when you need to submit the data without refreshing/renewing the page. I don't have time to get into a lengthy description of the javascript involved, but it is well very documented on the web.

In itself, "auto submit" infers the first type of request, which is why I question "AJAX". It is not uncommon for folks to think they are using AJAX when they are not (with sincere appologies if this doesn't apply to you).

Maybe you could advise as to which type of HTTP request you are using and also post some code (HTML & JS) so we can see what might be wrong.

Airshow

[eshko]

I don't get the point. I don't have any conditional statments. Markup looks like this:

<form method="post" action="action.php">
<input type="text" name="barcode" /><br />
<input type="submit" value="Add" />
</form>

I need to remove that submit button, and make it work on way I described in first post.

[eshko]

Ok, maybe I didn't described my problem well.
I'll try again.

I have site with mysql backend where I store informations about products. One part of site is one-field form, where the customer inserts the barcode of his product, and that form sends data to php script which is processing bla bla bla, and shows the result of that process...

Now, for costumer it will be simpler to do:
Costumer insert data in barcode field in main form and script automatically submits data to action.php which is processing it and shows the result on the same page as that main form.

*Costumers insert data with barcode reader, so process is very quickly.
*action.php already works, and it shows results in table.

thanks again

[Airshow]

Eshko,

OK, that sounds like genuine AJAX.

Would I be correct in understanding that you need to trigger an existing ajax script in response to a user event other than button click? If so it's trivial but I must fly now. I'm running late. Maybe Essential will come back ( he's very reliable :) ). If not I'll be here again in a few hours.

Airshow

[Airshow]

And with any luck my Daniweb email alerts will be arriving today .....
:(

[eshko]

Airshow,
thank you very much for helping me...

I solved one part of problem deciding that results from action.php won't be loaded in same page where main form is located. So the only problem I don't know how to figure out is how to make auto submit.

I don't have any ajax script on site yet.

I was looking on web for something that looks like what I need, and i found this: http://metak.com/

So, as you can see, this website have that auto-submitting system which I need for my website.

So, any ideas how to make it?

Thanks again :)

[essential]

Hi guys,

i think i'm hanging my head around here, reading all your post. And i must admit, Airshow, is more reliable than me and always have his effective, efficient and precise solution...

But i think Airshow is on the run right now, rushing his way to work...

If you need some help with the AJAX script, just let me know and i'll create one for you...

[eshko]

Hey,
first of all i want to thank you all for helping me.

essential,
as you can see in my posts, i need script for auto-submitting the form.
This is my markup:

<form action="action.php" method="post">
<input type="text" name="barcode" /> <input type="submit" value="Add" />
</form>

I want to make an auto-submitting script which will automaticaly submit this form when user inserts data in barcode field, without clickink on submit button... I don't have idea how to make this...

thanks... ;)

[essential]

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

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

[mschroeder]

@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/check_after_typing.php works very elegantly for this.

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

[essential]

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:

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

[essential]

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 <!-- onchange or onblur --> so what about you? What do you think is best for this call?

[Airshow]

Whoops, I just discovered Page 2 after drafting something.

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

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

[eshko]

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

[Airshow]

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

[tazosmr]

Here is a working auto-submit method: when page is loaded, it will the form will be immediately autosubmited (the values can be set with php variables).

<form action="page.php"  method="post">
<input type="text" name="example1" value="<?php echo $_POST['something1'];?>" />
<input type="text" name="example2" value="ANOTHER_YOUR_VALUE" />
<input type="submit" />
</form>

<SCRIPT LANGUAGE="JavaScript">document.forms[0].submit();</SCRIPT>

for example, the $_POST['something1'] value is received from the previous real-user submited Form, and this form can add another input with ANOTHER_YOUR_VALUE.

[murat.ozkan.9028194]

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

hi i m sorry but this page is working good its okkkk :)))
but we have a little problem about php page;because all page is coming with result but i dont want this.i want only result under the textbox .i want to show.
thank you for your understanding
roger sir