I have two buttons and if I click on some button I need to change value in input text and change total price (product price * value of button - 2 or 4 Qty).
I know that it's simple but I'm not good in javascript or jQuery. Answer in jsfiddle would be best.
My jsfiddle is here http://jsfiddle.net/J7m7m/1/
My simple code:
Product price: $500
<br>
Total price: $500
<br>
<input type="button" onclick="change()" value="2
Qty">
<input type="button" value="4
Qty">
<br>
Total <input type="text" id="count" value="1">
This question is related to
javascript
jquery
button
input
onclick
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function myfun(){
$(document).ready(function(){
$("#select").click(
function(){
var data=$("#select").val();
$("#disp").val(data);
});
});
}
</script>
</head>
<body>
<p>id <input type="text" name="user" id="disp"></p>
<select id="select" onclick="myfun()">
<option name="1"value="one">1</option>
<option name="2"value="two">2</option>
<option name="3"value="three"></option>
</select>
</body>
</html>
Try This(Simple javascript):-
<!DOCTYPE html>_x000D_
<html>_x000D_
<script>_x000D_
function change(value){_x000D_
document.getElementById("count").value= 500*value;_x000D_
document.getElementById("totalValue").innerHTML= "Total price: $" + 500*value;_x000D_
}_x000D_
_x000D_
</script>_x000D_
<body>_x000D_
Product price: $500_x000D_
<br>_x000D_
<div id= "totalValue">Total price: $500 </div>_x000D_
<br>_x000D_
<input type="button" onclick="change(2)" value="2
Qty">_x000D_
<input type="button" onclick="change(4)" value="4
Qty">_x000D_
<br>_x000D_
Total <input type="text" id="count" value="1">_x000D_
</body>_x000D_
</html>Hope this will help you..
And here is the non jQuery answer.
Fiddle: http://jsfiddle.net/J7m7m/7/
function changeText(value) {
document.getElementById('count').value = 500 * value;
}
HTML slight modification:
Product price: $500
<br>
Total price: $500
<br>
<input type="button" onclick="changeText(2)" value="2
Qty">
<input type="button" class="mnozstvi_sleva" value="4
Qty" onClick="changeText(4)">
<br>
Total <input type="text" id="count" value="1"/>
EDIT: It is very clear that this is a non-desired way as pointed out below (I had it coming). So in essence, this is how you would do it in plain old javascript. Most people would suggest you to use jQuery (other answer has the jQuery version) for good reason.
My Attempt ( JsFiddle)
Javascript
$(document).ready(function () {
$('#buttons input[type=button]').on('click', function () {
var qty = $(this).data('quantity');
var price = $('#totalPrice').text();
$('#count').val(price * qty);
});
});
Html
Product price:$500
<br>Total price: $<span id='totalPrice'>500</span>
<br>
<div id='buttons'>
<input id='qty2' type="button" data-quantity='2' value="2
Qty">
<input id='qty2' type="button" class="mnozstvi_sleva" data-quantity='4' value="4
Qty">
</div>
<br>Total
<input type="text" id="count" value="1">
using html5 data attribute...
try this
Html
Product price: $<span id="product_price">500</span>
<br>Total price: $500
<br>
<input type="button" data-quantity="2" value="2
Qty">
<input type="button" data-quantity="4" class="mnozstvi_sleva" value="4
Qty">
<br>Total
<input type="text" id="count" value="1">
JS
$(function(){
$('input:button').click(function () {
$('#count').val($(this).data('quantity') * $('#product_price').text());
});
});
Source: Stackoverflow.com