trying to manage the value of 2 inputs - javascript

I'm not really good for speaking english, but this problem could kill me.. I'm on since 3 days..
I have 2 inputs, each input can be 1 to 100.
But i need that the addition of the both is never below 100.
Exemple : 40 & 60, 30 & 70, ...
I tried to change the second input with a focusout (rly that i need), to add to the second input the value that i needed.
Exemple :
Input 1 : value 40
Input 2 : Value 20 (In this case i need that this input change to 60 whenever i focusout it)
Sorry for this poor english, but instead of reading a solution this time i need to post (Never posted before because i always find what i needed ).
This is my code :
if($("#coemp_pret1").val() == "1"){
$(this).val(function(index, value) {
var tempValue = $(this).val($(this).val() + $("#QuotDecAdh_s3p1").val());
if( tempValue < "100" ){
return value
.replace(/\d{1,2}(?!\d)|100/, "");
$(this).val(100 - $("#QuotDecAdh_s3p1").val());
}
});
}
Thanks i hope you can help me, byebye !

I have added a new event, to handle first input changes. So, everytime you change the value from it, the value from the second will reset to ''.
Also added .on('blur') event for the second field, so you can check if the sum of both is below 100. If it is, then the difference from 100 and the sum will be extracted to be displayed as the second input value.
Code below:
$(function() {
$('#inp1').on('change', function() {
$('#inp2').val('');
});
$('#inp2').on('blur', function() {
var val1 = $('#inp1').val();
if (val1 > 0) {
var val2 = $(this).val();
var sum = (val1 + val2);
if (sum < 100) {
var diff = (100 - sum);
$(this).val(diff);
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>Value 1</span>
<input id="inp1" type="text" />
<br />
<br />
<span>Value 2</span>
<input id="inp2" type="text" />

You can use 'blur' event on the second input & keyup on first input.
blur will start calculation as soon as focus is removed from the second input.
On updating first input the second field will set to empty
$("#coemp_pret1").on("keyup", function() {
$("#QuotDecAdh_s3p1").val("");
});
$("#QuotDecAdh_s3p1").on("blur", function() {
if ("" !== $("#coemp_pret1").val() && ($(this).val(), 100 > $(this).val() + $("#coemp_pret1").val())) {
var a = 100 - $("#coemp_pret1").val();
$(this).val(a);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' id="coemp_pret1">
<input type="text" id="QuotDecAdh_s3p1">

Related

How to add new value on keyup to div every n digit with jquery?

I want to auto list numbers every time the user types in 3 digits. The input numbers should appear in the div automatically.
$("#lister").on("keyup", function() {
var mxlen = $(this).data("mxlen");
var input = $(this).val();
if (input.length == mxlen) { //if input==3
$('#num_list').append('<li>' + input + '</li>');
$(this).html(''); //clear input after appended
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="num_list"></div>
<input type="number" id="lister" data-mxlen="3" />
The problem with my code is that it repeats the same numbers and does not clear the input after appending.
Your code is almost there, you just need to use val('') to reset the value.
Also note that you can make the logic more robust by using slice(0, mxlen) to restrict the value to 3 characters when typing quickly, and also change the check from == to >= for the same reason.
$("#lister").on("input", function() {
let $el = $(this);
var mxlen = $el.data("mxlen");
var input = $el.val();
if (input.length >= mxlen) {
$('#num_list').append('<li>' + input.slice(0, mxlen) + '</li>');
$el.val('');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="num_list"></div>
<input type="number" id="lister" data-mxlen="3" />
One last thing to note is that characters such as - or e are valid for entry in a type="number" input field, however they are not valid for the value returned from the field. As such the length check will get inconsistent output when these characters are used.
Depending on your use case you may be better off with a standard type="text" check and manually restricting the input to numerical values.

Adding a score to every input field the user fills in the form and displaying it

Currently i have developed a program that gets the count of all the inputs field and adding up a percentage for the numbers of fields that are filled individually.
what i need now here, i need to assign a number to each input field and when the user fills an input field i need to show it to the user as a " SCORE ".
below is the program i have built.
<html>
<body>
<label> Name </label>
<input class="track"/>
<label> Name </label>
<input class="track"/>
<h5>Profile Strength <span class='perc'>0</span>%</h5>
</body>
</html>
and the JavaScript is
<script>
$('.track').change(function(e) {
update_progress();
});
// supports any number of inputs and calculates done as %
function update_progress() {
var count = $('.track').length;
var length = $('.track').filter(function() {
return this.value;
}).length;
var done = Math.floor(length * (100 / count));
$('.perc').text(done);
$('.meter').width(done + "%");
}
so when you fill the first input field the 'Profile strength' will show 50% as there are only 2 input fields, and when you fill the second input it will show 100%.
i want to show a number instead of a percentage here like
input 1 = 10
input 2 = 20
so when the user fills input 1 his "SCORE" will be 10,
and when the user fills the next input the total must add on and show 30 in real time.
sorry if have confused a few developers but this the only way i understood the assignment i got.
Try the following:
Html:
<html>
<body>
<label> Name </label>
<input class="track" data-score=10 />
<label> Name </label>
<input class="track" data-score=20 />
<h5>Profile Strength <span class='perc'>0</span>%</h5>
<h5>Score <span id="score">0</span></h5>
</body>
</html>
JS:
$('.track').change(function(e) {
update_progress();
});
// supports any number of inputs and calculates done as %
function update_progress() {
var score = 0
$('input.track').each(function(){
var _score = $(this).data("score")
if ($(this).val().length > 0) {
score += _score
}
})
$('#score').text(score)
var count = $('.track').length;
var length = $('.track').filter(function() {
return this.value;
}).length;
var done = Math.floor(length * (100 / count));
$('.perc').text(done);
$('.meter').width(done + "%");
}
Or, a live version https://jsfiddle.net/wmt6cznh/2/
Is this what you want to achieve?

Replacing symbols on keyup

I have stumbled across on a problem I do not understand why it's even happening (not working).
What I have to do is just to replace 1 's amount value, for some reason I just can't lol.
When user enter amount, in case he enters ",", I have to change it to "." Instantly - live.
Here is the sample..
$(document).ready(function() {
// Uberfix Amount
$(".form-amount").keyup(function() {
var amount = $(".form-amount").val();
$(".form-amount").val().replace(",", ".");
alert('passed');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<input type="text" class="form-amount" id="textare" value="" placeholder="0.1 BTC - 10 BTC" />
It's because you did not set the value of the textbox after changing its value. See working code below:
$(document).ready(function() {
// Uberfix Amount
$(".form-amount").keyup(function() {
var $this = $(this), amount = $this.val();
$this.val(amount.replace(",", "."));
console.log('passed');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<input type="text" class="form-amount" id="textare" value="" placeholder="0.1 BTC - 10 BTC" />
You computed the modified string but do not set it back to the field. If I understand your problem correctly this should work for you:
$(document).ready(function() {
// Uberfix Amount
$(".form-amount").keyup(function() {
var amount = $(".form-amount").val();
$(".form-amount").val(amount.replace(",", "."));
alert('passed');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<input type="text" class="form-amount" id="textare" value="" placeholder="0.1 BTC - 10 BTC" />
Note that .val() gets a value while .val(string) sets the value of the field to the specified string.

Calculate discount using jquery

I am calculating Discount using jquery. But I have a problem calculating the correct discount. My calculation gives me wrong result.
Here is my code
$(document).on("change keyup blur", "#chDiscount", function() {
var amd = $('#cBalance').val();
var disc = $('#chDiscount').val();
if (disc != '' && amd != '')
$('#cBalance').val((parseInt(amd)) - (parseInt(disc)));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="number" id="cBalance" value="1575">
<br>
<input type="number" id="chDiscount">
I have a prepopulated value for cBalance input i.e.,1575. When I type discount value for example 500 in chDiscount input, it gives me 1020 and not 1075. And I want the value 1575 to be 1575 when there is no value or zero value in the chDiscount input. And the caculation keeps incrementing the cBalance value whenever I type new value in the chDiscount input, it does not increment from the default value.
My exptected output: When I type 500, I want the default value 1575 to be 1075. And if I delete the 1000 that I type, I want back the default value 1575 in cBalance. And If I type 5 in chDiscount, the default value would become 1570 and if I hit backspace to delete, it would become 1575 again.
How can I achieve this? Where did I go wrong? Please help.
$(document).on("change keyup blur", "#chDiscount", function() {
var amd = $('#cBalance').val();
var disc = $('#chDiscount').val();
if (disc != '' && amd != '') {
$('#result').val((parseInt(amd)) - (parseInt(disc)));
}else{
$('#result').val(parseInt(amd));
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="number" id="cBalance" value="1575">
<br>
<input type="number" id="chDiscount">
<br>
<input type="number" id="result">
I added result field because otherwise you couldn't specify amd
As above mention code is just subtracting the main value. here is exact solution
<input type="number" id="cBalance" value="1575"> <br>
<input type="number" id="chDiscount"> <br>
<input type="number" id="result">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
$(document).on("change keyup blur", "#chDiscount", function() {
var main = $('#cBalance').val();
var disc = $('#chDiscount').val();
var dec = (disc/100).toFixed(2); //its convert 10 into 0.10
var mult = main*dec; // gives the value for subtract from main value
var discont = main-mult;
$('#result').val(discont);
});
JSFIDDLE

Decrease variable by 1 Javascript

<input type='text' maxlength='32' onkeypress='previewLength(32)'>
I want to decrease 32 with 1 each time a key is pressed
Im using this for a length preview (max length is 32 and each time a key is pressed it gets decreased by 1 and shows the user how much he has left)
<script>
function previewLength (maxLength) {
maxLength = maxLength -= 1;
document.getElementById('CounterLength').innerHTML = maxLength;
}
</script>
Use the length of the actual value instead of counting keypresses (as for example the backspace key would reduce the length instead of increasing it):
<input type="text" maxlength="32" onkeypress="previewLength(this.maxLength, this.value.length, 'CounterLength');">
<script type="text/javascript">
function previewLength (maxLength, actualLength, id) {
document.getElementById(id).innerHTML = maxLength - actualLength;
}
</script>
(By also sending the maxlength and display element id into the function, it can be reused for multiple elements.)
You have some misconceptions, you'll want to look at the actual value, not the number of keypresses. For example: backspace, and arrow-left are also keypresses but they don't increase the length of the value.
html:
<input type='text' maxlength='32' onkeypress='previewLength(this, 32)'>
^- use `this`
js:
function previewLength (input_element, maxLength) {
var remain = maxLength - input_element.value.length;
document.getElementById('CounterLength').innerHTML = remain;
}
I would add some check not to show negative number, and just pass name of the control
window.updateCounter = function updateCounter(e, name) {
var len = e.value.length
, max = e.maxLength
, remaining = (max - len) > 0 ? max-len : 0
document.getElementById(name).innerHTML = remaining
}
markup
<input type='text' maxlength='32' onkeypress='updateCounter(this, "counter")'/>
<span id='counter'>32</span>

Categories