Jump to content



Photo

Firefox Submitting Form


  • Please log in to reply
3 replies to this topic

#1 JackNorrisRD

JackNorrisRD

    Newbie

  • Members
  • Pip
  • 1 posts

Posted 13 April 2012 - 9:33 PM

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
  • 0

#2 HartleySan

HartleySan

    Advanced Member

  • Members
  • PipPipPip
  • 2,903 posts
  • LocationColumbus, OH USA

Posted 13 April 2012 - 11:12 PM

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.
  • 2

#3 Larry

Larry

    Administrator/Writer

  • Administrators
  • 3,866 posts
  • LocationState College, PA (USA)

Posted 16 April 2012 - 8:20 AM

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.
  • 0

#4 benney

benney

    Newbie

  • Members
  • Pip
  • 4 posts

Posted 28 May 2012 - 10:08 PM

Thanks for this info.
  • 0