So I have an online store, I have an button which calls a function called purchase(), but in Javascript this function has purchase(name, amount). So, you can put name easily, in the onclick function onclick="purchase('milk'), but my problem is how I could put the amount? Amount is being chosen from the <select> element.
I created somekind of JSFiddle as well, so you can take a look: https://jsfiddle.net/w2bk9hw8/
Using jquery you could do this;
<button class="button" onclick="payment('milk', $('select').val())">$1.85</button>
select fields or submit buttons. If you have more than one button you can do the same. If you have multiple select than change $('select') to the id of the select field. ex: $('#myselect1').A JQuery less solution could be:
<div id="milkItem" class="shopping-item">
<div class="name">Milk</div>
<div class="item-image"></div>
<div class="item-descriptor">Description of your item</div>
<select class="qtySelector">
<option value="1">1</option>
<option value="2">2</option>
</select>
<button
onclick="payment(document.getElementById('milkItem').getElementsByClassName('name')[0],
document.getElementById('milkItem').getElementsByClassName('qtySelector')[0].value)">
Add to cart
</button>
</div>
function payment(name, amount) {
console.log(amount,name);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="quantity">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<button class="button" onclick="payment('milk', $('#quantity').val())">$1.85</button>And find the Fiddle
Please mark this if it works for you
this should work(pure javascript):
<select id="amount">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<button class="button" onclick="order('milk', getAmount)">$1.85</button>
<script>
function order(name, amount) {
alert(name);
alert(getAmount());
}
function getAmount(){
return document.getElementById('amount').value
}
</script>
Give your select an id, and then it's very simple:
<select id="target-select">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<button class="button" onclick="payment('milk', document.getElementById('target-select').value)">$1.85</button>
<script>
function payment(name, amount) {
alert(name);
alert(amount);
}
</script>You can make something like this:
$('#myselect').on('click', function(){
var value = $('#myselect option:selected').val();
$('button').html(value +'$');
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<select id="myselect">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<button class="button">$1.85</button>Considering both the answers at the time of posting are in Jquery , i'm providing one in JS.
Providing values to each option
I've added values to the selects as they are necessary to get which number is allocated to each select option.
<option value="2">2</option>
Getting the value of the selected option
To get the value of the select button, you can access the button using document.getElementById('sel') and use the .value operator to get the selected option.
document.getElementById('sel').value)
You can find the snippet below.
function order(name, amount) {
alert(name);
alert(amount);
}<select id="sel">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<button class="button" onclick="order('milk',document.getElementById('sel').value)">$1.85</button>For if you have multiple buttons on the page...
$('button').on('click', function() {
payment('milk', $(this).attr("value"));
});
There's nothing weird on that. You'll just have to write the funcion and invoke it.
function purchase(product){
var select = document.querySelector("select#id");
alert('You have ordered '+select.value+' unit(s) of ' + product);
} <select id="id">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<button onclick="purchase('milk')">test</button>