Question

我有两个订阅表单，一个在主页面，另一个在页脚中。它们都具有相同的回调函数，但页脚中的那个不会触发脚本。

<footer id="main-footer">
    ...
    <form method="post" action="/subscribe" id="subscribe-form-footer">
        ...
        <button type="button" class="btn btn-default g-recaptcha" data-sitekey="-------" data-callback='onSubmitFooter'>{{trans('content.input_submit')}}</button>

    </form>
</footer>

我尝试将脚本放在文档的头部，页脚标记内，页脚标记的末尾，但它只是没有触发它。这是脚本：

<script>
    function onSubmitFooter(token) {
        document.getElementById("subscribe-form-footer").submit();
    }
</script>

修改

尽管感谢Prasad我更正了ID，但无论我将脚本放在哪里，问题仍然存在。

Answer 1

使用下面的一个。在你的情况下，id不正确

catch (EXCEPTION1 EX) {
    // ...
}
catch (EXCEPTION2 EX) {
    // ...
}

Answer 2

所以第一个问题在@prasad的答案中解决了。

您现在遇到的第二个问题如下：脚本以正确的方式调用，但仍然无法运行。首先，我可以看到你正在使用google recapthca。由于您告诉我们您在一个页面上使用了两个表单，这就是问题所在。

Google recapthca通常不支持同一页上的两个按钮

data-sitekey="-------"

当发生这种情况时，如果您不做一些调整，其中一个脚本将无法正常工作。

请参阅以下示例：

<script src="https://www.google.com/recaptcha/api.js?onload=myCallBack&render=explicit" async defer></script>
    <script>
      var recaptcha1;
      var recaptcha2;
      var myCallBack = function() {
        //Render the recaptcha1 on the element with ID "recaptcha1"
        recaptcha1 = grecaptcha.render('recaptcha1', {
          'sitekey' : '6Lc_0f4SAAAAAF9ZA', //Replace this with your Site key
          'theme' : 'light'
        });
        
        //Render the recaptcha2 on the element with ID "recaptcha2"
        recaptcha2 = grecaptcha.render('recaptcha2', {
          'sitekey' : '6Lc_0f4SAAAAAF9ZA', //Replace this with your Site key
          'theme' : 'dark'
        });
      };
    </script>

<div class="container">
      <div class="col-md-6">
          <form class="form-signin" role="form" action="validateform.php" method="POST">
                <div id="status">
                </div>
            <h2 class="form-signin-heading">Please sign in</h2>
            <label for="inputEmail" class="sr-only">Email address</label>
            <input type="email" id="inputEmail" value="mycodde@test.com" class="form-control" placeholder="Email address" required autofocus>
            <label for="inputPassword" class="sr-only">Password</label>
            <input type="password" id="inputPassword" value="rashid" class="form-control" placeholder="Password" required>
            <div id="recaptcha1"></div>
            <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
          </form>
      </div>
      <div class="col-md-6">
          <form class="form-signin" role="form" action="validateform.php" method="POST">
                <div id="status">
                </div>
            <h2 class="form-signin-heading">Sign Up Form</h2>
            <label for="inputEmail" class="sr-only">Email address</label>
            <input type="email" id="inputEmail" value="mycodde@test.com" class="form-control" placeholder="Email address" required autofocus>
            <label for="inputPassword" class="sr-only">Password</label>
            <input type="password" id="inputPassword" value="rashid" class="form-control" placeholder="Password" required>
        <div id="recaptcha2"></div>
            <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
          </form>
      </div>
    </div> <!-- /container -->

NO！此示例在此处不起作用，因为缺少某些要求，但它确实显示了如何在一个页面上配置2个google recaptcha按钮。通过添加两个不同的id's并在js中将它们作为变量调用，脚本不会相互冲突。

希望这有帮助！

Laravel提交按钮

2 个答案: