We Keep Coding

change the attribute value on blur for text boxes

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

How to increase or decrease all fields value by percentage?

$("button").on("click",function(){
var $this=$(this);
var Per=$(".per").val();
$(".anuzau").each(function(){
var Val=$(this).val();
if($this.hasClass("zau"))
$(this).val((((Val/100)*Per)+parseInt(Val)).toFixed(2));
else if($this.hasClass("anu"))
$(this).val((parseInt(Val)-((Val/100)*Per)).toFixed(2));
});
});
.anuzau{width:200px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="anu">-</button> <input class="per" type="text" size="6" value="0">%
<button class="zau">+</button>
<br><br>
<input type="text" size="6" class="anuzau" name="name" value="38.5"><br>
<input type="text" size="6" class="anuzau" name="name" value="75"><br>
<input type="text" size="6" class="anuzau" name="name" value="100">
I wish to increments/decrements all values by classname (anu zau), can anyone share me the jquery method? I have tried many tutorials.
I am new here, if anything wrong, please correct me.
<button class="anu">-</button> <input type="text" size="6" value="">%
<button class="zau">+</button>
<br><br>
<td><input type="text" size="6" class="anu zau" name="name" id="id" value="50"></td><br>
<td><input type="text" size="6" class="anu zau" name="name" id="id" value="200"></td><br>
<td><input type="text" size="6" class="anu zau" name="name" id="id" value="530"></td>

$("button").on("click",function(){
var $this=$(this);
var Per=$(".per").val();
$(".anuzau").each(function(){
var Val=$(this).val();
if($this.hasClass("zau"))
$(this).val((((Val/100)*Per)+parseInt(Val)));
else if($this.hasClass("anu"))
$(this).val((parseInt(Val)-((Val/100)*Per)));
});
});
.anuzau{width:200px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="anu">-</button> <input class="per" type="text" size="6" value="0">%
<button class="zau">+</button>
<br><br>
<input type="text" size="6" class="anuzau" name="name" value="50"><br>
<input type="text" size="6" class="anuzau" name="name" value="200"><br>
<input type="text" size="6" class="anuzau" name="name" value="530">

This should get you started. Not clear what precision you are looking for (adjust decimal_points accordingly)
var decimal_points = 2
$('button').click(function(){
var pVal = $('#percent').val(),
percent = pVal && !isNaN(pVal) ? +pVal/100 : 0;
//make it negative if anu button clicked
if($(this).hasClass('anu')){
percent = 0-percent;
}
$('input.anu').val(function(_, val){
// make sure input has numeric value
if(!val || isNaN(val) ){
return val;
}else{
return (+val + (val * percent)).toFixed(decimal_points);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="anu">-</button> <input id="percent" type="number" size="6" value="">%
<button class="zau">+</button>
<br><br>
<td><input type="text" size="6" class="anu zau" name="name" id="id" value="50"></td><br>
<td><input type="text" size="6" class="anu zau" name="name" id="id" value="200"></td><br>
<td><input type="text" size="6" class="anu zau" name="name" id="id" value="530"></td>

How to find the every td input and its respective id, value by the name

From the following code I have to find the following details
Find the first td
Find the f01 name id and its value e.g apex_date_01_00,null
Find the f30 name id and its value e.g id30_14,2
And this should be repeat for the all the tds which headers="ATTR_VALUE"
Code
<html>
<body>
<table summary="Attribute Details">
<tr>
<td headers="ATTR_VALUE"> <input type="hidden" name="f24" value="" id="id24_14"><span style="white-space: nowrap;"> <input type="text" style="width:100px" id="apex_date_01_00" name="f01" maxlength="11" size="20" value="" autocomplete="off" class="hasDatepicker"> </span> <input type="hidden" name="f06" value="424349"> <input type="hidden" name="f07" value="296069"> <input type="hidden" name="f08" value="LV FEEDERWAY 01 DETAILS"> <input type="hidden" name="f09" value="REPLACED DATE - PHASE L1"> <input type="hidden" name="f10" value="D_ATTRIBUTE7"> <input type="hidden" name="f15" value="U"> <input type="hidden" name="f30" value="2" id="id30_14"> </td>
</tr>
<tr>
<td headers="ATTR_VALUE"> <input type="hidden" name="f24" value="" id="id24_17"><span style="white-space: nowrap;"> <input type="text" style="width: 100px;" id="apex_date_01_03" name="f01" maxlength="11" size="20" value="" autocomplete="off" class="hasDatepicker"></span> <input type="hidden" name="f06" value="424349"> <input type="hidden" name="f07" value="296069"> <input type="hidden" name="f08" value="LV FEEDERWAY 01 DETAILS"> <input type="hidden" name="f09" value="REPLACED DATE - PHASE L2"> <input type="hidden" name="f10" value="D_ATTRIBUTE8"> <input type="hidden" name="f15" value="U"> <input type="hidden" name="f30" value="2" id="id30_17"> </td>
</tr>
<tr>
<td headers="ATTR_VALUE"> <input type="hidden" name="f24" value="" id="id24_20"><span style="white-space: nowrap;"> <input type="text" style="width:100px" id="apex_date_01_06" name="f01" maxlength="11" size="20" value="" autocomplete="off" class="hasDatepicker"></span> <input type="hidden" name="f06" value="424349"> <input type="hidden" name="f07" value="296069"> <input type="hidden" name="f08" value="LV FEEDERWAY 01 DETAILS"> <input type="hidden" name="f09" value="REPLACED DATE - PHASE L3"> <input type="hidden" name="f10" value="D_ATTRIBUTE9"> <input type="hidden" name="f15" value="U"> <input type="hidden" name="f30" value="1" id="id30_20"> </td>
</tr>
</table>
</body>
</html>

You need to loop over each td with headers 'ATTR_VALUE'
$('td[headers="ATTR_VALUE"]').each(function(){
//find input with name=f01
var f01id = $(this).find('input[name="f01"]').attr('id');
var f01value = $(this).find('input[name="f01"]').val();
//find input with name=f30
var f30id = $(this).find('input[name="f30"]').attr('id');
var f30value = $(this).find('input[name="f30"]').val();
});

Try this code
$('td[headers="ATTR_VALUE"]').each(function(){
$('input').each(function(){
if($(this).attr('name')=="f01" || $(this).attr('name')=="f30"){
alert($(this).attr('id')+','+$(this).val());
}
})
})

Find first td element:
document.querySelector('td')
find All 'td' of table:
var arr = document.querySelectorAll('td')
$.each(arr,function(i,data){
var f01id = $(this).find('input[name="f01"]').attr('id');
var f01value = $(this).find('input[name="f01"]').val();
//find input with name=f30
var f30id = $(this).find('input[name="f30"]').attr('id');
var f30value = $(this).find('input[name="f30"]').val();
console.log(f01id)
console.log(f01value)
console.log(f30id)
console.log(f30value)
})

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="" />

Javascript Matrix Calculator with HTML form

I have a website that teaches students finite math http://finitehelp.com.
On the site I have a calculator that does combinations and permutations and now I am trying to include a matrix calculator that will add, subtract, multiply, and inverse matrices.
I am using Javascript and the sylvester library http://sylvester.jcoglan.com/ to do the calculations. I was able to successfully create a program that would take values entered into a form by a user and do the calculations but this only works for a matrix of a specific size (4x4).
What I cannot figure it out is how to only take values from a form which are not null and create a matrix out of them and then output those values into the appropriate fields in the result form.
Some Sylvester methods I am using
// create matrix from embedded array and assign to var A
var A = $M([
[8,3,9],
[2,0,7],
[1,9,3]
]);
// create matrix from embedded array and assign to var B
var B = $M([
[4,1,2],
[1,5,3],
[1,7,2]
]);
// Multiply AB
A.x(B)
// assign product of A.x(B) to var res
var res = A.x(B)
// return the 1,1 element of res
res.e(1,1)
In my form the biggest matrix you can put in is 6x6 because they will never need to calculate matrices larger than this.
What I need the program to do is detect how large the matrices are, create sylvester matrices out of them, and assign them to variables. Once they are variables I can use sylvester to do the operations but I also will need to know how to output the results into a form.
Here is what I have so far
Javascript:
window.onload = function()
{
document.getElementById('mbutton').onclick = doCalc;
document.getElementById('subtbutton').onclick = doCalc;
document.getElementById('addbutton').onclick = doCalc;
}
function doCalc() {
// assign the inputted values to variables
var Aval1 = document.matrixCalc.AR1C1.value,
Aval2 = document.matrixCalc.AR1C2.value,
Aval3 = document.matrixCalc.AR2C1.value,
Aval4 = document.matrixCalc.AR2C2.value,
Bval1 = document.matrixCalc.BR1C1.value,
Bval2 = document.matrixCalc.BR1C2.value,
Bval3 = document.matrixCalc.BR2C1.value,
Bval4 = document.matrixCalc.BR2C2.value;
// make matrices out of the inputted values and assign to variables
var A = $M([
[Aval1,Aval2],
[Aval3,Aval4]
]);
var B = $M([
[Bval1,Bval2],
[Bval3,Bval4]
]);
// if user clicks multiply button make the values of
// the answer form show the appropriate values
if (this.value == "x") {
var res = A.x(B);
document.matrixCalc.PR1C1.value = res.e(1,1);
document.matrixCalc.PR1C2.value = res.e(1,2);
document.matrixCalc.PR2C1.value = res.e(2,1);
document.matrixCalc.PR2C2.value = res.e(2,2);
} else if (this.value == "-") {
var res = A.subtract(B);
document.matrixCalc.PR1C1.value = res.e(1,1);
document.matrixCalc.PR1C2.value = res.e(1,2);
document.matrixCalc.PR2C1.value = res.e(2,1);
document.matrixCalc.PR2C2.value = res.e(2,2);
} else if (this.value == "+") {
document.matrixCalc.PR1C1.value = parseFloat(Aval1) + parseFloat(Bval1);
document.matrixCalc.PR1C2.value = parseFloat(Aval2) + parseFloat(Bval2);
document.matrixCalc.PR2C1.value = parseFloat(Aval3) + parseFloat(Bval3);
document.matrixCalc.PR2C2.value = parseFloat(Aval4) + parseFloat(Bval4);
}
}
HTML form:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="sylvester.src.js"></script>
<script type="text/javascript" src="matrices.js"></script>
</head>
<body>
<form name="matrixCalc" action="">
<div id="matrix-a">
<p>Matrix A</p>
<input type="text" name="AR1C1" size="4" />
<input type="text" name="AR1C2" size="4" />
<input type="text" name="AR1C3" size="4" />
<input type="text" name="AR1C4" size="4" />
<input type="text" name="AR1C5" size="4" />
<input type="text" name="AR1C6" size="4" />
<br/>
<input type="text" name="AR2C1" size="4" />
<input type="text" name="AR2C2" size="4" />
<input type="text" name="AR2C3" size="4" />
<input type="text" name="AR2C4" size="4" />
<input type="text" name="AR2C5" size="4" />
<input type="text" name="AR2C6" size="4" />
<br/>
<input type="text" name="AR3C1" size="4" />
<input type="text" name="AR3C2" size="4" />
<input type="text" name="AR3C3" size="4" />
<input type="text" name="AR3C4" size="4" />
<input type="text" name="AR3C5" size="4" />
<input type="text" name="AR3C6" size="4" />
<br/>
<input type="text" name="AR4C1" size="4" />
<input type="text" name="AR4C2" size="4" />
<input type="text" name="AR4C3" size="4" />
<input type="text" name="AR4C4" size="4" />
<input type="text" name="AR4C5" size="4" />
<input type="text" name="AR4C6" size="4" />
<br/>
<input type="text" name="AR5C1" size="4" />
<input type="text" name="AR5C2" size="4" />
<input type="text" name="AR5C3" size="4" />
<input type="text" name="AR5C4" size="4" />
<input type="text" name="AR5C5" size="4" />
<input type="text" name="AR5C6" size="4" />
<br/>
<input type="text" name="AR6C1" size="4" />
<input type="text" name="AR6C2" size="4" />
<input type="text" name="AR6C3" size="4" />
<input type="text" name="AR6C4" size="4" />
<input type="text" name="AR6C5" size="4" />
<input type="text" name="AR6C6" size="4" />
</div>
<div id="matrix-b">
<p>Matrix B</p>
<input type="text" name="BR1C1" size="4" />
<input type="text" name="BR1C2" size="4" />
<input type="text" name="BR1C3" size="4" />
<input type="text" name="BR1C4" size="4" />
<input type="text" name="BR1C5" size="4" />
<input type="text" name="BR1C6" size="4" />
<br/>
<input type="text" name="BR2C1" size="4" />
<input type="text" name="BR2C2" size="4" />
<input type="text" name="BR2C3" size="4" />
<input type="text" name="BR2C4" size="4" />
<input type="text" name="BR2C5" size="4" />
<input type="text" name="BR2C6" size="4" />
<br/>
<input type="text" name="BR3C1" size="4" />
<input type="text" name="BR3C2" size="4" />
<input type="text" name="BR3C3" size="4" />
<input type="text" name="BR3C4" size="4" />
<input type="text" name="BR3C5" size="4" />
<input type="text" name="BR3C6" size="4" />
<br/>
<input type="text" name="BR4C1" size="4" />
<input type="text" name="BR4C2" size="4" />
<input type="text" name="BR4C3" size="4" />
<input type="text" name="BR4C4" size="4" />
<input type="text" name="BR4C5" size="4" />
<input type="text" name="BR4C6" size="4" />
<br/>
<input type="text" name="BR5C1" size="4" />
<input type="text" name="BR5C2" size="4" />
<input type="text" name="BR5C3" size="4" />
<input type="text" name="BR5C4" size="4" />
<input type="text" name="BR5C5" size="4" />
<input type="text" name="BR5C6" size="4" />
<br/>
<input type="text" name="BR6C1" size="4" />
<input type="text" name="BR6C2" size="4" />
<input type="text" name="BR6C3" size="4" />
<input type="text" name="BR6C4" size="4" />
<input type="text" name="BR6C5" size="4" />
<input type="text" name="BR6C6" size="4" />
<br/>
</div>
<div id="buttons">
<input type="button" id="mbutton" value="x" />
<input type="button" id="addbutton" value="+" />
<input type="button" id="subtbutton" value="-" />
</div>
<div id="matrix-c">
<p>Answer</p>
<input type="text" name="PR1C1" size="4" />
<input type="text" name="PR1C2" size="4" />
<input type="text" name="PR1C3" size="4" />
<input type="text" name="PR1C4" size="4" />
<input type="text" name="PR1C5" size="4" />
<input type="text" name="PR1C6" size="4" />
<br/>
<input type="text" name="PR2C1" size="4" />
<input type="text" name="PR2C2" size="4" />
<input type="text" name="PR2C3" size="4" />
<input type="text" name="PR2C4" size="4" />
<input type="text" name="PR2C5" size="4" />
<input type="text" name="PR2C6" size="4" />
<br/>
<input type="text" name="PR3C1" size="4" />
<input type="text" name="PR3C2" size="4" />
<input type="text" name="PR3C3" size="4" />
<input type="text" name="PR3C4" size="4" />
<input type="text" name="PR3C5" size="4" />
<input type="text" name="PR3C6" size="4" />
<br/>
<input type="text" name="PR4C1" size="4" />
<input type="text" name="PR4C2" size="4" />
<input type="text" name="PR4C3" size="4" />
<input type="text" name="PR4C4" size="4" />
<input type="text" name="PR4C5" size="4" />
<input type="text" name="PR4C6" size="4" />
<br/>
<input type="text" name="PR5C1" size="4" />
<input type="text" name="PR5C2" size="4" />
<input type="text" name="PR5C3" size="4" />
<input type="text" name="PR5C4" size="4" />
<input type="text" name="PR5C5" size="4" />
<input type="text" name="PR5C6" size="4" />
<br/>
<input type="text" name="PR6C1" size="4" />
<input type="text" name="PR6C2" size="4" />
<input type="text" name="PR6C3" size="4" />
<input type="text" name="PR6C4" size="4" />
<input type="text" name="PR6C5" size="4" />
<input type="text" name="PR6C6" size="4" />
</div>
</body>
</html>
Any help would be appreciated. When answering please keep in mind that this is only the second time I've tried to write a program so that little bit extra in the explanation could help a great deal. Thank you.

I think you will find it better to use a textarea and let users type in matrices in a much more natural format. It will require parsing the content, but that's not hard. That way users can create any size matrix. I can post a generic "parse textarea content to make an array" function a little later.
Also, the maths isn't that hard. I did it some time ago (products, addition, determinants) but can't find where I put it. Determinants were the most difficult, if I remember correctly it was a simple matter of splitting larger matrices into 2x2 matrices and adding and subtracting their determinants (everything I needed was on the Wolfram web site).