change the attribute value on blur for text boxes - javascript

I have multiple textboxes and I want to update a data-price attribute on blur.
If I change the value need to change specific 'data-price' attribute.
$(document).ready(function() {
$('#price').blur(function(){
$test=$(this).attr('data-price');
$test=$(this).val();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="price" class="default used_asset1" maxlength="8" placeholder="Amount" data-price="342" name="price" type="text" value="342">
<input id="price" class="default used_asset1" maxlength="8" placeholder="Amount" data-price="3" name="price" type="text" value="3">
<input id="price" class="default used_asset1" maxlength="8" placeholder="Amount" data-price="25" name="price" type="text" value="25">
<input id="price" class="default used_asset1" maxlength="8" placeholder="Amount" data-price="32" name="price" type="text" value="32">
Is it possible to update attribute value in jquery.What I did wrong in my code

Use price as class because element IDs should be unique within the entire document.
$(document).ready(function() {
$('.price').blur(function(){
//$test=$(this).attr('data-price');
//$test=$(this).val();
$(this).attr('data-price', $(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="price efault used_asset1" maxlength="8" placeholder="Amount" data-price="342" name="price" type="text" value="342">
<input class="price efault used_asset1" maxlength="8" placeholder="Amount" data-price="3" name="price" type="text" value="3">
<input class="price efault used_asset1" maxlength="8" placeholder="Amount" data-price="25" name="price" type="text" value="25">
<input class="price efault used_asset1" maxlength="8" placeholder="Amount" data-price="32" name="price" type="text" value="32">

You can't select an element by ID if the ID has been duplicated. It will work on the first one and ignore the rest. Selecting by class or element name will select all of them.
https://jsfiddle.net/5n71z2uq/
I'm selecting the inputs but you can put a class in and select VIA class.
$(document).ready(function() {
$('input').blur(function(){
$(this).attr('data-price', this.value);
});
});

Yeah you can. It's very easy, just try it.
$(document).ready(function(){
$('#price').blur(function(){
$(this).data('price', $(this).val());
});
});

Related

Select last input with a value greater than zero jquery

I have a form with a bunch of inputs set with value zero like
<input type="text" name="qty" size="4" autocomplete="off" class="form-control quantity_wanted text" value="0">
The user then types in quantities of products they want. I want to select the last input where they entered a quantity. I was able to do something similar with checkboxes like this.
$('.product-checkbox:checkbox:checked:last')
But how can I put in a condition for an input box to select the last input with value greater than zero? Thanks.
You could use :not() and the Attribute Selector [attribute]
:not([value='0'])
JavaScript example
let qtyGT0 = [...document.querySelectorAll(".qty:not([value='0'])")].reverse()[0];
// Just to test
if (qtyGT0) qtyGT0.classList.add("red");
.red{ background:red; }
<input class="qty" value="0">
<input class="qty" value="1">
<input class="qty" value="1">
<input class="qty" value="0">
Another JavaScript example
in pure JavaScript ES6 it would look like
let qtyGT0 = [...document.querySelectorAll(".qty")].filter( el => el.value > 0 ).pop();
// Just to test
if (qtyGT0) qtyGT0.classList.add("red");
.red{ background:red; }
<input class="qty" value="0">
<input class="qty" value="1">
<input class="qty" value="1">
<input class="qty" value="0">
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
jQuery:
var $qtyGT0 = $(".qty").filter((i, el) => el.value > 0 ).last();
// Just to test
$qtyGT0.addClass("red");
.red{ background:red; }
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="qty" value="0">
<input class="qty" value="1">
<input class="qty" value="1">
<input class="qty" value="0">
http://api.jquery.com/filter/
https://api.jquery.com/last/
A pure JavaScript answer is that you would just iterate them in reverse and stop at the first one you find.
var inputs = document.querySelectorAll("input");
for(var len = inputs.length-1; len >=0; len--){
if(inputs[len].value > 0){
console.log(inputs[len].name);
inputs[len].style.backgroundColor = "yellow";
break;
}
}
<input type="text" name="qty" size="4" autocomplete="off" class="form-control quantity_wanted text" value="1">
<input type="text" name="qty2" size="4" autocomplete="off" class="form-control quantity_wanted text" value="2">
<input type="text" name="qty3" size="4" autocomplete="off" class="form-control quantity_wanted text" value="3">
<input type="text" name="qty4" size="4" autocomplete="off" class="form-control quantity_wanted text" value="0">

How add value to array textbox in jquery?

How can I assign value to array named textbox?
Example:
<input type="text" name="amount[]" value="" />
<input type="text" name="amount[]" value="" />
<input type="text" name="amount[]" value="" />
Add values to Text box using jquery
$('input[name="amount[1]"]').val(20);
$('input[name="amount[2]"]').val(130);
$('input[name="amount[3]"]').val(50);
The above script is not working. Please help me to solve this problem.
You can use eq() or :eq()
$('input[name="amount[]"]').eq(0).val(20);
$('input[name="amount[]"]').eq(1).val(130);
$('input[name="amount[]"]').eq(2).val(50);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" name="amount[]" value="" />
<input type="text" name="amount[]" value="" />
<input type="text" name="amount[]" value="" />
or
$('input[name="amount[]"]:eq(0)').val(20);
$('input[name="amount[]"]:eq(1)').val(130);
$('input[name="amount[]"]:eq(2)').val(50);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" name="amount[]" value="" />
<input type="text" name="amount[]" value="" />
<input type="text" name="amount[]" value="" />

How to pass value of one input to Multiple input?

I have multi input field like below
<td width="25%">
<input name="interest" id="interest" type="text" size="6" maxlength="6" />%
<input name="interest1" id="interest1" type="text" size="6" maxlength="6" />%1
..................
</td>
Now I want pass same value of one input field to other four input fields? how I will pass ? any idea ?
Just Try this.,
$("#interest").change(function(){
$('.myinput').val($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="interest" id="interest" type="text" size="6" maxlength="6" />%
<input name="interest1" class="myinput" type="text" size="6" maxlength="6" />%1
<input name="interest2" class="myinput" type="text" size="6" maxlength="6" />%2
<input name="interest3" class="myinput" type="text" size="6" maxlength="6" />%3
<input name="interest4" class="myinput" type="text" size="6" maxlength="6" />%4

How to add multiple models together in angular

I have some number inputs as so:
<input class="title form-control" id="quantity1" min="0" name="quantity1" ng-model="option1" type="number" value="0">
<input class="title form-control" id="quantity2" min="0" name="quantity2" ng-model="option2" type="number" value="0">
<input class="title form-control" id="quantity3" min="0" name="quantity3" ng-model="option3" type="number" value="0">
<input class="title form-control" id="quantity4" min="0" name="quantity4" ng-model="option4" type="number" value="0">
And in other number input I want to display the total quantity.
<input class="title form-control" id="quantity" min="0" name="quantity" ng-model="quantityTotal" type="number" value="0">
How would I go about adding multiple bindings together.
UPDATE: You can make use of value attribute of the control over here. So it would be like:
<input class="title form-control" id="quantity" min="0" name="quantity" value="{{option1+option2+option3+option4}}" type="number" />
Working Fiddle
There are two methods that readily jump to mind.
First you could use ng-change to call a function to update the total:
HTML:
<input class="title form-control" id="quantity1" min="0" name="quantity1" ng-change="onQuantityChange()" ng-model="option1" type="number">
<input class="title form-control" id="quantity2" min="0" name="quantity2" ng-change="onQuantityChange()" ng-model="option2" type="number">
<input class="title form-control" id="quantity3" min="0" name="quantity3" ng-change="onQuantityChange()" ng-model="option3" type="number">
<input class="title form-control" id="quantity4" min="0" name="quantity4" ng-change="onQuantityChange()" ng-model="option4" type="number">
<input class="title form-control" id="quantity" min="0" name="quantity" type="number" ng-model="quantityTotal">
Function:
$scope.onQuantityChange = function() {
$scope.quantityTotal = $scope.option1 + $scope.option2 + $scope.option3 + $scope.option4;
};
You could also just add an expression to the value of the total input like so:
<input class="title form-control" id="quantity" min="0" name="quantity" type="number" value="{{opt1+opt2+opt3+opt4}}">
Here are both solutions working on plnkr.
Side note the first approach would probably be the preferred as it is generally good practice to avoid putting your business logic into your markup.
Hope this helps. Cheers!

Targeting multiple input fields with using same name

I have a number of
<input type="text" name="price[]" value="100">
<input type="text" name="price[]" value="50">
<input type="text" name="price[]" value="10">
<input type="text" name="price[]" value="90">
I also have a input field
<input type="text" name="Add" value="">
I want
each price[] input field to have their own Addition Button next to it that will get the value from that specific price[] input field
add the value from the Add input field to it
update the value of that specific price[] input field in the end
How can I do that?
to iterate through the price[]-boxes for adding buttons right to them and set the value from price[] to the button, do it like this
<input type="text" name="price[]" value="100">
<input type="text" name="price[]" value="50">
<input type="text" name="price[]" value="10">
<input type="text" name="price[]" value="90">
<script type="text/javascript">
$(document).ready(function() {
$('input[name="price[]"]').each(function(i) {
$(this).after('<button class="additionButton" price="'+$(this).val()+'">'+$(this).val()+'</button>');
});
//click
$(".additionButton").on('click',function() {
//original price, set on load
alert($(this).attr('price'));
//price in the input-field before the button (could be changed, think this is the idea)
alert($(this).prev('input').val());
});
});
</script>
for the rest, i am not sure what you mean, "Add" has no value and you seriously want some kind of calculation? But try yourself, here was at least the iteration.

Categories