i am creating a voucher, for an Management Program, i have an input field which counts value and add in the last colum, as sum of debits and credits in all rows for that i am using counters to track sum, i am using onchange or onblur click event, it works well it counts wih increase in rows, but when i try to remove the value from input it still couns i counter
here is the code
var credit_counter = 0;
$(document).on('blur', 'input[name="credit[]"]', function () {
idName = $(this).attr('id');
id = idName.substring(6, idName.length);
var value = $(this).val();
credit_counter = credit_counter + Number(value);
var credit_balance = $("#get_credit").val(credit_counter)
});
var debit_counter = 0;
var total_balance = 0;
$(document).on('blur', 'input[name="debit[]"]', function () {
idName = $(this).attr('id');
id = idName.substring(6, idName.length);
var value = $(this).val();
$("#credit" + id).val(value)
debit_counter = debit_counter + Number(value);
var debit_balance = $("#get_debit").val(debit_counter);
});
I want to remove the value in case I erase value from input field thanks
Here is a complete example which achieves what you are looking to do (warning: no styling has been added so it is ugly). You can copy and paste this into a .html file and open it in with the web browser of your choice to see it in action:
<!DOCTYPE html>
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
</head>
<body>
<input placeholder="credit field 1" type="text" name="credit" /><br/>
<input placeholder="credit field 2" type="text" name="credit" /><br/>
<input placeholder="credit field 3" type="text" name="credit" /><br/>
<input placeholder="credit field 4" type="text" name="credit" /><br/>
<input placeholder="debit field 1" type="text" name="debit" /><br/>
<input placeholder="debit field 2" type="text" name="debit" /><br/>
<input placeholder="debit field 3" type="text" name="debit" /><br/>
<input placeholder="debit field 4"type="text" name="debit" /><br/>
<input placeholder="credit total" id="get_credit" type="text" /><br/>
<input placeholder="debit total" id="get_debit" type="text" /><br/>
<script>
$(document).on('blur', 'input[name="credit"]', function () {
var total = 0;
$('input[name="credit"]').each(function( index, element ) {
if(!isNaN($(this).val())){
total += Number($(this).val());
}
$('#get_credit').val(total);
});
});
$(document).on('blur', 'input[name="debit"]', function () {
var total = 0;
$('input[name="debit"]').each(function( index, element ) {
if(!isNaN($(this).val())){
total += Number($(this).val());
}
$('#get_debit').val(total);
});
});
</script>
</body>
</html>
Your issue is that the way you are keeping track of the total debits and total credits does not allow you to know the values stored in each input individually. The problem that creates is that when a value is removed, there is no way for you to know what to subtract from the total. (Likewise, if someone were to change the value from 3 to 30 then your total would go up by 30 instead of 27).
There is definitely more than one way to fix that however the answer I posted is what I believe to be most simple: On blur of the input, iterate through the appropriate inputs and add them together then assign the total to the appropriate input.
Note I've excluded your logic of acting on the ids of the inputs as it is unclear what you're doing with them without further explanation or seeing your view markup. It also seems to be unrelated to the issue you're posting about.
I understood your problem. Can we do like this.
1) Trigger an event on focus.
2) Subtract the focused element value from total.
If user doesn't removed complete value from the input. anyway we are triggering event on blur. So it will take whatever the value remained in the text box and counts that!
Related
I want to get value from "data-val" input field which is hypen separated and after removimg hypen individual value should get assigned to separate text box which have same class name, but instead of separate value only last value is assigning to every text box.
for example if data-val class have value like this 3-4-5 then it should get separated by "-" and individual value get assigned to separated text filed.
<input type="text" class="form-control data-val" onblur="assign_val('data-val','input_val')"value=""/>
<input type="text" class="form-control input_val" name="">
<input type="text" class="form-control input_val" name="">
<input type="text" class="form-control input_val" name="">
<script>
function assign_val(data-val,input_val) {
var data-val = $(".data-val").val();
var count = $('.' + input_val).length;
var i;
var data-val= data-val.split("-");
for (i = 1; i <= data-val.length; i++)
{
$(".input_val").val(data-val[i]);
}
}
</script>
You can do this using JQuery .each https://api.jquery.com/each/
$( ".input_val" ).each(function( index ) {
$(this).val(data-val[index]);
});
I'm creating a form in angularJS with a calculated field whose value is given from 3 numeric field, one of which is hidden, and it's visibility depends on the input of another.
My problem is that as long as the third field is not visible, the value of the calculated field is not shown.
I tried to set 0 as default value of the hidden field but this not resolve the problem
This is my code:
<input type="number" ng-model="currForm.A" name="r_A" required /><br />
<input type="number" ng-model="currForm.B" name="r_B" required /><br />
<div ng-show="currForm.B > '5' ">
<input type="number" ng-model="currForm.C" name="r_C" ng-required="currForm.B > '5' " /><br />
</div>
<label>Risultato A+B+C</label>: <input type="number" ng-model="currForm.risultato"/>
And this is my script
$scope.currForm.C = 0;
$scope.$watch(' currForm.A + currForm.B + currForm.C', function (value) {
$scope.currForm.risultato= value;
});
$scope.$watch("currForm.B<'5'",function(){
$scope.currForm.C = "";
});
There is a way to do the calculation even if third input is hidden?
Thank you all
You set the default value for currForm.C = 0 but not in the watch section, change the second watch to following, it works for me:
$scope.$watch("currForm.B<'5'",function(){
$scope.currForm.C = 0;
});
I would like to select all the contents of the text-boxes when a user clicks on it. But, since my document contains almost 5 text-boxes, instead of giving each text-box an ID selector or onfocus attribute, I would like to select all the text-boxes.
For example: var x = document.getElementsByTagName("p");
The above code selects all the paragraphs in a document. So, I need a similar code for all textboxes. I have tried replacing input and input[type=text] Nothing worked.
Try this out:-
http://jsfiddle.net/adiioo7/zvgHx/
JS:
var x = document.getElementsByTagName("INPUT");
var y = [];
var cnt2 = 0;
for (var cnt = 0; cnt < x.length; cnt++) {
if (x[cnt].type == "text") y.push(x[cnt]);
}
alert("Total number of text inputs: " + y.length);
HTML:
<input type="text" id="input1" value="input1"></input>
<input type="text" id="input2" value="input2"></input>
<input type="text" id="input3" value="input3"></input>
<input type="text" id="input4" value="input4"></input>
<input type="text" id="input5" value="input5"></input>
So, array y will hold all inputs with type as text.
Use jQuery: $('input[type=text]') That will do the trick.
http://jquery.com/
I want to retrieve textfield value using javascript. suppose i have a code like:
<input type='text' name='txt'>
And I want to retrieve it using javascript. I call a function when a button is clicked:
<input type='button' onclick='retrieve(txt)'>
What coding will the retrieve function consist of?
You can do this:
Markup:
<input type="text" name="txt" id="txt"/>
<input type="button" onclick="retrieve('txt');"/>
JavaScript:
function retrieve(id) {
var txtbox = document.getElementById(id);
var value = txtbox.value;
}
Let's say you have an input on your page with an id of input1, like this:
<input type="text" id="input1" />
You first need to get the element, and if you know the Id, you can use document.getElementById('input1'). Then, just call .value to get the value of the input box:
var value = document.getElementById('input1').value;
Update
Based on your markup, I would suggest specifying an id for your text box. Incase you don't have control over the markup, you can use document.getElementsByName, like so:
var value = document.getElementsByName('txt')[0].value;
One of the way is already explained by Andrew Hare.
You can also do it by entering the value in the textbox and getting a prompt box with entered message when a user click the button.
Let's say, you have a textbox and a input button
<input type="text" name="myText" size="20" />
<input type="button" value="Alert Text" onclick="retrieve()" />
The function for retrieve()
function retrieve()
{
var text = document.simpleForm.myText.value;
alert(text);
}
How would I go about creating a textbox with an auto-expanding width to fit it's content?
I keep finding plenty of info on height based expansions but not much on width.
I'd also like it to apply to every textbox on the page and not just specific ones.
Not sure if this is what you had in mind, but shouldn't this work?
<script language="javascript">
function expand(f)
{
f.size = f.size + 1;
}
</script>
<input type="text" size="20" onkeyup="expand(this)" />
If you want backspace key handling use this:
<input type="text" value="Sample text" onkeyup="(event.keyCode!==8)?this.size++:this.size--;" size="20">
If you want backspace key handling and to ignore arrow keys use this one:
<input type="text" value="Sample text" onkeyup="if(event.keyCode==8){this.size--;}else if(event.keyCode!==37&&event.keyCode!==38&&event.keyCode!==39&&event.keyCode!==40){this.size++;}" size="6">
I think a better solution would be to check the length of the text and modify the textbox if the text was too long rather than checking for every type of key event that shouldn't trigger an expansion. An example:
<script type="text/javascript">
function expand(textbox){
var minSize = 20;
var contentSize = textbox.value.length;
if(contentSize > minSize)
{
textboxSize = contentSize;
}
else
{
textboxSize = minSize;
}
}
</script>
<input type="text" size="20" onkeyup="expand(this)" />