Форма 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>

amp-html accelerated-mobile-page
person Ani    schedule 11.05.2017    source источник

Ответы (1)


arrow_upward
4
arrow_downward

В настоящее время amp-form поддерживает только один submit-success элемент как непосредственный дочерний элемент формы. Если вы хотите изменить это, вы можете открыть проблему GitHub на ampproject / amphtml, чтобы просьба ослабить это требование, чтобы разрешить использование нескольких 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>

person cvializ    schedule 11.05.2017