jQuery click event first then follow url

Question

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.

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

Maen · Accepted Answer · 2013-10-23 17:51:21Z

6

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');
       });
     });
});

answered Oct 23, 2013 at 17:51

Maen

10.7k3 gold badges47 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jade · Accepted Answer · 2013-10-23 17:55:11Z

3

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');         
  }
   });
}

answered Oct 23, 2013 at 17:55

Jade

6516 silver badges14 bronze badges

Comments

Tim Hettler · Accepted Answer · 2013-10-23 18:02:42Z

1

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 recommend 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;
})

answered Oct 23, 2013 at 18:02

Tim Hettler

1,2569 silver badges12 bronze badges

Comments

Bucket · Accepted Answer · 2013-10-23 17:46:11Z

0

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');
     });
});

answered Oct 23, 2013 at 17:46

Bucket

7,5599 gold badges38 silver badges48 bronze badges

1 Comment

Jaime Torres Over a year ago

Since his form is a post, you can never post the data and do a redirect. It's one or the other without using extraordinary measures (popup with parental redirect, etc).

Jaime Torres · Accepted Answer · 2013-10-23 17:46:53Z

0

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.

answered Oct 23, 2013 at 17:46

Jaime Torres

10.5k1 gold badge50 silver badges56 bronze badges

Collectives™ on Stack Overflow

jQuery click event first then follow url

5 Answers 5

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related