Change input value onclick button - pure javascript or jQuery

Question

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

Mariyan · Accepted Answer · 2013-09-11 13:03:30Z

24

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

edited Sep 11, 2013 at 13:03

answered Sep 11, 2013 at 12:28

Mariyan

6646 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vikash Pandey · Accepted Answer · 2019-05-16 06:06:38Z

8

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

edited May 16, 2019 at 6:06

answered Sep 11, 2013 at 12:18

Vikash Pandey

5,4616 gold badges43 silver badges42 bronze badges

1 Comment

Johan Over a year ago

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.

bipen · Accepted Answer · 2013-09-11 12:11:50Z

2

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

JS

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

fiddle here

answered Sep 11, 2013 at 12:11

bipen

36.6k9 gold badges51 silver badges62 bronze badges

Comments

JofryHS · Accepted Answer · 2013-09-11 12:27:55Z

2

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.

edited Sep 11, 2013 at 12:27

answered Sep 11, 2013 at 12:14

JofryHS

5,8862 gold badges34 silver badges39 bronze badges

1 Comment

Johan Over a year ago

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

Ganesh Nagare · Accepted Answer · 2018-03-16 07:43:09Z

0

This will work fine for you

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

answered Mar 16, 2018 at 7:43

Ganesh Nagare

112 bronze badges

1 Comment

Ganesh Nagare Over a year ago

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

Johan · Accepted Answer · 2013-09-11 12:16:45Z

-1

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

answered Sep 11, 2013 at 12:16

Johan

8,2861 gold badge35 silver badges46 bronze badges

Collectives™ on Stack Overflow

Change input value onclick button - pure javascript or jQuery

6 Answers 6

Comments

1 Comment

Comments

1 Comment

This will work fine for you

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

1 Comment

Comments

1 Comment

This will work fine for you

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related