Question

我有一个包含电子邮件地址输入字段的表单。表单没有提交按钮。相反，它具有Stripe checkout.js脚本，该脚本提供一个按钮，在提交表单之前触发到Stripe的往返（处理信用卡）。 checkout.js脚本允许使用可选变量data-email，这样就可以将预设的电子邮件地址传递给Stripe结帐表单。我想在我自己的表单上设置data-email变量和电子邮件地址输入字段的值。

这是表单和脚本：

<form role="form" class="new_user" id="new_user" action="/users" method="post">
    <label for="user_email">Email</label>
    <input class="form-control" type="email" value="" name="user[email]" id="user_email" />
   <script src="https://checkout.stripe.com/v2/checkout.js"
       class="stripe-button"
       data-email=document.getElementById('user_email').value
       data-key="stripe_key"
       data-description="Product"
       data-amount="500">
   </script>
</form>

我知道我需要使用：

数据的电子邮件=的document.getElementById（ 'USER_EMAIL'）。值

但是data-email没有设定。我是否需要在输入字段中添加onchange属性？那会是什么样的？我还需要更多吗？

Answer 1

如果用户在页面上输入了他的电子邮件，您也可以在输入时更新脚本：

var stripe = document.getElementById("stripe");
document.getElementById("email").onkeypress = function () {
    stripe.setAttribute("data-email", this.value);
}

<input id="email">
<script id="stripe"></script>

如果您运行代码段并检查输入元素，然后键入，您将看到给定条带脚本标记的data-email属性更新。你应该能够适应你的形式。

从输入字段设置变量

1 个答案: