Change input value onclick button - pure javascript or jQuery

前端未结

关注

 6  1415

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

相关标签:

6条回答

孤城傲影

2020-12-05 12:48

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

0 讨论(0)

一向

2020-12-05 12:51

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

0 讨论(0)

终归单人心

2020-12-05 12:54
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');
});
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

梦如初夏

2020-12-05 12:57

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>

0 讨论(0)

我在风中等你

2020-12-05 13:01

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

0 讨论(0)

借酒劲吻你

2020-12-05 13:06
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...