Laravel submit button

Question

メインページに1つ、フッターに2つのサブスクライブフォームがあります。どちらも同じコールバック関数を持っていますが、フッターのスクリプトはスクリプトをトリガーしません。

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

EDIT：

Prasadのおかげで、私はIDを修正していますが、私は、スクリプトを置くところはどこでも、問題はまだ解消されません。

Answer 1

以下を使用してください。あなたの場合、IDが正しくない

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

Answer 2

したがって、最初の問題は@prasadの答えで解決されています。

今は2番目の問題は次のとおりです。 スクリプトは正しい方法で呼び出されますが、実行されません。まず、google recapthcaを使用していることがわかります。 1ページに2つのフォームを使用していると言っているので、これが問題です。これはあなたには、いくつかの調整をしない場合のいずれかのスクリプトが正しく動作しませんが発生しない場合

Google recapthcaは、通常、同じ

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

で1ページに2個のボタンをサポートしていません。

は、以下の例を参照してください：

<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！この例は、いくつかの欠落している要件のためにここでは機能しませんが、1ページに2つのgoogle recaptchaボタンを構成する方法を示しています。 2つの異なるid'sを追加し、jsの両方で変数を呼び出すと、スクリプトは互いに衝突しません。

希望すると便利です。