2

I'm using AMP form and can't figure out how to show same html after form submit with the some additional element's.

In general my markup is more complex, but here are simple example that illustrates what I need to do:

<form method="post" action-xhr="https://example.com/subscribe" target="_top" id="form1">
  <ul>
    <li>
        <h2>Title 1</h2>
        <input type="radio" value="1" name="answer" id="1" on="change:form1.submit">
        <!-- Show this only on submit-success and there are used
             some variables from amp-mustache -->                       
        <div>Some Html {{Votes}}</div>
    </li>

    <li>
        <h2>Title 2</h2>                                    
        <input type="radio" value="2" name="answer" id="2" on="change:form1.submit">
        <!-- Show this only on submit-success and there are used
             some variables from amp-mustache -->               
        <div>Some Html {{Votes}}</div>
    </li>       
    ...
  </ul>

</form>



I know that I can use something like this, but don't want to dublicate the markup (as I mentiond it is more complex than the provided example):

<form method="post" action-xhr="https://example.com/subscribe" target="_top" id="form1">
  <ul>
    <li>
        <h2>Title 1</h2>
        <input type="radio" value="1" name="answer" id="1" on="change:form1.submit">
    </li>

    <li>
        <h2>Title 2</h2>                                    
        <input type="radio" value="2" name="answer" id="2" on="change:form1.submit">
    </li>       
    ...
  </ul>

  <div submit-success>
    <template type="amp-mustache">
        <ul>
            <li>
                <h2>Title 1</h2>
                <input type="radio" value="1" name="answer" id="1" class="relative" on="change:form1.submit">                   
                <div>Some Html {{Votes}}</div>
            </li>

            <li>
                <h2>Title 2</h2>
                <input type="radio" value="2" name="answer" id="2" class="relative" on="change:form1.submit">
                <div>Some Html {{Votes}}</div>
            </li>
            ...
        </ul>
    </template>
  </div>
</form>
Vadim Kotov
  • 8,084
  • 8
  • 48
  • 62
Ani
  • 96
  • 11

1 Answers1

5

Currently amp-form only supports one submit-success element as an immediate child of the form. If you'd like this to change, you could open a GitHub issue on ampproject/amphtml to request relaxing that requirement to allow multiple submit-success elements.

You can also use the experimental amp-bind extension and use Actions and Events in AMP to set the text of the success message with the result of the form submit. However, there are some implications and consequences when using experimental AMP features. To understand these, see the docs on Experimental Features.

Something like this should do the trick:

<!doctype html>
<html ⚡>
<head>
    <meta charset="utf-8">
    <title>Form submit example</title>
    <link rel="canonical" href="https://www.example.com/form.amp.html" >
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-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>
    <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
    <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
</head>
<body>
  <p>Cast your vote</p>
  <form 
    method="post"
    action-xhr="https://www.example.com/subscribe"
    target="_top"
    on="submit-success:AMP.setState({formResponse: event.response}),title1Result.show,title2Result.show"
    id="form1"
  >
    <fieldset>
      <ul>
         <li>
           <h2>Title 1</h2>
           <input type="radio" value="1" name="answer" id="1" on="change:form1.submit">
           <div id="title1Result" hidden>Some Html <span [text]="formResponse.votes"></span></div>
         </li>
         <li>
           <h2>Title 2</h2>                                   
           <input type="radio" value="2" name="answer" id="2" on="change:form1.submit">
           <div id="title2Result" hidden>Some Html <span [text]="formResponse.votes"></span></div>
         </li>
      </ul>
    </fieldset>
  </form>
</body>
</html>
cvializ
  • 616
  • 3
  • 11