How to change back the original value in my form after modified-CodePudding

i created input named "quantity" that has a value of 30, and the 2nd input named "sold"

$(document).ready(function() {
  $("#sold,#quantity").keyup(function() {
    var total = 0;
    var y = Number($("#quantity").val());
    var x = Number($("#sold").val());
    var total = y - x;
    $("#quantity").val(total); // the result will be showed in "quantity"
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table width="100">
  <tr>
    <td>Quantity</td>
    <td>Sold</td>
  </tr>
  <tr>
    <td><input type="text" id="quantity" value="30"></td>
    <td><input type="text" id="sold"></td>
  </tr>
</table>

should looks like this

Quantity: 30 Sold: (input something)

now i added some script that any value inputs from sold will subtract the value from quantity automatically

example output:

Quantity: 28 Sold: 2 
// 30 is the original value of quantity subtracted by 2 is 28

now for example if i will clear my input on sold the quantity its still has the value of 28

Quantity: 28 Sold: (cleared/removed)

my question what should i do to return the original value of quantity which is 30 even i clear my input in sold

expected output:

Quantity: 30 Sold: (cleared/removed)

CodePudding user response：

You can save the value

$(document).ready(function() {
  const def = $("#quantity").val()
  $("#sold,#quantity").keyup(function() {
    var total = 0;
    var x = Number($("#sold").val());
    var total = def - x;
    $("#quantity").val(total); // the result will be showed in "quantity"
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table width="100">
  <tr>
    <td>Quantity</td>
    <td>Sold</td>
  </tr>
  <tr>
    <td><input type="text" id="quantity" value="30"></td>
    <td><input type="text" id="sold"></td>
  </tr>
</table>

CodePudding user response：

Try This :

    $(document).ready(function(){
        $("#sold,#quantity").keyup(function(){
            var total = 0;
            const defaultVal = $("#quantity").attr("data-static-value");
            console.log(defaultVal)
            var y = Number($("#quantity").val());
            var x = Number($("#sold").val());
            var total = y - x;
            $("#quantity").val(x ? total : defaultVal); // the result will be showed in "quantity"
        });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
    <table width="100">
        <tr>
           <td>Quantity</td>
           <td>Sold</td>
        </tr>
        <tr>
           <td><input type="text" id="quantity" data-static-value="30" value="30"></td>
           <td><input type="text" id="sold"></td>
        </tr>
    </table>
</body>