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

本文介绍了无法在表单提交成功事件AMP上设置状态的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

when i am submitting a form on the submit-success event i am trying to submit another form but it results in an trust level error stating that the submit-success does not have the same level of trust to set the state.I checked that amp-form submit event and setState event have same trust level as HIGH but didnt find the trust level for submit-success event

"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无法工作

the setState on submit of form f1 wont work

推荐答案

好友，您的代码在哪里?为什么不能插入简单的有效AMP模板?您可能希望有人为您做任何事情，但这不会总是发生.

Buddy, where's your code? Why can't you insert a simple valid AMP template? You probably expect someone to do everything for you, but this will not always happen.

我试图做你写的事情，一切对我都有用，

I tried to do what you wrote and everything works for me, look:

<!--
     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 ⚡>

<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>

Codepen:: https://codepen.io/alexandr-kazakov/pen/wvGJvzJ?editors = 1000

这篇关于无法在表单提交成功事件AMP上设置状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！