如何在AMP上提交时更改输入提交文本值？

Question

我有一个简单的放大器形式，我想在表单提交时更改输入提交的文本：

<form method="POST" class="p2" action-xhr=".../api/contacts" custom- 
  validation-reporting="as-you-go" target="_top">
 <input name="phone" id="phone_input" required>

 //Change the value from Submit to Submitting... when the user clicks
 <input id="btn-form-submit" type="submit" value="Submit">
  <div id="submit-success" submit-success>
    <template type="amp-mustache">
       <h6>Success!</h6>
    </template>
  </div>
</form>

有可能吗？

Answer 1

我想到两个选择：

1. 使用amp-bind并将按钮的value绑定到一个状态。 添加一些开始状态：

   <amp-state id="formText">
     <script type="application/json">
       {
         "submit": "Submit"
       }
     </script>
   </amp-state>

   然后使用[value]将此状态绑定到您的按钮：

   <input id="btn-form-submit"
          type="submit"
          value="Submit"
          [value]="formText.submit">

   最后，在表单的AMP.setState事件上调用submit以更改状态，这将导致更改绑定属性（您可能还希望使用submit-success和submit-error事件将其恢复为“提交”）：

   <form method="POST"
         class="p2"
         action-xhr=".../api/contacts"
         on="submit:AMP.setState({formText: {submit: 'Submitting'}}); submit-success:AMP.setState({formText: {submit: 'Submit'}}); submit-error:AMP.setState({formText: {submit: 'Submit'}})">

2. 在:before pseudo-element上使用CSS <button>动态更改文本。 用<input>替换你的<button>：

   <button id="btn-form-submit" type="submit" aria-label="Submit"></button>
   <!-- We removed <input id="btn-form-submit" type="submit" value="Submit"> -->

   现在使用content CSS attribute提供按钮文本，包括基本情况（“提交”）和提交时：

   #btn-form-submit:before {
       content: "Submit";
   }
   
   form.amp-form-submitting #btn-form-submit:before {
       content: "Submitting";
   }