AMP 表单 - 在表单提交后显示相同的 html 和一些附加元素

Question

我正在使用 AMP 表单，无法弄清楚如何在表单提交后显示相同的 html 和一些附加元素。

一般来说，我的标记比较复杂，但这里有一个简单的例子来说明我需要做什么：

<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>

我知道我可以使用这样的东西，但不想复制标记（正如我提到的，它比提供的示例更复杂）：

<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>

Answer 1

目前 amp-form 仅支持一个 submit-success 元素作为表单的直接子元素。如果您希望对此进行更改，您可以打开 GitHub issue on ampproject/amphtml 请求放宽该要求以允许多个 submit-success 元素。

您也可以使用实验性的 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。

像这样应该可以解决问题：

<!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>

AMP 表单 - 在表单提交后显示相同的 html 和一些附加元素

AMP Form - Show same html after form submit with the some additional element's

amp-html

accelerated-mobile-page