从输入字段设置变量

setting variable from input field

本文关键字：变量 设置 字段 输入      更新时间：2023-09-26

我有一个包含电子邮件地址输入字段的表单。表单没有提交按钮。相反，它具有 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>

我知道我需要使用：

data-email=document.getElementById（'user_email'）.value

但data-email并没有定下来。是否需要向输入字段添加onchange属性？那会是什么样子？我需要更多吗？

如果用户在页面上输入他的电子邮件，您不妨在他们键入时更新脚本：

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属性更新。您应该能够将其调整为您的表单。

相关文章：