AMP在表单提交后显示相同的html，并使用其他元素的
AMP在表单提交后显示相同的html，并使用其他元素的
提问于 2017-05-11 14:51:52
我使用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>回答 1
Stack Overflow用户
回答已采纳
发布于 2017-05-11 18:11:43
目前，amp-form只支持一个submit-success元素作为窗体的直接子元素。如果您希望改变这种情况，您可以打开一个关于ampproject/amphtml的GitHub问题请求放宽该要求，以允许多个submit-success元素。
您还可以使用实验性的amp-bind扩展，并使用AMP中的动作和事件设置带有表单提交结果的成功消息的文本。然而，当使用实验AMP特性时，会有一些暗示和后果。要理解这些，请参阅实验特征上的文档。
像这样的事情应该能起作用：
<!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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43918898
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号