I want to call a click event and then follow the href url.

HTML Link:

<a class="autoSave" href="?year=2013&amp;week=42">←</a>

JS:

 $(document).ready(function() { 

     $('.autoSave').click(function(event){
       event.preventDefault();
       $('.submitForm').click(); //HTML Form that I'm wanting a submit to happen
       window.location = $(this).attr('href');
     });

 }); 

The code above will just follow the url and not submit the form. If I omit the window.location call, the submit works.

I want to call a click event and then follow the href url.

HTML Link:

<a class="autoSave" href="?year=2013&amp;week=42">←</a>

JS:

 $(document).ready(function() { 

     $('.autoSave').click(function(event){
       event.preventDefault();
       $('.submitForm').click(); //HTML Form that I'm wanting a submit to happen
       window.location = $(this).attr('href');
     });

 }); 

The code above will just follow the url and not submit the form. If I omit the window.location call, the submit works.

• javascript
• jquery
• html

• 1 Is your form a standard POST/GET HTML form, or does it have an ajax-based post method? – Jaime Torres Commented Oct 23, 2013 at 17:45
• My form is a standard POST – user1040259 Commented Oct 23, 2013 at 17:46

5 Answers 5

You don't wait for the .click() event to be fully handled to call window.location.

You should serialize your form, post it by ajax (with .post() for instance), and then, in the callback of the .post(), change your page :

$(document).ready(function() { 

     $('.autoSave').click(function(event){
       event.preventDefault();
       var serializedData = $('#yourForm').serialize(); //For example
       $.post('your/path/to/form/validator', serializedData, function(){
          window.location = $(this).attr('href');
       });
     });
}); 

You can't do a form submit without the browser trying to follow the form action. You need to use ajax to post your autosave data to your submit form and then do the window redirect when the ajax return successfully.

 $('.autoSave').click(function(event){
   event.preventDefault();
   $.ajax({
      url: "whatever your submitForm.click() file is",
      type: "POST",
      data: {
        formField: theValue
        anotherFormField: theValue,
  },
  success: function( data ) {
        window.location = $(this).attr('href');         
  }
   });
}

The problem is that the browser doesn't wait until the for m submission is done before it unloads the page and follows the link.

I'd remend moving the location redirection to the end of your form submission:

$('.autoSave').on('click', function(event){
   event.preventDefault();
   $('.submitForm').triggerHandler('submit', [$(this).attr('href')]); 
 });

$('.submitForm').on('submit', function(event, url) {
 // Do the thing
 window.location = url;
}) 

Give your form an id and use the submit() function to submit it. Use a jQuery selector on the ID instead of a class, especially if you recycle the class you gave it.

HTML

<form id="submitForm">...</form>

Javascript

$(document).ready(function() { 
    $('.autoSave').click(function(event){
        event.preventDefault();
        $('#submitForm').submit(); 
        window.location = $(this).attr('href');
     });
});

If your form is a standard form, the easiest thing to do is set a hidden input field value to the followup url:

$(document).ready(function() { 

     $('.autoSave').click(function(event){
       event.preventDefault();
       $('#redirectUrl').val($(this).attr('href'));
       $('.submitForm').click(); //HTML Form that I'm wanting a submit to happen
     });

 }); 

In this scenario, you will have to have full control of the server side and you will be able to test for that value and do a 301.

This is far from ideal. There are a lot of options, but almost all of them are hackish in order to double-post from a single event.