Jump to content
Larry Ullman's Book Forums

Recommended Posts

Larry,

 

I have 3 of your books and am considering 2 more. Thanks!

 

I have really been struggling with AJAX.

 

One of the main things that is causing me problems is that Firefox insists on submitting the form(s) even when I return a "false" from the javascript. The only way I have been able to stop this is by getting rid of the submit inputs which means I have to use workarounds, like a button input, for all the scripts from your book to deal with the changes to the form. I have been able to get an autocomplete search to work, so I'm not completely failing, but this has become more problematic with the scripts to add a record to a database table.

 

This is what I currently have for one of my scripts:

 

record add form:

 

<form method="post" id="member_add_form_ajax" onsubmit="member_add_xml()">

 

<input type="submit" value="Add Member" >

 

..text field inputs....

 

</form>

 

Then for the javascript:

 

 

function member_add_xml()

{

// Calls the ajax object from ajax.js

var member_add_ajax = getXMLHttpRequestObject();

 

// Check for ajax object; if none, don't use AJAX

if(member_add_ajax)

{

// Check to see if the page has an element with an id of "results"

if(document.getElementById('member_add_ajax_results'))

{

//window.alert('hello 1');

 

return false;

}

}

}

 

It reaches the window.alert, so I know it's getting that far. But the form submits.

 

Obviously, this code doesn't do anything, I've taken out everything between the window.alert and the return false; so that I can see if I can get the form to stop submitting without anything to trip it up.

 

If I could at least get the form to stop submitting, I would then not have to modify your scripts so much and could possibly get it to work.

 

Thank you for any help!

 

Jack

Share this post


Link to post
Share on other sites

Jack, the reason it's not working is because you need to set up an onsubmit event handler for the form. Here's a basic example that will work in Firefox.

(Please note that this example will not work in IE, because of the way I'm setting up the Ajax object.)

 

 

<!DOCTYPE html>

<html lang="en">

 <head>

   <meta charset="UTF-8">

   <title>Ajax form submit test</title>

 </head>

 <body>

   <form action="#" method="#" id="theForm">

     <input type="text">

     <input type="submit" value="Submit">

   </form>

   <script>

     var ajax = new XMLHttpRequest();

     document.getElementById('theForm').onsubmit = function () {

       if (ajax) {

         // Make your Ajax request here.

         alert('It works, and the form is not submitted the traditional way.');

         return false;

       }

     };

   </script>

 </body>

</html>

 

Hopefully you can modify my code to make it work for your project. Good luck.

  • Upvote 2

Share this post


Link to post
Share on other sites

Hey Jack,

 

Thanks for the nice words on the books. It is appreciated. Not to do a hard sell, but you may want to consider my JavaScript book, which just came out (http://amzn.to/wsdmkq). In it I talk about how to prevent default event behaviors. The approach you use depends upon how the event handler is set up in the first place, as HartleySan suggested.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×