Pressing enter on form input and changing default action (submit form)

Question

I have simple form with:

• two input fields facebook event link and name
• import details link next to facebook event link input - when I clickthis, it changes it's href attribute from /events/new to /events/new?fb_event_id={fb_event_id extracted from link} and makes new request with this updated href.
• submit button to submit form.

http://www.bootply.com/KMfGxnrqxf

When I fill facebook event link input with for example: https://www.facebook.com/events/123 and click import details it all works fine - changes link to /events/new?fb_event_id=123 and makes new request.

Now I try to do the same by pressing enter key instead of mouse click. It changes href to the correct one, but doesn't request this new url.

Any idea why?

Answer 1

The native anchor click behavior can be triggered using this:

$(element)[0].click();

It getting the first element of the elements array (DOM element instead of jQuery object).

Solution reference

Answer 2

When you trigger the click event using $('#import').click();, that only kicks off the JS event handlers. It does not trigger the natural event associated with that element, i.e. it will not actually redirect the page to the anchor's href. You need to add that redirect into your JS event handler using something like:

window.location.href = '/events/new?fb_event_id='+event_id;