Change input value onclick button - pure javascript or jQuery

javascript jquery button input onclick

196,287

Solution 1

Another simple solution for this case using jQuery. Keep in mind it's not a good practice to use inline javascript.

I've added IDs to html on the total price and on the buttons. Here is the jQuery.

$('#two').click(function(){
    $('#count').val('2');
    $('#total').text('Product price: $1000');
});

$('#four').click(function(){
    $('#count').val('4');
    $('#total').text('Product price: $2000');
});

Solution 2

Try This(Simple javascript):-

 <!DOCTYPE html>
    <html>
       <script>
          function change(value){
          document.getElementById("count").value= 500*value;
          document.getElementById("totalValue").innerHTML= "Total price: $" + 500*value;
          }
          
       </script>
       <body>
          Product price: $500
          <br>
          <div id= "totalValue">Total price: $500 </div>
          <br>
          <input type="button" onclick="change(2)" value="2&#x00A;Qty">
          <input type="button" onclick="change(4)" value="4&#x00A;Qty">
          <br>
          Total <input type="text" id="count" value="1">
       </body>
    </html>

Hope this will help you..

Solution 3

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&#x00A;Qty">
<input type="button" data-quantity="4" class="mnozstvi_sleva" value="4&#x00A;Qty">
<br>Total
<input type="text" id="count" value="1">

$(function(){
$('input:button').click(function () {
  $('#count').val($(this).data('quantity') * $('#product_price').text());
});
});

fiddle here

Solution 4

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&#x00A;Qty">
<input type="button" class="mnozstvi_sleva" value="4&#x00A;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.

View more solutions

196,287

Author by

Jaroslav Klimčík

Updated on August 10, 2022

Comments

Jaroslav Klimčík almost 2 years
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&#x00A;Qty">
<input type="button" value="4&#x00A;Qty">
<br>
Total <input type="text" id="count" value="1">
```
Johan over 10 years

I would suggest not to do it like this, because developers need to learn to separate their JavaScript from their html. Obtrusive JavaScript isn't good.
Johan over 10 years

As I mentioned to @Vikash Pandey, it isn't best practice to have obtrusive JavaScript (onclick="changeText(2)") within your html.
Ganesh Nagare about 6 years

oops..!!..sorry i have just joined stackoverflow..and not seen posted date.