时间戳

首页 > 解决方案 > 无法在表单提交成功事件 AMP 上设置状态

javascript - 无法在表单提交成功事件 AMP 上设置状态

问题描述

当我在提交成功事件上提交表单时，我试图提交另一个表单，但它会导致信任级别错误，指出提交成功没有相同的信任级别来设置状态。我检查了 amp-form submit 事件和 setState 事件的信任级别与 HIGH 相同，但没有找到 submit-success 事件的信任级别

"submit-success" event with "low" trust is not allowed to invoke "amp.setState".

虚拟示例

<form id="f1" method="POST" xhr-action="dummyapi" on="submit-success:AMP.setState({dummy:true})">

<!--fields-->
</form>

<form id="f2" method="POST" xhr-action="dummyapi" on="submit-success:f1.submit">

<!--fields-->
</form>

提交表单 f1 时的 setState 不起作用

标签： javascriptamp-html

解决方案

兄弟，你的密码呢？为什么不能插入简单有效的 AMP 模板？您可能希望有人为您做所有事情，但这并不总是会发生。

我试着做你写的，一切都对我有用，看：

<!--
     This is the minimum valid AMP HTML document. Type away
     here and the AMP Validator will re-check your document on the fly.
-->
<!DOCTYPE html>
<html ⚡&gt;

<head>
  <meta charset="utf-8" />
  <link rel="canonical" href="self.html" />
  <meta name="viewport" content="width=device-width,minimum-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>
</head>

<body>
  <h2>First form</h2>
  <form id="secondForm" method="post" target="_top" action-xhr="https://amp.dev/documentation/examples/api/echo">
    <input type="hidden" value="hiddenValue">
    <div submit-success>Second form send successful!</div>
    <div submit-error>Second form send failed!</div>
  </form>

  <hr>

  <h2>Second form</h2>
  <form id="firstForm" method="post" target="_top" action-xhr="https://amp.dev/documentation/examples/api/verify-form-input-text-xhr" on="submit-success:secondForm.submit">
    <button type="submit">Submit</button>
    <div submit-success>First form send successful!</div>
    <div submit-error>First form send failed!</div>
  </form>
</body>

</html>

代码笔： https ://codepen.io/alexandr-kazakov/pen/wvGJvzJ ?editors=1000

推荐阅读