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中的兩個作爲變量調用，腳本將不會與彼此衝突。

希望這會有所幫助！