Ani*_*Ani 2 amp-html accelerated-mobile-page
我正在使用 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>
目前amp-form仅支持一个submit-success元素作为表单的直接子元素。如果您希望对此进行更改，您可以在 ampproject/amphtml 上打开 GitHub 问题，请求放宽该要求以允许多个submit-success元素。
您还可以使用实验性amp-bind扩展，并使用AMP 中的操作和事件来设置成功消息的文本以及表单提交的结果。但是，使用实验性 AMP 功能时会产生一些影响和后果。要了解这些，请参阅有关实验功能的文档。
像这样的事情应该可以解决问题：
\n\n<!doctype html>\r\n<html \xe2\x9a\xa1>\r\n<head>\r\n <meta charset="utf-8">\r\n <title>Form submit example</title>\r\n <link rel="canonical" href="https://www.example.com/form.amp.html" >\r\n <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">\r\n <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>\r\n <script async src="https://cdn.ampproject.org/v0.js"></script>\r\n <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>\r\n <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>\r\n <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>\r\n</head>\r\n<body>\r\n <p>Cast your vote</p>\r\n <form \r\n method="post"\r\n action-xhr="https://www.example.com/subscribe"\r\n target="_top"\r\n on="submit-success:AMP.setState({formResponse: event.response}),title1Result.show,title2Result.show"\r\n id="form1"\r\n >\r\n <fieldset>\r\n <ul>\r\n <li>\r\n <h2>Title 1</h2>\r\n <input type="radio" value="1" name="answer" id="1" on="change:form1.submit">\r\n <div id="title1Result" hidden>Some Html <span [text]="formResponse.votes"></span></div>\r\n </li>\r\n <li>\r\n <h2>Title 2</h2> \r\n <input type="radio" value="2" name="answer" id="2" on="change:form1.submit">\r\n <div id="title2Result" hidden>Some Html <span [text]="formResponse.votes"></span></div>\r\n </li>\r\n </ul>\r\n </fieldset>\r\n </form>\r\n</body>\r\n</html>| 归档时间： |
|
| 查看次数： |
2345 次 |
| 最近记录： |