Setting an element parameter using Javascript

Question

I am trying to set the value of a parameter of a <script> element using a Javascript value. Using the Stripe checkout.js it is possible to set the value of the Email box using a parameter, and where it asks for the users email is somewhere else on the page, so I need to grab the value of that text box and send it to that parameters value, like so:

<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>

Notice where I am setting data-email to $('#inputEmail').val();, this is how (I think) it is done, but when I open the checkout form the box is blank with the placeholder showing, so I'm not quite sure how to set it properly.

score 1 · Answer 1 · edited May 23 '17 at 12:29

I don't think what you are trying to do is correct.

Assuming the method you are showing will somehow work then:

when the page first loads the value of #inputEmail is null, so you load the script with a null parameter.
on form post, I think you will clear the form values and the script loads once again with a null parameter.

If you still want to do your way then take a look how to generate script tags automatically: How to dynamically insert a <script> tag via jQuery after page load?

D4V1D · Answer 2 · 2015-07-17T14:52:53.307

0

Remove the <script> tag altogether and use this jQuery function:

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');
    });
});

But this code would fire checkout.js each time a key is released. Better to bind it to kind of a submit button.

edited Jul 17 '15 at 14:52

answered Jul 17 '15 at 14:30

D4V1D

5,805
3
30
65

keyup executes only when the user interacts with the input field. But by then the checkout.js would have been executed with an empty `data-email` value – Dhiraj Jul 17 '15 at 14:36
Right, my bad, I didn't fully understand the question then. The OP's better to check Stefan's [answer](http://stackoverflow.com/a/31478229/2788131) then. – D4V1D Jul 17 '15 at 14:37
Is there any way to then reload checkout.js using the new value whenever the user types in the email field? – Wargog Jul 17 '15 at 14:44
Using that code and binding it to a submit button I added just tries to send it straight to the charge page without opening the UI – Wargog Jul 17 '15 at 17:49

score 0 · Answer 3 · answered Jul 17 '15 at 19:16

0

Got it fixed without the email field after all, turns out the script POST's the email that you put into it to the PHP script I was sending the info to.

answered Jul 17 '15 at 19:16

Wargog

398
1
3
13

Setting an element parameter using Javascript

3 Answers3