使用来自另一个脚本的结果更新脚本中的数据属性答案

【问题标题】：Updating Data-Attributes in Script using results from another script使用来自另一个脚本的结果更新脚本中的数据属性
【发布时间】：2015-11-17 07:04:35
【问题描述】：

我正在创建一个使用 Stripe Checkout 的订单。 Stripe 具有嵌入在页面中的脚本的形式。它看起来像这样：

.... 
<input type="text" id="emailInput"> .....
<input type="text" id="postCodeInput"> .....

<form action="myNextPage.php" method="POST" id="stripePay">
  <script
    src="https://checkout.stripe.com/checkout.js" class="stripe-button"
    data-key="pk_test_EXAMPLEKEYCODE1234"
    data-amount="2000"
    data-name="Demo Site"
    data-description="2 widgets ($20.00)"
    data-image="/128x128.png"
    data-zipCode=""
    data-email=""
    data-locale="auto">
  </script>
</form>

我想更新数据电子邮件和数据邮政编码以反映同一页面上的文本输入。我一直在玩这些方面的东西，但无法让它发挥作用。

var val1=$('#emailInput').val;
$('#stripePay').data('email', val1);

var val2=$('#postCodeInput').val;
$('#stripePay').data('zipCode', val2);

此表格不会放置在可公开访问的页面上。

更新 - 解决方法
我使用 ajax 使用在此页面上输入的数据动态创建 Stripe Checkout 按钮进行了解决。我将条纹支付按钮从表单中移除，并在输入邮政编码和电子邮件数据时检索它。我将在我的最终代码中结合使用这种方法和 Matthew 的自定义表单。对于此示例，我没有包含任何验证以确保输入数据完整且符合预期。

 .... 
<input type="text" id="emailInput"> .....
<input type="text" id="postCodeInput">


<div id="stripePayBtn">
    <!--ajax will place the stripe pay button here-->
</div>
<div>
    <button  id="nextBtn">
        Create Payment Button
    </button>
</div>
    ------

 // Script on this page:

 $("#nextBtn").click(function(){
     var zip = $("#postCodeInput").val();
     var email = $("#emailInput").val();
     var amount = $("#amount").val();
    $.ajax({
            url: 'stripePopulate.php',
            type: 'POST',
            data:{
                zip : zip,
                email : email,
                amount : amount,
            },
            dataType: 'html',
            success:function(data){
                $("#nextBtn").hide();
                $('#stripePayBtn').html(data);
            }
    });
});

然后，在 stripePopulate.php 页面上

<?php

$zip=$_POST[zip];
$email=$_POST[email];
$amount=$_POST[amount];


echo'<form action="myNextPage.php" method="POST" id="stripePay">
  <script
       src="https://checkout.stripe.com/checkout.js" class="stripe-button"
        data-key="pk_test_EXAMPLEKEYCODE1234"
        data-amount="2000"
        data-name="Demo Site"
        data-description="2 widgets"
        data-image="/128x128.png"
       data-zipCode="'.$zip.'"
       data-amount="'.$amount.'"
       data-email="'.$email.'"
       data-locale="auto">
  </script>

</form>';

?>

【问题讨论】：

标签： jquery stripe-payments custom-data-attribute

【解决方案1】：

由于 Stripe 在首次解析 html 页面时会自行配置，因此更新值不会反映在 Stripe 的配置中。如果您想做类似的事情，您需要使用 Stripe Checkout 的自定义集成，它允许您在用户通过 javascript 单击结帐按钮时指定值。

【讨论】：

在删除 src 链接并查看 console.log 后，我才刚刚开始意识到这一点。我将切换到自定义集成。

【解决方案2】：

你想用 data-email 和 data-zipCode 更新“.stripe-button”，试试下面：

var val1=$('#emailInput').val;
$('#stripePay .stripe-button').data('email', val1);

var val2=$('#postCodeInput').val;
$('#stripePay .stripe-button').data('zipCode', val2);

检查是否已添加运行：

console.log($('#stripePay .stripe-button').data('email'))
console.log($('#stripePay .stripe-button').data('zipCode'))

【讨论】：

感谢 console.log 提示 - 但此解决方案未填充数据属性。为了检查拼写错误，我用相同的数据填充了其他临时输入字段，并看到 console.log 正确显示。