Javascript未插入输入

Question

我一直在尝试使用条纹来接受付款，我一直试图从我发现的指南中为它制作一个粗糙的原型，但我似乎无法得到它的工作。提交后，名为“stripeToken”的新输入从不插入。这导致我的PHP脚本永远不会执行。我试图理解为什么它永远不会插入。这里的脚本：

的Javascript：（在页面头部）

<script src="https://js.stripe.com/v2/"></script> 
    <script type="text/javascript"> 
     Stripe.setPublishableKey('mykeyishere'); 
    </script> 
    <script> 
     // Event Listeners 
     $('#payment-form').on('submit', generateToken); 

     var generateToken = function (e) { 
      var form = $(this); 

      // No pressing the buy now button more than once 
      form.find('button').prop('disabled', true); 

      // Create the token, based on the form object 
      Stripe.create(form, stripeResponseHandler); 

      // Prevent the form from submitting 
      e.preventDefault(); 
     }; 
    </script> 

HTML/JavaScript的：（尝试JS都在头部和形式）

<form action="index.php" method="POST" id="payment-form"> 
       <script> 
        var stripeResponseHandler = function (status, response) { 
         var form = $('#payment-form'); 

         // Any validation errors? 
         if (response.error) { 
          // Show the user what they did wrong 
          form.find('.payment-errors').text(response.error.message); 

          // Make the submit clickable again 
          form.find('button').prop('disabled', false); 
         } else { 
          // Otherwise, we're good to go! Submit the form. 

          // Insert the unique token into the form 
          $('<input>', { 
           'type': 'hidden', 
           'name': 'stripeToken', 
           'value': response.id 
          }).appendTo(form); 

          // Call the native submit method on the form 
          // to keep the submission from being canceled 
          form.get(0).submit(); 
         } 
        };</script> 
       <span class="payment-errors"></span> 

       <div class="row"> 
        <label> 
         <span>Card Number</span> 
         <input type="text" data-stripe="number"> 
        </label> 
       </div> 

       <div class="row"> 
        <label> 
         <span>CVC</span> 
         <input type="text" data-stripe="cvc"> 
        </label> 
       </div> 

       <div class="row"> 
        <label> 
         <span>Expiration (MM/YYYY)</span> 
         <input type="text" data-stripe="exp-month"> 
        </label> 
        <input type="text" data-stripe="exp-year"> 
       </div> 

       <button type="submit">Submit</button> 
      </form> 

Answer 1

您应该删除该脚本标记来自表单内部，并将其放在其他脚本标记旁边。

也尽量包裹的事件在的document.ready

$(document).ready(function(){ 
    $('#payment-form').on('submit', generateToken); 
    var stripeResponseHandler = function (status, response) { 
         var form = $('#payment-form'); 

         // Any validation errors? 
         if (response.error) { 
          // Show the user what they did wrong 
          form.find('.payment-errors').text(response.error.message); 

          // Make the submit clickable again 
          form.find('button').prop('disabled', false); 
         } else { 
          // Otherwise, we're good to go! Submit the form. 

          // Insert the unique token into the form 
          $('<input>', { 
           'type': 'hidden', 
           'name': 'stripeToken', 
           'value': response.id 
          }).appendTo(form); 

          // Call the native submit method on the form 
          // to keep the submission from being canceled 
          form.get(0).submit(); 
         } 
        }; 
      var generateToken = function (e) { 
       var form = $(this); 

       // No pressing the buy now button more than once 
       form.find('button').prop('disabled', true); 

       // Create the token, based on the form object 
       Stripe.create(form, stripeResponseHandler); 

       // Prevent the form from submitting 
       e.preventDefault(); 
      }; 


    }); 

结合从我可以猜（和它不是一个很好的猜测），是在＃付款形式不能正确，因为绑定脚本在dom准备好之前就已经运行了？

另一件事引起了我的注意。你有e.preventDefault（）阻止表单被提交，但你有一个响应处理程序。该响应处理程序是否被调用？是否有一些要求出现条带并返回？

检查您的网络窗口，看看是否发生。表单只会在form.get（0）.submit（）;中提交。响应处理程序的一部分，所以在分区完成之后。