CODEWITHSUNDEEP
javascriptfirefox
Martin Smellworse
Martin Smellworse

Reputation: 1752

Clicking submit button using javascript and Firefox

I guess I have never tried to do this before ... I have a button on a page.

<input type="submit" id="btn" value="Submit">

And a javascript function that includes:

function clickit()
{
alert(document.getElementById('btn').value);
document.getElementById('btn').click();
}

Using Firefox, the button is not clicked - i.e. the form is not submitted. The alert shows, but the form does not get submitted. Why won't Firefox click a button?

Upvotes: 0

Views: 1841

Answers (3)

RobG
RobG

Reputation: 147423

Why won't Firefox click a button?

I seem to recall that early versions of Firefox didn't allow calling of listeners that way for security reasons. However, I think those reasons have been addressed in other ways and now you should be able to call the click handler directly. The following submits the form in Firefox 34:

<form onsubmit="alert('submitted!!')">
  <input name="foo" value="foo">
  <input type="submit" id="aa">
</form>
<br>
<button onclick="document.getElementById('aa').click();">Click the submit button</button>

The form's submit listener is called and the form is submitted, so calling the submit button's click method is doing what it's supposed to.

This method doesn't work for all listeners though, click is a special case, see W3C DOM Level 3 Events Specification, §3.5 Activation triggers and behavior.

Upvotes: 0

Baer
Baer

Reputation: 3780

If you just need to submit a form with a button I would recommend that you just use a <div> element with a click handler rather than an input. It will give you a little more flexibility. If you do that then you should be able to just select your form and use the submit() API to submit the form.

If you really can't modify the code enough to do this and are having trouble selecting and submitting here is how you will need to do that using both jQuery and DOM.

The jQuery Way:

$("my selector").trigger("click")

You may run into issues around focus if you're running in PhantomJS or you've got a window like a test runner that is not in focus. In this case you can use:

$(<my selector>).triggerHandler(<my event>)

The DOM API way

This will just trigger the event (the equivalent of the first example)

// Create the event
var event = new CustomEvent("name-of-event", { "detail": "Example of an event" });

// Dispatch/Trigger/Fire the event
document.dispatchEvent(event);

You can also simulate a click with the actual DOM method

var button = document.getElementById('my-button');
button.click();

Upvotes: 0

Ryan
Ryan

Reputation: 14649

Use a div or anything besides a INPUT element if you want to bind the click event to it. If <INPUT> is inside a form body, you might run into weird issues.

Upvotes: 1

Related Questions