HTML Form submit event not being triggered

[tjsavage]

From @steelbrain on July 21, 2015 1:3

Consider you have the following markup

<form id="form" action="javascript:" method="post">
  <input type="text" name="username" />
</form>
<script>
var form = document.getElementById("form")
form.on('submit', function(e){
  e.preventDefault()
  console.log("Hey")
})
</script>

now if you focus the input element and press enter, the submit event won't be triggered. Now if you add <button>Something</button> without the form bounds, pressing enter after focusing the event or clicking the button, both would work. Now if you replace that button with a paper-button <paper-button raised>Hey</paper-button>, submit will be impossible again because there's no button in the form. Now if you add is="iron-form" to the tag, and the form will be submitted by the paper-button now but it won't trigger the native submit event, not even the iron-form-submit event.

I am using Google Chrome 43.0.2357.134

Copied from original issue: Polymer/polymer#2128

[tjsavage]

From @steelbrain on July 21, 2015 1:10

Maybe this can be solved by making paper-button extend the button tag?

[tjsavage]

Hm... Seems to me like an issue with iron-form - will move there.

[tjsavage]

Moving again, correctly this time.

[tjsavage]

This issue was moved to PolymerElements/iron-form#32

[steelbrain]

IMO this issue belongs to paper-button, it should be extending the native button tag so that it would trigger both the native and the iron-form events, 'cause it should be possible to use paper-button with a regular form tag, in case you have a form with action of javascript: and are capturing the submit event and sending data through a websocket.

[notwaldorf]

Unfortunately, since the paper-button needs to style some things, it cannot extend a native button (at the moment you can't extend a native element and change its template).

I think the simplest solution is in your code that uses the form, add an on-click listener for your paper-button, and call form.submit() (see example: https://github.com/PolymerElements/iron-form/blob/master/demo/index.html#L93)

@cdata: do you see a different way for the paper-button to figure out which form it should submit? :(

[steelbrain]

@notwaldorf I am not sure if that would work, 'cause you can't submit a form until there's a button tag, I mean not at all. so to workaround this behavior, we will not only have to trigger submit on the form on paper-button's click, but we will also have to stick an empty button element somewhere in the form.

[notwaldorf]

@steelbrain I don't think that's correct. You can manually submit the iron-form without a native button. If you check out the iron-form demo (https://github.com/PolymerElements/iron-form/blob/master/demo/index.html#L54), removing the native button from any of the forms will not affect the actual form submission. (you can see that the data is printed out, and the request goes through)

[steelbrain]

I was actually talking about the vanilla HTML form :sweat_smile: