Amphtml: amp-form auto submit: option/action to reset form/inputs

[sebastianbenz]

Given a form which auto-submits a text input:

  <form id="todo"
        method="POST" 
        action-xhr="/advanced/todo/add" 
        target="_blank"
        on="submit-success:todos">
    <input type="text" name="todo" on="change:todo.submit">
  </form>

It'd be great if there'd be a way to clear the input field on successful form submit.

Please also see comments in https://github.com/ampproject/amphtml/issues/7688 regarding possible approaches for this issue.

[sebastianbenz]

@mkhatib @ericlindley-g FYI

[mkhatib]

We could expose a form.clear action similar to form.submit and that example would be written like:

  <form id="todo"
        method="POST" 
        action-xhr="/advanced/todo/add" 
        target="_blank"
        on="submit-success:todos.clear">
    <input type="text" name="todo" on="change:todo.submit">
  </form>

cc/ @rudygalfi

[sebastianbenz]

Would clear also submit the form or would it need to be combined with
submit?

On Mon, Feb 6, 2017 at 7:22 PM Mohammad Khatib [e-mail]
wrote:

We could expose a form.clear action similar to form.submit and that
example would be written like:

method="POST"
action-xhr="/advanced/todo/add"
target="_blank"
on="submit-success:todos.clear">

cc/ @rudygalfi https://github.com/rudygalfi

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

[mkhatib]

No clear is a reaction to a submission, so they're separate. The submit happens either by the user hitting enter while focused on input text, or blurring the text input (because of the on=change:form.submit)

The form is cleared in a reaction to submit event in on=submit:form.clear.

[sebastianbenz]

Ah - didn't realise that the action would go into the form. SGTM

On Mon, Feb 6, 2017 at 7:28 PM Mohammad Khatib [e-mail]
wrote:

No clear is a reaction to a submission, so they're separate. The submit
happens either by the user hitting enter while focused on input text, or
blurring the text input (because of the on=change:form.submit)

The form is cleared in a reaction to submit event in on=submit:form.clear.

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

[mkhatib]

Yeah my suggestion basically clears all the inputs - if another use-case is required to only affect one input, we could potentially expose a similar method per-input. Oh, also, just realized that amp-bind might be able to help with this in general - cc @choumx

[choumx]

amp-bind could do this but the markup wouldn't be as clean since you'd need to bind an intermediary variable.

[sebastianbenz]

@choumx how would you solve this with amp-bind?

[sebastianbenz]

Here is a workaround if you don't care about wether the form succeeds or not:

               <input type="reset" value="Reset" on="tap:my-form.submit">

@choumx any suggestions on how this could work with amp-bind?

[sebastianbenz]

Actually, the form status is still updated, so the workaround solves my problem. It's a bit ugly though...

Just realized this approach still has one major problem: the input should only be cleared if the form submitted successfully.

[choumx]

You could use on="submit:myAmpStateId" action on the form and bind the input element's [text] to something like myAmpStateId.success ? '' : 'default value'.

There is a limitation with this since there's currently no way to use the input's current value instead of 'default value'. Perhaps something amp-bind should support.

[kul3r4]

@aghassemi, is there any progress on this?

[aghassemi]

@kul3r4 not yet, @ericlindley-g making this a Prioritized FR since we have clear use-cases waiting for implementation.

[ericlindley-g]

@sebastianbenz @kul3r4 — is the use case here the more app-like TODO list, or do you have other use cases in mind as well?

[sebastianbenz]

@ericlindley-g Another common use case is bookings, e.g. add multiple persons to a booking.

[kul3r4]

@ericlindley-g I found this as part of #7688 when trying to implement a quiz.

[kul3r4]

This is an example where the reset option is needed: when "retake quiz" is clicked, the form should be cleared and all should start again

[ankur0890]

Hi Guys
Any progress on this??

[namtenten]

I tried like below, but it does not work.

        on="submit-success:todo.clear"

↓

<form id="todo"
        method="POST" 
        action-xhr="/advanced/todo/add" 
        target="_blank"
        on="submit-success:todo.clear">
    <input type="email" name="email">
    <input type="submit">
  </form>

I also want to get an error message from a serverside (PHP code), does anyone have any idea?

[ericlindley-g]

@ankur0890 and @namtenten — I don't think anything has been built in the meantime to solve this, but I'd be curious to hear about your use cases to make sure it's factored into whatever approach is used here. Thanks!

/cc @cvializ for visibility

[ankur0890]

@ericlindley-g I am allowing multiple form submissions through xhr on my page. I need to clear the form each time user submits it successfully so that he can fill the new data. So some optional configuration will be good. Don't want to use amp-bind for maintaining each form element state. Stackoverflow

[ericlindley-g]

Got it — thanks for explaining. The approach you've recommended sounds promising (and I would be curious to hear feedback from @aghassemi and @cvializ when the team has bandwidth to look into it).

[westonruter]

Another use case is an article comment form. We'd like to be able to be able to have a user submit a comment form and then, upon successful:

1. Clear/reset the form.
2. Show a success message like “Your comment has been submitted for moderation” or “Your comment will appear soon”.
3. Trigger an update on the associated amp-live-list that contains all of the comments so that it will appear there as soon as possible. Ideally the comment would then be scrolled into view.

[cvializ]

First Timers Only

If you're new to contributing to the AMP Project, this issue could be a great way for you to learn the ropes and start contributing to AMP!

What you will need to know

HTML, CSS, JavaScript

Background

amp-form is an AMP extension that controls the behavior of HTML forms and their requests and validation in AMP documents. When users submit forms online, occasionally the publisher will want to clear the values from the first submission so the user can easily fill out the form again, like a comment box. Normally the publisher might implement some JavaScript code to clear the form fields, but in AMP publishers are not allowed to write their own JavaScript.

AMP implements actions and events to enable interactivity between the user and AMP components and other AMP components. This issue proposes that an additional action, clear, be added to the amp-form component to allow users to clear forms.

For additional context, see the comments above.

Motivation

Users will be able to fill out forms more easily, and publishers will be able to implement clearable forms without adding cumbersome amp-bind code.

The feature

Add a new clear action handler to amp-form.js. It's up to you to implement the handleClearAction_ function. Make sure to write tests!

  actionHandler_(invocation) {
    if (invocation.method == 'submit') {
      this.whenDependenciesReady_().then(() => {
        this.handleSubmitAction_(invocation);
      });
+   } else if (invocation.method == 'clear') {
+     this.handleClearAction_(invocation);
    }
    return null;
  }

Step by step

• [ ] Claim this issue by adding a comment below. Please only claim this bug if you plan on starting work in the next day or so. (If you join the AMP Project we'll be able to assign this issue to you after you've claimed it.)
• [ ] If you aren't too familiar with Git/GitHub, see the Getting Started End-to-End Guide for an intro to Git & GitHub, and how to get a copy of the code. You can also refer to the Quick Start Guide for the necessary setup steps with less explanation than the End-to-End guide.
• [ ] Follow the instructions for building AMP.
• [ ] [Create a Git branch](https://github.com/ampproject/amphtml/blob/master/contributing/getting-started-e2e.md#create-a-git-branch) for making your changes.
• [ ] [Sign the Contributor License Agreement](https://github.com/ampproject/amphtml/blob/master/CONTRIBUTING.md#contributor-license-agreement) before creating a Pull Request. (If you are contributing code on behalf of a corporation start this process as early as possible.)
• [ ] Add the above code and implement the handleClearAction_ function.
• [ ] Write a test in test-amp-form.js. You can see how the test for handleSubmitAction_ works and mirror it.
• [ ] [Commit your changes](https://github.com/ampproject/amphtml/blob/master/contributing/getting-started-e2e.md#edit-files-and-commit-them) frequently.
• [ ] [Push your changes to GitHub](https://github.com/ampproject/amphtml/blob/master/contributing/getting-started-e2e.md#push-your-changes-to-your-github-fork).
• [ ] [Create a Pull Request](https://github.com/ampproject/amphtml/blob/master/contributing/getting-started-e2e.md#send-a-pull-request-ie-request-a-code-review). Mention Closes issue #7368 in the description. Mention @cvializ in your Pull Request description.
• [ ] [Respond to your reviewer's comments](https://github.com/ampproject/amphtml/blob/master/contributing/getting-started-e2e.md#respond-to-pull-request-comments) (if any).

Once approved, your changes will be merged. ⚡⚡⚡Congrats on making your first contribution to the AMP Project!⚡⚡⚡ You'll be able to see it live across the web soon!

Thanks, and we hope to see more contributions from you soon.

Questions?

If you have questions ask in this issue or on your Pull Request (if you've created one) or see the How to get help section of the Getting Started guide.

[dev-drprasad]

Hey @cvializ, I have not contributed to AMP before, but i know JS, AMP. can i take this issue ?

[cvializ]

Go ahead, I'll assign you! Thanks for contributing, and let me know if you have any questions.

[dev-drprasad]

Hey @cvializ @sebastianbenz @kul3r4 I am working on this issue. i need little help.

• do we need clear action only for submit-success and submit-error states ?
• once form submitted, form and its children has lot of extra classes, var substitutions added. do we need to remove those all extra classes and var substitutions ? if yes, my approach is to clone the form element as this.initForm_ in constructor and replace old this.form_ when clear action happens (is my approach good ?)
• where can i contact you guys if i have questions. is github issues fine ?

[cvializ]

The clear action may be triggered at any time, not only after submit-success or submit-error. Consider a button on the page that the user could press at any time

<form id="myForm"><input name="username"/></form>
<button on="tap:myForm.clear">Clear the form</button>

Great question, the form state should be reset to the state it was at when the page loaded, as if the user had entered no data. I do no think your method will work best, since there are event listeners etc bound to the form element that will not be attached if you simply clone the original form element tree. You can simply store the input values from the initial form (using getFormAsObject or similar method) and then reassign those values. Then reset the validation state using this.validator_.hideAllValidations().

That should be enough to get you started, but feel free to ask us any questions on this GitHub issue.

The docs on AMP Actions and Events should be helpful too if you'd like some general information: https://www.ampproject.org/docs/reference/amp-actions-and-events

[dev-drprasad]

got it

[dev-drprasad]

HI @cvializ , i guess we can't use this.validator_.hideAllValidations() because it works only with custom-validation-reporting option. correct me if i am wrong.

Since we can't remove validations , i am thinking of removing classes in handleClearAction_ method.
method looks like

handleClearAction_() {
    this.setState_(FormState_.INITIAL);
    this.form_.reset();
    this.form_.querySelectorAll('.user-valid,.user-invalid').forEach(elem => {
      elem.classList.remove('user-valid', 'user-invalid');
    });
    this.restoreInitialValues();   // did backup of initial values using getFormAsObject
    this.removeInvalidTypesClasses(); // remove validityState classNames also
    return;
}

One drawback of this approach is, if user|dev adds class names .user-valid or .user-invalid by him/herself, those will also get remove. One solution for this is throwing warning message at initial rendering, if they add .user-valid or user-invalid.

what is your opinion ?

[cvializ]

Ah good call, your understanding is correct. However, if a custom validator _is_ used, you will need to make sure the custom validator's state is reset when the form is cleared.

That code looks mostly correct, feel free to start implementing and testing!

You shouldn't have to worry about that here, since it would be unusual for a developer to add .user-valid or .user-invalid classes themselves, and I think the existing code already assumes that they won't be added at page load. But that was a good question.

[dev-drprasad]

@cvializ Thanks for clarification. I will start implementing.

[dev-drprasad]

@cvializ I raised pull request. But i am facing issue in signing CLA. My github account associated with aol mail. when i visited cla.developers.google.com/clas there is no option to change email (it is taking my gmail account id). but my commits associated with aol mail id. should i use only gmail id ??

[IamAlta]

@dev-drprasad @aghassemi @cvializ
Has this been completed?

[cvializ]

Yes it has, you can trigger it with an AMP action, e.g.

<button on="tap: myForm.clear">Clear form</button>

[IamAlta]

@dev-drprasad @aghassemi @cvializ
Thanks for the reply, cvializ.

[IamAlta]

@dev-drprasad @aghassemi @cvializ,

I have a form that uses amp-bind to complete an input when 2 other fields are completed.
When one of the two fields is changed, the third input field value is changed using the other 2 input values.

I need a cancel/clear feature but it seems that on="tap: myForm.clear" does not work when one field uses amp-bind.

Another caveat is that the form is posted to a 3rd-party domain, so I had to disable amp-form (not load the ...amp-form....js script) but use amp-html for the layout used by the rest of the website.

on="tap:ccform.clear" does not work for the input field with the amp-bind.
It also won't clear another field that has the value set when the form page is loaded.

See here https://codepen.io/iamalta/pen/wYmVbd

Am I doing this correctly or do I have to add more to the on="tap: ..." function to clear that field?

Thank you!

[jaygray0919]

is your first form closed?

[IamAlta]

@jaygray0919
Good eye - "First form" I removed that extra open form tag. My bad.
There is only one form on the page.
And, removing it didn't help. The form still doesn't clear.

[IamAlta]

@dev-drprasad @aghassemi @cvializ, @jaygray0919
Any progress on this?

[cvializ]

The amp-form clear action and <input type=reset> both use the browser's standard reset behavior. The problem here is that amp-bind mutates the value attribute, and the browser behavior for form.reset replaces any existing values in the input fields with the value attribute.

To work around this, you can use on="tap: AMP.setState. I updated your example here: https://codepen.io/anon/pen/mzzRom

I'll open an issue to have a discussion to clarify

[IamAlta]

Thank you @cvializ,
That worked for the last input box and I had to bind the first input box, too! Thank you!
Make it a wonderful skyday!

[cvializ]

You're welcome @IamAlta . Likewise! 🌅