943,515 Members | Top Members by Rank

Ad:
You are currently viewing page 2 of this multi-page discussion thread; Jump to the first page
Jun 12th, 2009
0

Re: Ajax auto submit form without buttons?

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

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <?xml version="1.0" encoding="utf-8" standalone="no"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  4. <html id="xhtml10S" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  5. <head profile="http://www.w3.org/2005/10/profile">
  6. <!--[if IE]>
  7. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  8. <![endif]-->
  9. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  10. <meta http-equiv="Content-Style-Type" content="text/css" />
  11. <meta http-equiv="Content-Script-Type" content="text/javascript" />
  12. <title>Free Live Help!</title>
  13. <script id="script15" type="text/javascript">
  14. // <![CDATA[
  15. var handleRequest = function() {
  16. var div = (( document.getElementById ) ? document.getElementById("request") : document.all.request );
  17. response = xmlHttp.responseText;
  18. if (( xmlHttp.readyState === 4 ) || ( xmlHttp.readyState === "complete" )) {
  19. if ( xmlHttp.status === 200 ) {
  20. 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.
  21. }
  22. }
  23. };
  24.  
  25. var sendRequest = function( ids ) {
  26. ids = (( document.getElementById ) ? document.getElementById( ids ) : document.all[ ids ] ); // input element, referred as the "barcode field"
  27.  
  28. url = "action.php?"; // URL for the form processing.
  29. querystr = encodeURIComponent( "barcode=" + ids.value ) // query string that will be sent to the server, ( fix appropriate value as needed ).
  30. xmlHttp = null;
  31. method = "POST"; // Request method can be set to ( GET or POST ).
  32.  
  33. // Do not edit anything below this line >>>
  34. try {
  35. if ( window.XMLHttpRequest ) {
  36. xmlHttp = new XMLHttpRequest();
  37. } else if ( window.ActiveXObject ) {
  38. try {
  39. xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  40. } catch( e1 ) {
  41. xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
  42. }
  43. }
  44. } catch( e2 ) {
  45. (( window.createRequest ) ? xmlHttp = window.createRequest() : xmlHttp = null );
  46. }
  47. (( xmlHttp.overrideMimeType ) ? xmlHttp.overrideMimeType("text/xml") : xmlHttp );
  48. if ( xmlHttp !== null ) {
  49. xmlHttp.onreadystatechange = handleRequest;
  50. xmlHttp.open( method, encodeURI( url ), true );
  51. (( xmlHttp.setRequestHeader && method === "POST" ) ? xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded") : xmlHttp );
  52. xmlHttp.send((( method === "POST" ) ? querystr : null ));
  53. } else {
  54. alert("\nYour browser does not support AJAX Request!");
  55. }
  56. };
  57. // ]]>
  58. </script>
  59. </head>
  60. <body>
  61. <div id="main">
  62. <form id="testform" action="action.php" method="post">
  63. <div>
  64. <input type="text" id="barcode" name="barcode" value="" onblur="sendRequest( 'barcode' );" /> <br />
  65. </div>
  66. </form>
  67. <div id="request">
  68. <!-- Results' will be displayed here -->
  69. </div>
  70. </div>
  71. </body>
  72. </html>
  73.  
Featured Poster
Reputation Points: 114
Solved Threads: 138
Posting Shark
essential is offline Offline
973 posts
since Aug 2008
Jun 12th, 2009
0

Re: Ajax auto submit form without buttons?

@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.
Sponsor
Reputation Points: 265
Solved Threads: 126
Practically a Master Poster
mschroeder is offline Offline
624 posts
since Jul 2008
Jun 12th, 2009
0

Re: Ajax auto submit form without buttons?

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:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <?xml version="1.0" encoding="utf-8" standalone="no"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  4. <html id="xhtml10S" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  5. <head profile="http://www.w3.org/2005/10/profile">
  6. <!--[if IE]>
  7. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  8. <![endif]-->
  9. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  10. <meta http-equiv="Content-Style-Type" content="text/css" />
  11. <meta http-equiv="Content-Script-Type" content="text/javascript" />
  12. <title>Free Live Help!</title>
  13. <script id="script15" type="text/javascript">
  14. // <![CDATA[
  15. var submitForm = function( form ) {
  16. var viaID = Boolean( document.getElementById );
  17. try {
  18. form = document.forms[ form ];
  19. } catch( e ) {
  20. form = (( viaID ) ? document.getElementById( form ) : (( document.all && !viaID ) ? document.all[ form ] : document.layers[ form ] ));
  21. } if (( form ) && ( form.barcode.value || form.barcode.length )) {
  22. // form.action = "action.php" // if you need to change something on the action URL, you can do it here.
  23. alert("Your barcode ( #" + form.barcode.value + " ) entry has been validated, press ok to continue.");
  24. form.submit();
  25. return true;
  26. } alert("Insufficient data, please enter your barcode #");
  27. return false;
  28. };
  29.  
  30. // ]]>
  31. </script>
  32. </head>
  33. <body>
  34. <div id="main">
  35. <form id="testform" action="action.php" method="post">
  36. <div>
  37. <input type="text" id="barcode" name="barcode" value="" onblur="submitForm( 'testform' );" /> <br />
  38. </div>
  39. </form>
  40.  
  41. </div>
  42. </body>
  43. </html>
Featured Poster
Reputation Points: 114
Solved Threads: 138
Posting Shark
essential is offline Offline
973 posts
since Aug 2008
Jun 12th, 2009
0

Re: Ajax auto submit form without buttons?

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?
Featured Poster
Reputation Points: 114
Solved Threads: 138
Posting Shark
essential is offline Offline
973 posts
since Aug 2008
Jun 12th, 2009
0

Re: Ajax auto submit form without buttons?

Whoops, I just discovered Page 2 after drafting something.

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

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <html>
  3. <head>
  4. <title>Untitled</title>
  5. <script language="javascript" type="text/javascript">
  6. function checkForm(f){
  7. var barcodeDefault = "Enter a barcode";
  8. if( f.barcode.value == '' || f.barcode.value == barcodeDefault ){
  9. f.barcode.value = barcodeDefault;
  10. return false;
  11. }
  12. else{ return true; }
  13. }
  14.  
  15. onload = function(){
  16. checkForm(document.forms.barcodeForm);
  17. }
  18.  
  19. </script>
  20. </head>
  21.  
  22. <body>
  23.  
  24. <form id="barcodeForm" action="action.php" method="post" onsubmit="return checkForm(this);">
  25. <input name="barcode" type="text" value="" onfocus="this.value=''" onblur="if(checkForm(this.form))this.form.submit();" />&nbsp;
  26. <input type="submit" value="Add" />
  27. </form>
  28.  
  29. </body>
  30. </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.
Sponsor
Reputation Points: 300
Solved Threads: 357
WiFi Lounge Lizard
Airshow is offline Offline
2,521 posts
since Apr 2009
Jun 12th, 2009
0

Re: Ajax auto submit form without buttons?

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
Reputation Points: 10
Solved Threads: 0
Newbie Poster
eshko is offline Offline
9 posts
since Jun 2009
Jun 12th, 2009
0

Re: Ajax auto submit form without buttons?

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
Sponsor
Reputation Points: 300
Solved Threads: 357
WiFi Lounge Lizard
Airshow is offline Offline
2,521 posts
since Apr 2009

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Extracting XML data using getElementsbyTagName
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Ajax modal form error handling





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC