Laravel提交按钮

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

使用下面的一个。在你的情况下编号不正确

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

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中的两个作为变量调用，脚本将不会与彼此冲突。

希望这会有所帮助！