I have a simple HTML input field. When the user types a value that is not equal to 100 and clicks outside of the input field another input field appears with the value=100-user inserted value.
For example: if a user enters 40 in first input field and second input field shows 60. If the first input field value is equals to 100 nothings happens. I'm achieving this by using simply adding and removing a CSS class with Javascript.
The problem is that I can't go for more than 2 levels, meaning that if the user enters 40 in first input field and second input field shows 60, then if the user change that 60 to 30 another input field must appear with value of 30 and so on.
How can I achieve this using Javascript or jQuery?
(function($) {
var minNumber = 0;
var maxNumber = 100;
$(".dynamic-input").on("change", function() {
var inputVal = parseFloat($(this).val().replace("%", "")) || 0;
if (minNumber > inputVal) {
inputVal = 0;
} else if (maxNumber < inputVal) {
inputVal = 100;
}
if (inputVal == 100) {
var dyn_row = document.getElementById("dynamic-row");
dyn_row.classList.add("dynamic-row-hidden");
} else {
var dyn_row = document.getElementById("dynamic-row");
dyn_row.classList.remove("dynamic-row-hidden");
var new_val = parseFloat($(this).val());
var dynamic_input_get_val =
document.getElementById("dynamic-input-get");
dynamic_input_get_val.value = 100 - new_val + "%";
}
$(this).val(inputVal + "%");
});
})(jQuery);.dynamic-row-hidden {
display: none;
}<input id="dynamic-input" class="dynamic-input dinput" required="required" type="text" />
<div id="dynamic-row" class="dynamic-row dynamic-row-hidden" style="margin-top: 10px">
<div>
<input id="dynamic-input-get" class="dynamic-input-get dinput" required="required" type="text" />
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>I guess you meant:
...then if the user change that
40to30another input field must appear with value of 30 and so on
Based on the given description this should get you started:
var calculatedValue;
var dynamicInput = $('#dynamic-input');
dynamicInput.on('change', function() {
var dynamicInputGet = $('#dynamic-input-get');
if(dynamicInput.val() <= 100 && dynamicInput.val() >= 0) {
if(!calculatedValue) {
calculatedValue = 100 - dynamicInput.val();
dynamicInputGet.val(calculatedValue);
} else {
dynamicInputGet.val(dynamicInputGet.val() - dynamicInput.val());
}
} else if(dynamicInput.val() < 0) {
dynamicInput.val(0);
dynamicInput.trigger('change');
} else {
dynamicInput.val(100);
dynamicInput.trigger('change');
}
});