1

我正在使用 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>
4

1 回答 1

4

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

您还可以使用实验性amp-bind扩展并使用AMP 中的操作和事件来设置成功消息的文本以及表单提交的结果。但是，使用实验性 AMP 功能时会产生一些影响和后果。要了解这些，请参阅有关Experimental Features的文档。

这样的事情应该可以解决问题：

<!doctype html>
<html ⚡&gt;
<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>

于 2017-05-11T18:11:43.310 回答