ajax form submit with mootools

Question

I have a site that I built way back in 2007.. I had done some ajax stuff, and it worked fine.. Today, that site owner contacted me and said he noticed the forms were no longer working.

I went to take a look and the console showed that upon submitting it was getting an error: Refused to set unsafe header "Connection"

I assumed this had to be a change in browser security or something, since no code had changed and everything worked fine last time I looked at it.... So I did some googling and found some others mention this, and their solution was to update mootools.. I did, and what a headache, the entire API had changed.. So I fixed everything, and it seemed like it should all work, but it didn't.

$('application_form').addEvent('submit', function(e) {
  new DOMEvent(e).stop();

  updateText("Sending...");
  var progress_bar = $('bar');
  progress_bar.empty().addClass('ajax-loading');
  this.send({
    update: progress_bar,
    onSuccess: function(e) {
      progress_bar.removeClass('ajax-loading');
      (function() { mySlide.slideOut() }).delay(1500);
    }
  });
});

This results in an ajax request going to the url [Object object], rather than the actual .php script specified in the application_form's action attribute... I tried specifying a url option to tell it not to go to [Object object] but no good...

score 0 · Answer 1 · answered Jan 05 '12 at 04:36

Here's a jsfiddle with a working example based on yours.
It shouldn't be too hard to upgrade yours.

http://jsfiddle.net/K976E/3/

Here's the html code in case the jsfiddle gets gone.

<!DOCTYPE HTML>
<html>
    <body>
        <form id='application_form' action='http://www.scoobydoo.com/cgi-bin/scoobysnack'>
            Count of Scooby Snacks: <input type='text' size='5' /><br />
            <input id='submitButton' type='submit' value='Rut Roh Shaggy!'/>            
        </form>
        <div id='bar' style='margin-top:20px'>
            Yikes!
        </div>

    </body>
</html>

And here's the javascript (place in onLoad):

new Form.Request('application_form', 'bar', {
    onSend: function(){
    updateText("Sending...");
    var progress_bar = $('bar');
    progress_bar.empty().addClass('ajax-loading');
        $('submitButton').set('value', 'Sending the form...').set('disabled', true);
    },
    onComplete: function(){
    var progress_bar = $('bar');
    progress_bar.removeClass('ajax-loading');
    //(function() { mySlide.slideOut() }).delay(1500);        
    }
});


function updateText(txt){
    // do something here...
}

... and no, I didn't re-enabled the submit button within the onComplete...

It's the id of whatever should be updated. From here: [link](http://mootools.net/docs/more/Forms/Form.Request), it says: "new Form.Request(form, update[, options]);" with update being: "update - (mixed) An Element or the string id of an Element to update with the response." I just threw in your progress bar id, but what it does is shortcut updating an element through an ajax call, with the inner html of the element replaced by the result. I never use it. — Perry Tew, Jan 05 '12 at 12:31

ajax form submit with mootools

1 Answers1