Question

我正在尝试使用Javascript值设置<script>元素的参数值。使用条带checkout.js可以使用参数设置电子邮件框的值，并且它要求用户电子邮件在页面上的其他位置，所以我需要获取该文本框的值并发送它到那个参数值，如下：

<form action="charge.php" method="post">
    <center>
      <div class="form-group">
        <label for="inputEmail" class="col-lg-2 control-label">Email</label>
        <div class="col-lg-10">
          <input class="form-control" id="inputEmail" name="inputEmail" type="text" maxlength="64" data-validation="email" placeholder="donator@example.com">
        </div>
      </div><br><br>
      <input type="range" min="1" max="100" value="5" step="1" name="inputAmount" id="inputAmount" onchange="updateBox(this.value)">
      <span class="pull-right"><input type="tel" maxlength="3" id="inputAmountText" name="inputAmountText" class="form-control" value="5" onchange="updateSlider(this.value)"></span>
    </center>
    <br><br><br>
    <script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
      data-key="<?php echo $stripe['publishable_key']; ?>"
      data-description="Donation"
      data-email="$('#inputEmail').val();"
      data-image="https://joshstroup.me/global/img/avatar.png"
      data-name="Joshua Stroup"
      data-zip-code="true"
      data-panel-label="Donate"
      data-label="Proceed To Payment"></script>
  </form>

请注意我将data-email设置为$('#inputEmail').val();的位置，这就是（我认为）它已完成的方式，但是当我打开结帐表单时，该框为空白且占位符显示，所以我＆＃ 39;我不太确定如何正确设置它。

Answer 1

我不认为你要做的是正确的。

假设您显示的方法将以某种方式工作：

当页面首次加载时，＃inputEmail的值为null，因此您使用null参数加载脚本。
在表单帖子上，我想您将清除表单值，并使用null参数再次加载脚本。

如果您仍想按自己的方式行事，请查看如何自动生成脚本代码： How to dynamically insert a <script> tag via jQuery after page load?

Answer 2

完全删除<script>标记并使用此jQuery函数：

jQuery(function($) {
    $('#inputEmail').on('keyup', function() {
        var email = $(this).val();
        $('<script>')
            .addClass('stripe-button')
            .attr({
                'type': 'text/javascript',
                'src': 'https://checkout.stripe.com/checkout.js'
            })
            .data({
                'key': '<?php echo $stripe['publishable_key']; ?>',
                'description': 'Donation',
                'email': email,
                'image': 'https://joshstroup.me/global/img/avatar.png',
                'name': 'Joshua Stroup',
                'zip-code': 'true',
                'panel-label': 'Donate',
                'label': 'Proceed To Payment'
            })
            .appendTo('head');
    });
});

但是每次释放密钥时，此代码都会触发checkout.js。最好将它绑定到提交按钮的类型。

Answer 3

在没有电子邮件字段的情况下解决了问题，将脚本POST发送到我发送信息的PHP脚本中的电子邮件。

使用Javascript设置元素参数

3 个答案: