Update javascript with html select value

Question

Here is my code:

<select name="points">
  <option value="5">5 points</option>
  <option value="10">10 points</option>
  <option value="50">50 points</option>
</select>

here is my Javascript code:

<script
  src="https://checkout.stripe.com/checkout.js" class="stripe-button"
  data-key="test key"
  data-amount="option value here" // i need help here
  data-name="Site Name"
  data-description="2 widgets ($20.00)"
  data-image="/128x128.png">
</script>

The javascript code is a button for a popup. i want to get the select option value and i want to insert that into the data-amount in the js code. how can i do that?

gavgrif · Accepted Answer · 2016-06-19 05:23:59Z

1

Use the change method to detect the value of the select list and then apply it to the data-amount attribute of the button.

$(document).ready(function(){
    $('[name=points]').change(function(){
      var newAmount=$(this).val();
      $('.stripe-button').data('amount',newAmount);
    })
});

edited Jun 19, 2016 at 5:23

answered Jun 19, 2016 at 5:18

gavgrif

15.5k2 gold badges30 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

bhansa · Accepted Answer · 2016-06-19 05:56:24Z

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
    function updata(){
var point_val = $("#points option:selected").val();
alert(point_val);
document.querySelector("script").setAttribute("data-amount",point_val);
}

</script>
<select name="points" id="points" onchange="updata();">
  <option value="5">5 points</option>
  <option value="10">10 points</option>
  <option value="50">50 points</option>
</select>
<script
  src="https://checkout.stripe.com/checkout.js" class="stripe-button"
  data-key="test key"
  data-amount="option value here"
  data-name="Site Name"
  data-description="2 widgets ($20.00)"
  data-image="/128x128.png">
</script>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
	function updata(){
var point_val = $("#points option:selected").val();
alert(point_val);
document.querySelector("script").setAttribute("data-amount",point_val);
}
	
</script>
<select name="points" id="points" onchange="updata();">
  <option value="5">5 points</option>
  <option value="10">10 points</option>
  <option value="50">50 points</option>
</select>
<script
  src="https://checkout.stripe.com/checkout.js" class="stripe-button"
  data-key="test key"
  data-amount="option value here"
  data-name="Site Name"
  data-description="2 widgets ($20.00)"
  data-image="/128x128.png">
</script>

Collectives™ on Stack Overflow

Update javascript with html select value

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related