Polymer button should accept an optional submit attribute

samccone commented 10 years ago

When using polymers paper button within a form element, there is currently no way to submit said form with the paper button.

It would be dandy if I could set a type or submit attribute to make the button submit the form :)

Let me know if this is something you are interested in and I can PR it.

andrewebdev commented 10 years ago

I agree this would be good to have. I'm currently using on-click directly on the button as a workaround, but it would feel more natural to have a type="submit", and use the on-submit event directly on the form.

robdodson commented 10 years ago

That sounds handy. I'd be interested in checking out your PR if you have time to put one together. On Jul 21, 2014 7:10 AM, "Sam Saccone" notifications@github.com wrote:

When using polymers paper button within a form element, there is currently no way to submit said form with the paper button.

It would be dandy if I could set a type or submit attribute to make the

button submit the form :)

Let me know if this is something you are interested in and I can PR it.

— Reply to this email directly or view it on GitHub https://github.com/Polymer/paper-button/issues/14.

andrewebdev commented 9 years ago

Thought I'd drop this in, I've used this as a workaround to this limitation for now:

<polymer-element name="paper-submit" extends="button" noscript>
    <template>
        <core-style ref="controls"></core-style>
        <style>
            :host {
                background: transparent;
                border: 0;
                padding: 0;
                font-size: inherit;
            }
        </style>
        <paper-button><content></content></paper-button>
    </template>
</polymer-element>

And this can then be used like so:

<button type="submit" is="paper-submit">Create</button>

Credit: http://stackoverflow.com/a/26952329/433267

ssorallen commented 9 years ago

Nice workaround, @andrewebdev.

Is there a reason why paper-button shouldn't always extend button?

<button type="submit" is="paper-button">Create</button>

indolering commented 8 years ago

This is a pretty fundamental feature for buttons. It would be ideal if @samccone would submit his fix as a PR but this seems to have been forgotten. Could we at least get this assigned to a milestone?

indolering commented 8 years ago

@ssorallen I lose styling when I extend paper button....

samjonester commented 8 years ago

It's completely ridiculous that there is not form submit button in this widget library! what a common activity! I cannot believe it doesn't exist!

robdodson commented 8 years ago

ping @notwaldorf

notwaldorf commented 8 years ago

I assume this is for the 1.0 element and not the 0.5 element, since the latter is very deprecated, so that's how I will answer this.

Sometime in the near future, Polymer will add inheritance for elements, and you can make your own paper-button that has this feature, if you really want to. It's unlikely that we will add a Submit attribute to paper-button because:

the fact that buttons can magically submit forms is a bit weird. It's a weird encapsulation paradigm to have an element traverse its parent hierarchy until it finds a particular type (in this case, a form), and then do something to it. Implementation wise, this would be a bunch of extra work in an element which would not use this feature 90% of the time
there are many simple workarounds: you can wrap your paper-button in a <button type=submit>: http://jsbin.com/fayima/edit?html,output. Or you can call form.submit() in the paper-button's click handler (see jsbin for example).

samjonester commented 8 years ago

It wouldn't be a button that magically does something to its parent. It would be a button with the type submit. Form submitting is a VERY COMMON html concept. Not having a submit button also means the form can't be submitted by pressing enter on any input within the form. Perhaps adding a new type to button isn't the correct solution and a new element type should be implemented. Form is also missing, but not necessary to be a paper element. Here is a reference for the specification. http://www.w3schools.com/html/html_forms.asp

notwaldorf commented 8 years ago

Have you checked out https://github.com/PolymerElements/iron-form?

samjonester commented 8 years ago

Thanks @notwaldorf close, but not quite. Still missing a submit input, meaning you can ONLY submit the form through a button's click action.

andrewebdev commented 8 years ago

after the explanation by @notwaldorf I think I'm in now in agreement. I think the behaviour of a button should probably more explicit rather than implicit.

It's really not that much more effort to add a submit handler on-click. This is the approach I used on this page here: https://www.evopoints.co.za/contact/

I guess there is another option, which is to create a completely new polymer element (paper-submit-button) which will have the submit behaviour. Being it's own element means that the extra code required isn't included with the normal paper-button, but for those once in a while cases that it's required, the developer can just install the button and use that.

samjonester commented 8 years ago

@andrewebdev Have you ever hit enter after typing your password into a login form on any web page on the entire internet, ever? That's why you need a submit input.

andrewebdev commented 8 years ago

@samlawrencejones which is why I mentioned in my third paragraph that the better solution is probably to create a new element for this, rather than bake the extra functionality into an existing element, where it will only be used a fraction of the time.

robdodson commented 8 years ago

Have you ever hit enter after typing your password into a login form on any web page on the entire internet, ever?

@samlawrencejones please be respectful. I don't think phrasing comments in this fashion is constructive to the discussion.

As Monica mentioned, we'll be rolling inheritance into Polymer and at that point it may make the most sense for a developer to inherit from paper-button and add submit behavior.

notwaldorf commented 8 years ago

Have you ever hit enter after typing your password into a login form on any web page on the entire internet, ever?

Adding a type="submit" won't actually help with this problem because the native <form> element does not track any custom elements. So _even if+ you had <paper-button type="submit">, the form would not even look at it; it only tracks elements with the tags input and button. We cannot modify the native form, since that implementation is baked inside the browser; this is why if you want to use a native for, you have to work around it with elements that the native <form> does know about. In the jsbin I provided (http://jsbin.com/fayima/edit?html,output), you'll notice that pressing enter in the input does submit the form, and that's because we wrapped the <paper-button> in <button>, an element the <form> understands

andrewebdev commented 8 years ago

oh that's a neat solution @notwaldorf

MarcMouallem commented 8 years ago

@notwaldorf

I understand your view, and thank you for taking the time to address our concerns.

IMHO …

Polymer like any other web frame work rest on top of the native DOM, which means to a large extent developers must work with HTML, even when it makes our code bloated. The <paper-input> template incorporates a native <input>, presumable to tap into the features the input element provides.

<button type=“submit”> does not seem different. Like the features of <input>, the type=“submit” feature is commonly used, so much so that it has become customary for forms to incorporate a button for submission. Like it was done so for <paper-input>, it seems as if <button> can be incorporated into the template of <paper-button>, and all its paper button derivatives.

Thank you for an awesome platform, and I’m excited about its future development.

googlearchive / paper-button

Polymer button should accept an optional submit attribute #14

button submit the form :)