Disable only unwanted inputs Javascript

Disable only unwanted inputs Javascript - javascript

I have this cool piece of Javascript that disables rows and change color were input is disabled.
But I need:
If filled input #1 all other 3 inputs are disabled,
if filled input #3 all other 3 inputs are disabled,
if filled input #2 and/or #4 then inputs #1 AND #3 are disabled.
Data is coming from database.
Javascript:
$(".input").on("keypress change keyup",function(){
if($(this).val() != "")
{
$(this).parent().parent().find(".input").not($(this)).prop("disabled",true).css("background-color","#cccccc");
}
else
{ $(this).parent().parent().find(".input").prop("disabled",false).css("background-color","#ffffff");
}
});
And here is the table code:
<table>
<tr>
<td>
<input type="text" class="input" value="">
</td>
<td>
<input type="text" class="input" value="">
</td>
<td>
<input type="text" class="input" value="">
</td>
</tr>
<tr>
<td>
<input type="text" class="input" value="">
</td>
<td>
<input type="text" class="input" value="">
</td>
<td>
<input type="text" class="input" value="">
</td>
</tr>
</table>
This piece of code was made by Alexis.

Here are the codes you seek...
HTML
To avoid the issue you were having with hidden inputs etc and not knowing the nth-term of each element, use classes instead:
<table>
<tr>
<td>
<input type="hidden" class="input" value="">
</td>
<td>
<input type="text" class="input toggle all" value="">
</td>
<td>
<input type="text" class="input toggle every-other" value="">
</td>
<td>
<input type="text" class="input toggle all" value="">
</td>
<td>
<input type="text" class="input toggle every-other" value="">
</td>
</tr>
</table>
JQuery
$('body').on( 'keyup blur', '.input.toggle', function() {
var $this = $( this );
var $parent = $this.parent();
var $disable = $parent.siblings().children();
if ( $this.val() != "" )
{
if ( $this.is( '.all' ) )
{
$disable = $parent.siblings().children( '.toggle' );
}
else if ( $this.is( '.every-other' ) )
{
$disable = $parent.siblings().children( '.all' );
}
$disable.attr( 'disabled', true ).css("background-color","#ccc");
}
else
{
$disable.removeAttr('disabled').css("background-color","#fff");
}
});
And here is an example of it working.

Related

how to disable the button based on result of javascript function

I want to disable the button based on the javascript result of textboxes if there is incorrect email id then the button should be disabled .Help me over this.If there is incorrect email and phone no ,I Want to disable my Button function or button.My problem is I'm using separate javascript functions for textboxes so how can disable the button based on other javascript function.Help me over this
<div align="right">
</div>
<div id="div">
<center> <h3>REGISTER</h3></center>
<div id="output" align="center">
</div>
<table>
<thead>
</thead>
<tbody>
<tr>
<td>
<label>Firstname</label>
<td>
<input type="text" name="firstname" id="firstname" required="">
</td>
</tr>
<tr>
<td>
<label>Lastname</label>
</td>
<td>
<input type="text" name="lastname" id="lastname" required="">
</td>
</tr>
<tr>
<td>
<label>Email</label>
</td>
<td>
<input type="text" name="email" id="email" required="">
</td>
<td id="error" style="display:none;color:red">
invalidemail
</td>
</tr>
<tr>
<td>
<label>Password</label>
</td>
<td>
<input type="password" name="password" id="password" required="">
</td>
</tr>
<tr>
<td>
<label>Confirm password</label>
</td>
<td>
<input type="password" name="confirmpassword" id="confirmpassword" required="">
</td>
<span id="pass"></span>
</tr>
<tr>
<td>
<label>Phone no</label>
</td>
<td>
<input type="text" name="phoneno" pattern="[789][0-9]{9}" id="phoneno" required="" maxlength="10">
</td>
<td id="invalidphone" style="display:none;color:red">
invalidphoneno
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="submit" name="submit" value="submit" id="submit"/>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
Login?
</td>
</tr>
</tbody>
</table>
</div>
</body>
</head>
</html>
<script type="text/javascript">
$('#email').on('keypress', function() {
var re = /([A-Z0-9a-z_-][^#])+?#[^$#<>?]+?\.[\w]{2,4}/.test(this.value);
if(!re) {
$('#error').show();
} else {
$('#error').hide();
}
});
$('#phoneno').on('keypress',function(){
var phone=/^\+{0,2}([\-\. ])?(\(?\d{0,3}\))?([\-\. ])?\(?\d{0,3}\)?([\-\. ])?\d{3}([\-\. ])?\d{4}/.test(this.value);
if(!phone){
$('#invalidphone').show();
}
else
{
$('#invalidphone').hide();
}
});
$(document).ready(function(){
$('#submit').click(function(){
var first=$('#firstname').val();
var last=$('#lastname').val();
var Email=$('#email').val();
var pass=$('#password').val();
var confirm=$('#confirmpassword').val();
var phone=$('#phoneno').val();
$.ajax({
type:"POST",
url:"register.php",
data:{
firstname:first,
lastname:last,
email:Email,
password:pass,
confirmpassword:confirm,
phoneno:phone,
},
success:function(data){
if($.trim(data)==='successfully registered')
{
$('#output').html(data);
}
else
{
$('#pass').html(data);
}
},
error:function()
{
alert("error");
}
});
});
});
</script>

Have submit button disabled initially till you have all form
elements as proper
With the HTML5 input (email and text) fields, you already have the required attribute present, but need to put required="required"
Have an onChange event for the last (required) field, check if the
validation is successful.
Check this for more details and additional info
If input field is empty, disable submit button

Use $("#submit").attr("disabled", true); to disable and $("#submit").removeAttr("disabled"); to enable the button
$('#phoneno').on('keypress',function(){
var phone=/^\+{0,2}([\-\. ])?(\(?\d{0,3}\))?([\-\. ])?\(?\d{0,3}\)?([\-\. ])?\d{3}([\-\. ])?\d{4}/.test(this.value);
if(!phone){
$("#submit").attr("disabled", true); // disable submit btn
$('#invalidphone').show();
}
else
{
$("#submit").removeAttr("disabled"); //enable submit btn
$('#invalidphone').hide();
}
});

Simply disable the button at the top of your javascript.
$("#submit").prop("disabled", true);
Then in your regex, if it's true, set it to false.
EDIT - It's probably best to set your regex variables global and then you can do if statement for both regex.
if (re && phone) {
$("#submit").prop("disabled", false);
}

How to get Addition of multiple textbox's values in another single textbox using jQuery?

Newbie in jquery, need some help with this description.
Suppose, I have 1 textbox that contain the result of Addition of another 2 textbox's.
<input type="text class="tb1">
<input type="text class="tb2">
<input type="text class="result" id="result1">
like this.
Suppose I have 5 textbox's that contain their individual 2 textbox's addition results.
Each Result textbox generate result automatically using jquery script.
So, I have 5 result textbox's with their respective addition result.
Now, I want to sum of the values in all 5 result texbox's again in another textbox when i click on checkbox automatically by using jquery or javascript script.
How can I achive this task ?
refer image for understanding of question.
http://i.stack.imgur.com/iFF46.jpg

Assuming that the number 5 of the text boxes remains the same here is a solution for your problem. ( Without validations )
$("#add").click(function() {
$("#result1").val(parseInt($("#box1").val()) + parseInt($("#box2").val()));
$("#result2").val(parseInt($("#box3").val()) + parseInt($("#box4").val()));
$("#result3").val(parseInt($("#box5").val()) + parseInt($("#box6").val()));
$("#result4").val(parseInt($("#box7").val()) + parseInt($("#box8").val()));
$("#result5").val(parseInt($("#box9").val()) + parseInt($("#box10").val()));
});
$( "#final-check" ).change(function() {
var finalResult = 0;
for (var i = 1; i <= 5; i++) {
finalResult = finalResult + parseInt($("#result" + i).val());
}
$("#final-result").val(finalResult);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="text" id="box1">
</td>
<td>+</td>
<td>
<input type="text" id="box2">
</td>
<td>=</td>
<td>
<input type="text" id="result1">
</td>
</tr>
<tr>
<td>
<input type="text" id="box3">
</td>
<td>+</td>
<td>
<input type="text" id="box4">
</td>
<td>=</td>
<td>
<input type="text" id="result2">
</td>
</tr>
<tr>
<td>
<input type="text" id="box5">
</td>
<td>+</td>
<td>
<input type="text" id="box6">
</td>
<td>=</td>
<td>
<input type="text" id="result3">
</td>
</tr>
<tr>
<td>
<input type="text" id="box7">
</td>
<td>+</td>
<td>
<input type="text" id="box8">
</td>
<td>=</td>
<td>
<input type="text" id="result4">
</td>
</tr>
<tr>
<td>
<input type="text" id="box9">
</td>
<td>+</td>
<td>
<input type="text" id="box10">
</td>
<td>=</td>
<td>
<input type="text" id="result5">
</td>
</tr>
</table>
<button id="add">add</button>
<input type="text" id="final-result">
<input type="checkbox" id="final-check">

You can add any number of text boxes and get your results.
<div>
<input type="text" class="textBox" value="0">
<input type="text" class="textBox" value="0">
<input type="text" class="resultBox" value="0">
</div>
<div>
<input type="text" class="textBox" value="0">
<input type="text" class="textBox" value="0">
<input type="text" class="resultBox" value="0">
</div>
<div>
<input type="text" class="textBox" value="0">
<input type="text" class="textBox" value="0">
<input type="text" class="resultBox" value="0">
</div>
<div>
<input type="text" class="textBox" value="0">
<input type="text" class="textBox" value="0">
<input type="text" class="resultBox" value="0">
</div>
<div>
<input type="text" class="textBox" value="0">
<input type="text" class="textBox" value="0">
<input type="text" class="resultBox" value="0">
</div>
<div>
<input type="text" id="mainTotBox" value="0">
</div>
$(".textBox").on("change", function(){
var total = 0;
var thisInput = this;
$(this).closest("div").find("input[class='textBox']").each(function(index, inputEle){
total += window.parseInt($(inputEle).val());
$(thisInput).closest("div").find(".resultBox").val(total);
});
var mainTot = 0;
$(".resultBox").each(function(index, inputEle){
mainTot += window.parseInt($(inputEle).val());
});
$("#mainTotBox").val(mainTot);
});

<input type="text class="tb">
<input type="text class="tb">
<input type="text class="tb">
<input type="text class="tb">
<input type="text class="tb">
<input type="text class="result" id="result">
<script>
var result=0;
// Loop thru each input field that has class tb, take its numeric value
// and add it to result
function AddEmUp()
{
$("input.tb").each(
function()
{
result=result+Number( $(this).val() );
});
// Display the result in input box with id=result
$("#result").val( result);
}
// Execute AddEmUp when any one of the input fields with class tb is clicked
$("input.tb").click( AddEmUp );
</result>

Changing form input to read only when elements reproduced

So I am pretty clueless when it comes to jQuery and just inherited someone else's code. Any help is greatly appreciated.
I have a form that is populated from a query as they add students to the form. They can have any number of students added to the form. Below is the html:
<table style="width:100%">
<tr>
<td colspan="2">
<label class="control-label" >Name</label>
<input type="text" name="name[]" value="" class="required" style="width: 290px">
</td>
<td colspan="2">
<label class="control-label" >Email</label>
<input type="text" name="email[]" value="" class="required">
</td>
</tr>
<tr>
<td colspan="2">
<label class="control-label" >Address</label>
<input type="text" name="address1[]" value="" class="required" style="width: 290px">
</td>
<td colspan="2">
<label class="control-label" >Address 2 <small>(optional)</small></label>
<input type="text" name="address2[]" value="">
</td>
</tr>
<tr>
<td colspan="1">
<label class="control-label" >City</label>
<input type="text" name="city[]" value="" style="width:120px;" class="required">
</td>
<td>
<label class="control-label" >State/Providence</label>
<input type="text" name="st_prov[]" value="" style="width:120px;" class="required">
</td>
<td>
<label class="control-label" >Postal Code</label>
<input type="text" name="zip_pc[]" value="" style="width:60px;" class="required">
</td>
<td>
<label class="control-label" >Country</label>
<input type="text" name="country[]" value="" class="required">
</td>
</tr>
<tr><td colspan="4"> </td></tr>
</table>
Here is the jQuery function that I've been trying to modify:
jQuery(function($){
var addStudent = function(data){
var studentEl = $($('.student').get(0)).clone()
studentEl.find('input').each(function(){
var field = $(this).attr('name').replace('[]','')
if ($(this).attr("name").val == 'name'){
$(this).prop("readonly", true);
}
$(this).val(data[field] || '')
})
if(data.client_no!=''){
studentEl.find('.will_update').text("Will update student information for "+data.name+'')
}
$($('.student').last()).after(studentEl)
}
})
The function creates an additional set of fields for each student populated by the database for the form to process.
I'm looking to modify the specific field for "name" to be readonly (can view but not modify but yet still submit). I've tried many other iterations but cannot get the field name in the if clause to make only that field read only.
Any help provided would be great.

The proper way of getting an attribute via jQuery is just : $(this).attr("name")
Also instead of using:
var field = $(this).attr('name').replace('[]','')
if ($(this).attr("name").val == 'name'){
$(this).prop("readonly", true);
}
Use the variable field that you already created:
var field = $(this).attr('name').replace('[]','')
if (field == 'name'){
$(this).prop("readonly", true);
}
See snippet below :
jQuery(function($) {
var addStudent = function(data) {
var studentEl = $($('.student').get(0)).clone()
studentEl.find('input').each(function() {
var field = $(this).attr('name').replace('[]', '')
if (field == 'name') {
$(this).prop("readonly", true);
}
$(this).val(data[field] || '')
})
if (data.client_no != '') {
studentEl.find('.will_update').text("Will update student information for " + data.name + '')
}
$($('.student').last()).after(studentEl)
}
$('button').click(function() {
addStudent({
client_no: 1,
name: "Ralph John "
})
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:100%" class="student">
<tr>
<td colspan="2">
<label class="control-label">Name</label>
<input type="text" name="name[]" value="" class="required" style="width: 290px">
</td>
<td colspan="2">
<label class="control-label">Email</label>
<input type="text" name="email[]" value="" class="required">
</td>
</tr>
<tr>
<td colspan="2">
<label class="control-label">Address</label>
<input type="text" name="address1[]" value="" class="required" style="width: 290px">
</td>
<td colspan="2">
<label class="control-label">Address 2 <small>(optional)</small>
</label>
<input type="text" name="address2[]" value="">
</td>
</tr>
<tr>
<td colspan="1">
<label class="control-label">City</label>
<input type="text" name="city[]" value="" style="width:120px;" class="required">
</td>
<td>
<label class="control-label">State/Providence</label>
<input type="text" name="st_prov[]" value="" style="width:120px;" class="required">
</td>
<td>
<label class="control-label">Postal Code</label>
<input type="text" name="zip_pc[]" value="" style="width:60px;" class="required">
</td>
<td>
<label class="control-label">Country</label>
<input type="text" name="country[]" value="" class="required">
</td>
</tr>
<tr>
<td colspan="4"> </td>
</tr>
</table>
<button>Add Student</button>

Couple problems in your code.
Use $('student').eq(0) instead of $($('.student').get(0))
You're getting the dom element from a jquery object and rewrapping it into a jquery object. The eq(index) function returns a jquery wrapped element.
You're trying to get a val property from attr("name"), which returns a string. You'll get undefined.
if ($(this).attr("name").val == 'name'){
$(this).prop("readonly", true);
}
If you're trying to find the existence of the name attribute, just do
if ($(this).attr("name")){
$(this).prop("readonly", true);
}
Lastly, you don't need to rewrap a jquery object with a jquery object.
$($('.student').last())
Jquery functions return the jquery object, meaning you can chain calls, and you don't need to rewrap it.
$('.student').last()

You can modify your code as below. Assuming your table has class student here is a working demo - Fiddle.
$(function(){
var addStudent = function(data){
var studentEl = $('.student tr:first').clone();
studentEl.find('input').each(function(){
var field = $(this).attr('name').replace('[]','');
if (field === 'name'){
$(this).prop("readonly", true);
}
$(this).val(data[field] || '')
})
if(data.client_no !== ''){
studentEl.find('.will_update').text("Will update student information for "+data.name+'')
}
$('.student').last().after(studentEl)
}
});

A readonly textbox should be cleared on checkbox checked

<table>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>
<input type="text" class="textbox" value="Not Required" readonly=readonly />
</td>
<td>
<input type="checkbox" onclick="CheckCheckboxes1(this)"/>
</td>
</tr>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>
<input type="text" class="textbox" value="Not Required" readonly/>
</td>
<td>
<input type="checkbox" onclick="CheckCheckboxes1(this)" />
</td>
</tr>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>
<input type="text" class="textbox" value="Not Required" readonly/>
</td>
<td>
<input type="checkbox" onclick="CheckCheckboxes1(this)" />
</td>
</tr>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>
<input type="text" class="textbox" value="Not Required" readonly/>
</td>
<td>
<input type="checkbox" onclick="myFunction(this)" />
</td>
</tr>
</table>
I want to clear textbox when we corresponding checkboc is checked. Here is my Java script,
<script type="text/javascript" language="javascript">
function CheckCheckboxes1(chk){
if(chk.checked == true)
{
var txt = document.getElementById('TextBox1');
txt.value = "";
txt.disabled = false;
}
else
{
var txt = document.getElementById('TextBox1');
txt.value = "Enter Username";
txt.disabled = true;
}
}
</script>
Any idea?

In order to get the corresponding textbox, you can't get it by ID. Instead you should get the inputs parent table row and then find the input from there, so that it is relative to the checkbox.
Working demo
function CheckCheckboxes1(chk){
var txt = chk.parentNode.parentNode.cells[2].getElementsByTagName('input')[0];
if(chk.checked == true)
{
txt.value = "";
txt.readOnly = false;
}
else
{
txt.value = "Enter Username";
txt.readOnly = true;
}
}
Notes:
Use txt.readOnly not txt.disabled because disabled is something different.
Use the checkbox onchange event not onclick.

Hi in order to disable and enable you need to assign the id's to both checkbox and textboxs. please look at the below code.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" language="javascript">
function CheckCheckboxes1(chk){
if(chk.checked == true)
{
var txt = document.getElementById('TextBox'+chk.id);
txt.value = "";
txt.disabled = false;
}
else
{
var txt = document.getElementById('TextBox'+chk.id);
txt.value = "Enter Username";
txt.disabled = true;
}
}
</script>
</head>
<body>
<table>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>
<input type="text" id= "TextBox1" class="textbox" value="Not Required" readonly=readonly />
</td>
<td>
<input type="checkbox" id="1" onclick="CheckCheckboxes1(this)"/>
</td>
</tr>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>
<input type="text" id= "TextBox2" class="textbox" value="Not Required" readonly/>
</td>
<td>
<input type="checkbox" id="2" onclick="CheckCheckboxes1(this)" />
</td>
</tr>
<tr>`enter code here`
<td>Value1</td>
<td>Value2</td>
<td>
<input type="text" id= "TextBox3" class="textbox" value="Not Required" readonly/>
</td>
<td>
<input type="checkbox" id="3" onclick="CheckCheckboxes1(this)" />
</td>
</tr>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>
<input type="text" id= "TextBox4" class="textbox" value="Not Required" readonly/>
</td>
<td>
<input type="checkbox" id="4" onclick="myFunction(this)" />
</td>
</tr>
</table>
</body>
</html>

As #Adil said it is easier if you use jQuery. You can give your textbox an id and your checkbox a cutstom attribute e.g.:
<td>
<input type="text" id="txt_1" class="textbox" value="Not Required" readonly=readonly />
</td>
<td>
<input type="checkbox" specId="1" onclick="CheckCheckboxes1(this)"/>
</td>
function CheckCheckboxes1(chk){
var specId = $(chk).attr("specId");
var txt = $("#txt_"+specId);
if(chk.checked == true)
{
$(txt).val("");
$(txt).attr("disabled","disabled");
}
else
{
$(txt).val("Enter Username");
$(txt).removeAttr("disabled");
}
}
Hope it helps!

Calculating Subtotals for Category Sections Using Class Names

I'm working on a project that is based on an Excel spreadsheet, where I need to calculate budgets, etc. There are various categories in my table, and I need to calculate the subtotal of each category. Here's a screenshot to make it more clear:
http://i.imgur.com/loyLbW7.png
My problem is, I'm not sure how to calculate the subtoal for each category. Right now, I have $('.subcat100 .budget').each(function(). The class "subcat100" is attached to the tr and changes for each category section (subcat100, subcat200, subcat300, etc.). The numerical value is based off the sub category number stored in database. How would I pull all of these classes and iterate through them?
jQuery:
$(document).ready(function() {
$('input[name="txtQuantity[]"],input[name="txtUnitCost[]"]').change(function(e) {
var budget = 0;
var $row = $(this).parent().parent();
var quanity = $row.find('input[name="txtQuantity[]"]').val();
var unitcost = $row.find('input[name="txtUnitCost[]"]').val();
budget = parseFloat(quanity * unitcost);
var decimal = budget.toFixed(2);
$row.find('.budget').val(decimal);
var sum = 0;
$('.subcat100 .budget').each(function() {
var budgets = $(this).val();
console.log(budgets);
if (IsNumeric(budgets)) {
sum += parseFloat(budgets, 10);
}
});
$('.subcat100 .budgetsubtotal').val(sum);
});
function IsNumeric(input) {
return (input - 0) == input && input.length > 0;
}
});
HTML:
<table>
<tbody>
<tr class="subcat100">
<td>
<span name="txtItemCode[]"><strong>100</strong></span>
</td>
<td colspan="7">
<span name="txtSubCategoryName[]" class="100"><strong>Land Purchase Costs</strong></span>
</td>
</tr>
<tr class="subcat100">
<td>
<input type="text" name="txtSubItemCode[]" size="10" readonly="readonly" value="101">
</td>
<td>
<input type="text" name="txtItem[]" size="50" readonly="readonly" value="Purchase price">
</td>
<td>
<input type="text" name="txtUnit[]" size="10" value="">
</td>
<td>
<input type="text" name="txtQuantity[]" class="integer" size="10" value="1">
</td>
<td>
<input type="text" name="txtUnitCost[]" class="monetary" size="10" value="299.99">
</td>
<td>
<input type="text" name="txtBudget[]" class="monetary budget" size="10" readonly="readonly" value="299.99">
</td>
<td>
<input type="text" name="txtActual[]" class="monetary" size="10" value="249.99">
</td>
<td>
<input type="text" name="txtDifference[]" class="monetary difference" size="10" readonly="readonly" value="50.00">
</td>
</tr>
<tr class="subcat100">
<td>
<input type="text" name="txtSubItemCode[]" size="10" readonly="readonly" value="110">
</td>
<td>
<input type="text" name="txtItem[]" size="50" readonly="readonly" value="Realtor's fees">
</td>
<td>
<input type="text" name="txtUnit[]" size="10" value="">
</td>
<td>
<input type="text" name="txtQuantity[]" class="integer" size="10" value="">
</td>
<td>
<input type="text" name="txtUnitCost[]" class="monetary" size="10" value="">
</td>
<td>
<input type="text" name="txtBudget[]" class="monetary budget" size="10" readonly="readonly" value="">
</td>
<td>
<input type="text" name="txtActual[]" class="monetary" size="10" value="">
</td>
<td>
<input type="text" name="txtDifference[]" class="monetary difference" size="10" readonly="readonly" value="">
</td>
</tr>
<tr class="subcat100">
<td>
<input type="text" name="txtSubItemCode[]" size="10" readonly="readonly" value="120">
</td>
<td>
<input type="text" name="txtItem[]" size="50" readonly="readonly" value="Due diligence">
</td>
<td>
<input type="text" name="txtUnit[]" size="10" value="">
</td>
<td>
<input type="text" name="txtQuantity[]" class="integer" size="10" value="15">
</td>
<td>
<input type="text" name="txtUnitCost[]" class="monetary" size="10" value="45.00">
</td>
<td>
<input type="text" name="txtBudget[]" class="monetary budget" size="10" readonly="readonly" value="675.00">
</td>
<td>
<input type="text" name="txtActual[]" class="monetary" size="10" value="700.00">
</td>
<td>
<input type="text" name="txtDifference[]" class="monetary difference" size="10" readonly="readonly" value="-25.00">
</td>
</tr>
<tr class="subcat100">
<td colspan="5">
<span><strong>Subtotal</strong></span>
</td>
<td>
<input type="text" name="txtSubTotalBudget[]" class="budgetsubtotal" size="10" readonly="readonly" value="">
</td>
<td>
<input type="text" name="txtSubTotalActual[]" class="actualsubtotal" size="10" readonly="readonly" value="">
</td>
<td>
<input type="text" name="txtSubTotalDifference[]" class="differencesubtotal" size="10" readonly="readonly" value="">
</td>
</tr>
</tbody>
</table>

Well, I ended up doing this:
var itemcodes = <?php echo json_encode($arrItemCodes);?>;
$('input[name="txtQuantity[]"],input[name="txtUnitCost[]"]').change(function(e) {
var budget = 0;
var $row = $(this).parent().parent();
var quanity = $row.find('input[name="txtQuantity[]"]').val();
var unitcost = $row.find('input[name="txtUnitCost[]"]').val();
budget = parseFloat(quanity * unitcost);
$row.find('.budget').val(budget.toFixed(2));
$.each(itemcodes, function(intIndex, objValue) {
var sum = 0;
$('.subcat' + objValue + ' .budget').each(function() {
var budgets = $(this).val();
console.log(budgets);
if (IsNumeric(budgets)) {
sum += parseFloat(budgets, 10);
}
});
$('.subcat' + objValue + ' .budgetsubtotal').val(sum.toFixed(2));
});
});
Open to other suggestions!

Develop Reference

JavaScript is the programming language of the Web.

Disable only unwanted inputs Javascript - javascript

Related

how to disable the button based on result of javascript function

How to get Addition of multiple textbox's values in another single textbox using jQuery?

Changing form input to read only when elements reproduced

A readonly textbox should be cleared on checkbox checked

Calculating Subtotals for Category Sections Using Class Names

Categories

Resources