CODEWITHSUNDEEP
javascriptjqueryhtml
johnjay22113
johnjay22113

Reputation: 123

Update javascript with html select value

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?

Upvotes: 0

Views: 56

Answers (2)

bhansa
bhansa

Reputation: 7504

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

Upvotes: 0

gavgrif
gavgrif

Reputation: 15499

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

Upvotes: 1

Related Questions