AngularJS Calculated field from hidden fields - javascript

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;
});

Related

jinja - how to check if one input value is smaller than the other?

I'm writing a flesk registration form, and I request the user to input two numbers, one of which has to be smaller than the other. I see how I can read the values into the python app and confirm that they are correct, but I would like to have it check as the user type them. Is this possible, or should I brash the dust of my poor JS skills?
I thought that it might look like
<input type='number' name='foo' value='1'></input>
<input type='number' name='bar' value='2' min={{ request.foo.value + 1 }}></input>
but I get an error message jinja2.exceptions.UndefinedError: 'flask.wrappers.Request object' has no attribute 'foo'
Looks like you are trying force "bar" to always be grater than "foo" here is a code example you can use.
// get the input elements
let foo = document.querySelector('[name="foo"]');
let bar = document.querySelector('[name="bar"]')
// set initial min attribute for bar to be grater than foo
bar.setAttribute('min', +foo.value + 1);
// update the min attribute of bar everytime foo changes
foo.addEventListener('change', function(event) {
bar.setAttribute('min', +foo.value + 1)
});
<form>
<input required type="number" name="foo" value="1" />
<input required type="number" name="bar" value="" />
<input type="submit">
</form>

onchange must remove value from counter it is storing value

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!

javascript unset posted array elements

After submitting a form i need to unset the posted values, based on other values, before actually parsing the posted data to php.
For example:
My form contains 2 hidden fields and 2 regular inputs:
<form class='myForm'>
<input type="hidden" name="hide[0]" id="h[0]" value="someValue1" data-key="0" />
<input type="hidden" name="hide[1]" id="h[1]" value="someValue2" data-key="1" />
<input type=“text” name=“text[0]” id=“t[0]” value="" data-key=“0” />
<input type=“text” name=“text[1]” id=“t[1]” value="" data-key="1" />
<input type=“submit” value=“submit” />
</form>
i'm trying to unset posted value via javascript:
$('.myForm').submit(function() {
// loop through each input type = text
$('.myForm').submit(function() {
// loop through each input type = text
$(':input[type=text]').each(function() {
var key = $(this).attr('data-key');
var textValue = $(this).val();
if (textValue < 1) {
// unset posted input [type=text] with data-key
// unset posted hidden with same data-key
}
});
});
Unfortunately i have no clue how to unset the posted values without removing the actual form elements.
Any tips are welcome.

AngularJs : Set conditional min and max value for validation in number input field

I have created a web page which contains a form with two number input fields field1 and field2. I'm doing the validation on these fields. field1 has a min value 1 and max value 100000 but field2 should have min value is max of field1 or 1, anything which is greater and max is 100000. I tried to assign the ng-model of field1 as min of field2 but it not working.
<div class="row">
<div>
<input ng-model="priceminrange" name="priceminrange" type="number"
class="form-control" value="" placeholder="MinRange" min="1" max="100000">
<span ng-show="form.priceminrange.$error.number">The value is not a valid number</span>
<span ng-show="form.priceminrange.$error.min || form.priceminrange.$error.max">
The value must be in range 1 to 100000</span>
</div>
<div>
<input ng-model="pricemaxrange" name="pricemaxrange" type="number"
class="form-control" value="" placeholder="MaxRange" min={{priceminrange}} max="100000">
<span ng-show="form.pricemaxrange.$error.number">The value is not a valid number</span>
<span ng-show="form.pricemaxrange.$error.min || form.pricemaxrange.$error.max">
The value must be in range {{priceminrange}} to 100000</span>
form.pricemaxrange.$error = {{form.pricemaxrange.$error}}
</div>
</div>
You were close. The object priceminrange is an Angular object that contains several methods and properties, all relating to the model. The property you want is called $modelValue, which contains the value entered by the user after it is parsed to its correct data type (number in this case).
Something like this should work, assuming you have wrapped the input elements in a form named "form."
<input ng-model="pricemaxrange" type="number" min="{{form.priceminrange.$modelValue}}">
Try this
On controller create scope.
$scope.priceminrange = 1;

Increase/decrease textfield value with javascript

I'm having trouble in doing a javascript that will do the following:
Increase/decrease number inside textbox when image clicked.
setting a limit for that textbox (not below zero, not above x)
please know i have many text boxes in the same page, so how can this issue be fixed?
You don't need to (and shouldn't) set ids for each and every image and input field. You will need to set name attributes for each input field though (so your server code can tell them apart - but not for JS).
If the "add" section for each row looks like:
<div>
<img src='minus.png' onclick="increment(this.parentNode.getElementsByTagName('input')[0]);" />
<input type='text' name='product_1010101011' />
<img src='plus.png' onclick="decrement(this.parentNode.getElementsByTagName('input')[0]);" />
</div>
use this javascript:
function increment(myInput) {
// use Mike Samuel's code here
myInput.value = (+myInput.value + 1) || 0;
}
function decrement(myInput) {
// use Mike Samuel's code here
myInput.value = (myInput.value - 1) || 0;
}
I think this should get you going:
<form>
<input type="button" id="minus" value="-"
onClick="textb.value = (textb.value-1)">
<input type="text" id="textb" name="name" value="1" />
<input type="button" value="+"
onClick="textb.value = (+textb.value+1)">
</form>
Live example here
To increment
myInput.value = (+myInput.value + 1) || 0;
To decrement
myInput.value = (myInput.value - 1) || 0;
The || 0 will reset any value that doesn't parse as an integer to a default value, 0.

Categories