Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change input value onclick button - pure javascript or jQuery

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">
like image 288
Jaroslav Klimčík Avatar asked Sep 11 '13 12:09

Jaroslav Klimčík


2 Answers

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

JsFiddle

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');
});
like image 149
Mariyan Avatar answered Sep 27 '22 16:09

Mariyan


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

like image 21
Vikash Pandey Avatar answered Sep 27 '22 18:09

Vikash Pandey