2017-05-11 4 views
1

私はAMPフォームを使用していますが、いくつかの追加要素を含むフォーム提出後に同じHTMLを表示する方法を理解できません。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

現在amp-formが唯一の直接の子として1つのsubmit-success要素をサポートしています(私は提供した例よりも複雑であるmentiondとして)マークアップをdublicateしますフォーム。これを変更したい場合は、GitHub issue on ampproject/amphtmlを開いて、複数のsubmit-success要素を許可するようにその要件を緩和するようリクエストすることができます。

実験用amp-bind拡張子を使用して、Actions and Events in AMPを使用して、フォーム送信の結果を含む成功メッセージのテキストを設定することもできます。しかし、実験的なAMP機能を使用すると、いくつかの意味と結果があります。これらを理解するには、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>

:このような

何かがトリックを行う必要があります

関連する問題