Javascript 未捕获的类型错误：无法读取条带支付的 null 属性“提交”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37600532/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Uncaught TypeError: Cannot read property 'submit' of null for stripe payment
提问by Codestudio
I am integrating stripe payments into my app. I switched out the Stripe default "Pay with Card" button for one I customized. After doing this, the test mode successfully pops-up and I can enter the test credentials. However, when I submit the test payment, and it is approved, it just stays on the same pin page rather than going to the charges page that I created for it.
我正在将条带支付集成到我的应用程序中。我为我定制的一个按钮切换了 Stripe 默认的“用卡支付”按钮。这样做后，测试模式成功弹出，我可以输入测试凭据。但是，当我提交测试付款并获得批准时，它只会停留在同一个 pin 页面上，而不是转到我为其创建的费用页面。
Note: the app would transition just fine from stripe payment to the charges create.html.erb page up until I replaced the default stripe payment button with my new customized button.
注意：应用程序可以很好地从条带支付过渡到费用 create.html.erb 页面，直到我用新的自定义按钮替换了默认的条带支付按钮。
Also, looking at developer tools I do note that it reads when I submit test payment:
另外，在查看开发人员工具时，我确实注意到它在我提交测试付款时显示：
Uncaught TypeError: Cannot read property 'submit' of null
I think this is referring to my code below where I submit the chargeForm.
我认为这是指我在下面提交chargeForm的代码。
Anyone encounter this issue before or know I can fix this? Many thanks!
任何人以前遇到过这个问题或知道我可以解决这个问题吗？非常感谢！
app/views/pins/_details.html.erb
app/views/pins/_details.html.erb
<%= form_tag charges_path, id: 'chargesForm' do %>
<script src="https://checkout.stripe.com/checkout.js"></script>
<%= hidden_field_tag 'stripeToken' %>
<%= hidden_field_tag 'stripeEmail' %>
<button id="btn-buy" type="button" class="btn btn-success btn-lg btn-block"><span class="glyphicon glyphicon-heart"></span> I want this!</button>
<script>
var handler = StripeCheckout.configure({
key: '<%= Rails.configuration.stripe[:publishable_key] %>',
token: function(token, arg) {
document.getElementById("stripeToken").value = token.id;
document.getElementById("stripeEmail").value = token.email;
document.getElementById("chargeForm").submit();
}
});
document.getElementById('btn-buy').addEventListener('click', function(e) {
handler.open({
name: 'OMG! <%= @pin.manufacturer %>',
description: '<%= @pin.description %>',
amount: 1000
});
e.preventDefault();
})
</script>
<% end %>
app/controllers/charges_controller.rb
应用程序/控制器/charges_controller.rb
class ChargesController < ApplicationController
def create
# Amount in cents
@amount = 500
customer = Stripe::Customer.create(
:email => params[:stripeEmail],
:card => params[:stripeToken]
)
charge = Stripe::Charge.create(
:customer => customer.id,
:amount => @amount,
:description => 'Rails Stripe customer',
:currency => 'usd'
)
rescue Stripe::CardError => e
flash[:error] = e.message
redirect_to charges_path
end
end
app/views/charges/create.html.erb
应用程序/视图/费用/create.html.erb
You bought some Awesome stuff!
app/config/routes.rb
应用程序/配置/routes.rb
Rails.application.routes.draw do
resources :pins
resources :charges
devise_for :users
root "pins#index"
get "about" => "pages#about" #creates about_path
get "contact" => "pages#contact" #creates contact_path
get "auction" => "pages#auction" #creates auction_path
get "terms" => "pages#terms" #creates terms_path
post 'send_mail', to: 'contact#send_mail'
get 'contact', to: 'contact#show'
scope 'pins', controller: :pins do
scope '/:id' do
post 'bid', to: :bid
end
end
scope 'admin', controller: :admin do
scope 'pins' do
get '/:pin_id', to: :pin
end
end
end
回答by koopajah
Your Javascript code reads
您的 Javascript 代码读取
document.getElementById("chargeForm").submit();
while your form name is chargesForm
而您的表单名称是 chargesForm
<%= form_tag charges_path, id: 'chargesForm' do %>
回答by leeCoder
I had a similar issue when in a page I had many forms for a delete action in a table. I was able to figure why I keep getting this error when I found out that the quotes(single or double quotes) must appear in the
当我在一个页面中有很多表格用于表中的删除操作时，我遇到了类似的问题。当我发现引号（单引号或双引号）必须出现在
document.getElementById("whatever id keep quotes ").submit();
and make sure it matches the form id.
并确保它与表单 ID 匹配。
e.g.
例如
document.getElementById("'delform'.$key ").submit();
<form id="delform.$key" action="" ></form>
