Amphtml: amp-form: Submit Form on Input Change

[sebastianbenz]

Currently forms require a separate submit button, would be great if it'd be possible to omit the submit button if the form contains a single checkbox. Each click on the checkbox would then trigger an XHR request.

This would enable implementing favorite/bookmark actions directly in AMPs with amp-form.

Example:

  <form method="post" action-xhr="https://example.com/bookmark/12345" action="https://example.com/bookmark/12345" target="_top">   
    <input type="checkbox" id="favorite" checked>
  </form>

//cc @mkhatib

[mkhatib]

Thanks for filing. I can see how this is useful. Will look more into this and see how we can introduce this.

I can see this might be also done by having two submit buttons and toggling visibility of each to favorite or remove from favorite. Any idea if a checkbox is what publishers are already using to implement a similar functionality?

[sebastianbenz]

I don't know any examples (haven't searched though) - but checkbox seems semantically to be the best element.

How would you toggle the visibility of two submit buttons?

[dvoytenko]

What do we think about on="change:form.submit" action?

[sebastianbenz]

sgtm. Should this work for other input types as well?
On Mon, 1 Aug 2016 at 17:22, Dima Voytenko [email protected] wrote:

What do we think about on="change:form.submit" action?

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/ampproject/amphtml/issues/4272#issuecomment-236630802,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAXOOC_c8ZuhIw6K3RYQ6EVczGurf3Nkks5qbh1VgaJpZM4JYHys
.

[dvoytenko]

I believe, yes, we can make it work on all other inputs. I'm personally always very confused about events that inputs sent, but, I think, onchange has become the most predictable one.

@mkhatib, do you know?

[mkhatib]

I like this approach. Thanks for the suggestion 👍

Agreed that change probably the most predictable (need to do some testing there and make sure it works well), we might want to expose other events or debounce change events for elements that would fire it consequently like text inputs (to avoid rapid unnecessary submissions to the form).

[dvoytenko]

This is another thing I always get confused with text inputs. But text inputs do provide their own "auto submit" approach. Right?

[fletc3her]

I have a navigation control which is implemented as a select within a form. When the select is changed I use jQuery to submit the form. If I could add on="change:myform.submit" to the select then I could use this same navigation control on my AMP pages.

[dandv]

This feature would make it much easier to implement favoriting indeed. I've realized that after hacking together the sample linked above:

• submitting the form on the first input change is easy enough
• displaying the Submit button with a style that reflects the item/page was favorited/bookmarked requires hiding the submit button and drawing the same submit button as an input in the <div submit-success>
• making that newly styled input element (not the original Submit) _toggle_ the favorite status seems impossible.

[mkhatib]

Just merged! Should be out in couple of weeks!

[sebastianbenz]

Nice! Thanks!
On Thu, 27 Oct 2016 at 23:06, Mohammad Khatib [email protected]
wrote:

Just merged! Should be out in couple of weeks!

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/ampproject/amphtml/issues/4272#issuecomment-256783592,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAXOOInK9dBcuXXgiuFSf-g92oe-qrVgks5q4SBtgaJpZM4JYHys
.

[dandv]

@mkhatib, @dvoytenko: is the submit-on-change behavior documented anywhere?

[dvoytenko]

@mkhatib Looks like, no. Not documented. Can we send PR for docs?

[mkhatib]

Yeah looks like. I'll open a bug for @bpaduch to update the docs.

[bpaduch]

@mkhatib - As you're familiar with what that behavior is, can you document it, and I'll review it?

[mkhatib]

Yes will do.

[dandv]

For the record, this is documented under Input events.

[umairansari02]

Anyone send me the complete AMP contact form (all related files which include in form) I have allaow access origion error