AMP: How to submit form on change event with condition

Question

AMP: How to submit form on change event with condition

2.3k Views Asked by Yurii Hierasin At 20 October 2024 at 18:55

I have couple linked dropdowns and want to prevent form submit on change event if linked dropdown is empty.

<form id="foo">
    <select name="first" on="change:AMP.setState({settings: {first: event.value}}),foo.submit" >
        ...
    </select>

    <select name="second" on="change:AMP.setState({settings: {second: event.value}}),foo.submit" >
        <option value=0> Please select </option>
        ...
    </select>

</form>

Can i check state and then submit form if the value is appropriate? Something like:

<select name="first" on="change:AMP.setState({settings: {first: event.value}}),settings.second ? foo.submit : nothing to do" >

for the first dropdown to avoid form submit when I select new value, because second not welected yet.

Tried make it with validation, but it not work with dropdown, input works fine.

            <input type="text"
                   id="show-first-on-submit-name"
                   name="name"
                   placeholder="Digit..."
                   required
                   on="change:AMP.setState({settings: {testing: event.value}}),requirements-form.submit"
                   pattern="^([1-9][0-9]*)$">
            <span visible-when-invalid="valueMissing"
                  validation-for="show-first-on-submit-name"></span>
            <span visible-when-invalid="patternMismatch"
                  validation-for="show-first-on-submit-name">
              Please enter not '0'
            </span>

            <select name="purpose"
                    id="purpose"
                    pattern="^([1-9][0-9]*)$"
                    required
                    on="change:AMP.setState({settings: {purpose: event.value}}),requirements-form.submit">
                <option value="0">Please select</option>
                <option value="1">One</option>
            </select>
            <span visible-when-invalid="valueMissing"
                  validation-for="purpose">missing</span>
            <span visible-when-invalid="patternMismatch"
                  validation-for="purpose">wrong</span>

Original Q&A

There are 1 best solutions below

**Chickenrice** · Answer 1

Validating form by converting input status into an amp-state object and checking them when change event occurs is a little circuitous.

In my opinion it would be more easier to use HTML5 Form validation API (AMP use it as well) to handle input validation works. All you need to do is add required attribute to your <select> element and remove onChange validation logic.

Here is a simple example:

<!doctype html>
<html ⚡>
<head>
  <meta charset="utf-8">
  <title>My AMP Page</title>
  <link rel="canonical" href="self.html" />
  <meta name="viewport" content="width=device-width,minimum-scale=1">
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
  <style amp-custom>
    h1 {
      margin: 1rem;
    }
  </style>
</head>
<body>
  <form target="_blank" action="/">
    <select name="tier1" required>
      <option value="">Please select</option>
      <option value="opt1">tier1 - opt1</option>
      <option value="opt2">tier1 - opt2</option>
    </select>
    <select name="tier2" required>
      <option value="">Please select</option>
      <option value="opt1">tier2 - opt1</option>
      <option value="opt2">tier2 - opt2</option>
    </select>
    <input type="submit" value="submit" />
  </form>
</body>
    </html>

Example screenshot:

AMP: How to submit form on change event with condition

There are 1 best solutions below

Related Questions in FORM-SUBMIT

Related Questions in ONCHANGE

Related Questions in AMP-HTML

Related Questions in GOOGLE-AMP

Trending Questions

Popular # Hahtags

Popular Questions