Search jQuery

jQuery Forum

Adding newdiv's qty form to total

in Using jQuery • 11 years ago

Hey All!

So I am pretty new to jquery. I am trying to create a Order Form that autocalcs OnKeyUp. I have that part done but now my issue is; when a person clicks on the "+add additional products" it creates a new div and does not allow it to autocalc in the total.... If I add the code to the other forms before that div is created it will not calculate at all. I need all the forms to calculate OnKeyUp.

a little snippet of main part of the form:

<table cellspacing="0" cellpadding="4">
<tr>
<td align="right" style="padding-right:10px;text-align:right;text-align:left;" width="390" ><strong>APS</strong> - Adhesive Primer Sealer </td><td align="center" width="155" style="text-align:center;padding-right:31px;"><input name="t1" type="text" onKeyUp="return autocalc(this,t2,t3,t4,t5,t6,t7,t8,t9,t10,t11,t12,t13,t14,t15,t16,t17,t18,t19,t20,t21,t22,t23,t24,t25,t26,t27,t28,t29,t30,t31,t32,t33,t34,t35,t36,t37,t38,t39,t40,t41,t42,t43,t44,t45,t46,t47)" tabindex="1" class="textInput"></td>
<td width="153"> </td>
<td width="168" >
</td>
</tr><tr>
<td align="right" style="padding-right:10px;text-align:left;"><strong>CMC</strong> - Ceramic Mid Coat </td><td align="center" style="text-align:center;padding-right:31px;"><input name="t2" type="text" onKeyUp="return autocalc(this,t1,t3,t4,t5,t6,t7,t8,t9,t10,t11,t12,t13,t14,t15,t16,t17,t18,t19,t20,t21,t22,t23,t24,t25,t26,t27,t28,t29,t30,t31,t32,t33,t34,t35,t36,t37,t38,t39,t40,t41,t42,t43,t44,t45,t46,t47)" tabindex="2"></td>
<td width="153"> </td>
<td width="168" >
</td>
</tr>

The area im having an issue with:

<table width="100%" border="0" cellspacing="0" cellpadding="4">
<tr>
<td>
<em style="color:red;"> (*In addition to untinted buckets ordered above-i.e. do not repeat quantity. Include Cool Colors here*)</em>
<div id="dynamicInput" style="margin-left:20px;">
<strong>Factory Tinted Product: </strong>
<input type="text" name="TintedInputs[]" id="tintedproduct" style="width:100px;">
<strong>Color Choice: </strong>
<input type="text" name="TintedInputscc[]" id="tintedproductcc" style="width:100px;"> <strong> QTY: </strong><input name="t47" type="text" id="t47" onKeyUp="return autocalc(this,t1,t2,t3,t4,t5,t6,t7,t8,t9,t10,t11,t12,t13,t14,t15,t16,t17,t18,t19,t20,t21,t22,t23,t24,t25,t26,t27,t28,t29,t30,t31,t32,t33,t34,t35,t36,t37,t38,t39,t40,t41,t42,t43,t44,t45,t46)" tabindex="39" width="100px">
</div>
<p onClick="addInput('dynamicInput');">+ additional factory tinted product</p>
</td>
</tr>
</table>

The Total area:

<table width="100%" border="0" cellspacing="0" cellpadding="4">
<tr>
<td width="391" align="right" style="padding-right:10px;text-align:right;"><strong style="color:red;">Total Buckets:</strong></td><td width="84" align="Left"><input name="total" id="total" type="text" readonly="readonly" value="0" tabindex="-1"></td>
<td width="100" align="right" style="padding-right:10px;text-align:right;">
<strong style="color:red;">Total Pallets:</strong> </td>
<td width="293" align="left" >
<input name="pallets" id="pallets" type="text" readonly="readonly" value="0" tabindex="-1">
</td>
</tr>
</table>

and of course the script:

<script type="text/javascript" language="javascript">
function autocalc(oText)
{
if (isNaN(oText.value)) //filter input
{
alert('Numbers only!');
oText.value = '';
}
var field, val, oForm = oText.form, total = d = 0;
for (d; d < arguments.length; ++d) //loop
{
field = arguments[d];
val = parseFloat(field.value); //get value
if (!isNaN(val)) //is it a number?
{
total += val; //calculate
}
}
oForm.total.value = total; //Total
//pallets Total
oForm.pallets.value = Math.ceil(total/36);
}
var tplus = 47;
tplus = tplus +1;
var tplusid = 47;
tplusid = tplusid +1;
var counter = 1;
var limit = 20;
function addInput(divName){
if (counter == limit) {
alert("You have reached the limit of adding " + counter + " products");
}
else {
var newdiv = document.createElement('div');
newdiv.innerHTML = "<strong>Factory Tinted Product: </strong><input type='text' name='TintedInputs[]' id='tintedproduct' style='width:100px;'> <strong>Color Choice: </strong><input type='text' name='TintedInputscc[]' id='tintedproductcc' style='width:100px;'> <strong> QTY: </strong><input type='text' id='t" + tplusid++ + "' name='t" + tplus++ + "' width='100px'>";
document.getElementById(divName).appendChild(newdiv);
counter++;
}
}

Replies(12)

kmiklas

Re: Adding newdiv's qty form to total

11 years ago

Hard to help you without a link on this one... I find the description to be very confusing. Nonetheless, here are a couple of problems that jump out at me:

First, the jQuery way of binding an event is to use on() for jQuery 1.7 (bind() or delegate() for jQuery 1.6 and below). The onKeyUp inline function call method would be considered poor technique even with plain old JavaScript, and even more so in the jQuery world. Second, what is this t1, t2, t3, ... business? Better to create a wrapped set of all the input boxes, put them in a variable, and sum them with .each();

Something like this:

$(".textInput").on(
'keyup',
function ( e ) {
var $inputBoxes = $('.textInput');
calculateSum($inputBoxes);
}
);

Here, every keyup on an input box with class .textInput would create a wrapped set of all the elements with class .textInput (basically all the input boxes). It would then pass this wrapped set to calculateSum(). You'd then use .each() to loop through all these objects, reference the value attribute, and calculate the total.

Hope this helps.

jakecigar

Re: Adding newdiv's qty form to total

11 years ago

To make it work, remove your onkeyup code, make sure all the text inputs have class="textInput".

Then this generalized script will do your autocalc.

$('.textInput').live('keyup',function autocalc(){
if(isNaN($(this).val())){
alert('Numbers only!');
$(this).val('');
} else {
var total=0;
$('.textInput').each(function(){
var val=$(this).val()
if (val && !isNaN(val))
total+=+val
})
if (!isNaN(total)){
oForm.total.value = total;
oForm.pallets.value = Math.ceil(total / 36);
}else{
oForm.total.value = '';
oForm.pallets.value = '';
}
}
})

JΛ̊KE

drakemadi..

Re: Adding newdiv's qty form to total

11 years ago

The link is: http://revivelab.com/RhinoShield/order_total2.php

and my problem is down just above the total buckets and pallets in the " Factory Tinted Product: " section.

I need the qty of the "Factory Tinted Product" to add to the total. The first one does. but when you click :

" + additional factory tinted product " it does not add the new fields that show up.... That is my problem

Drake

Web Developer and Designer

jakecigar

Re: Adding newdiv's qty form to total

11 years ago

The new QTY fields must have class= textInput. Or you could start using a more descriptive name like quantity.

JΛ̊KE

revivedra..

Re: Adding newdiv's qty form to total

11 years ago

So I have made the changes... I made the class's as class="addForm"

But the forms do not add up and put into the total.... What is wrong?

site: http://revivelab.com/RhinoShield/order_total3.php

<script type="text/javascript" language="javascript">
$('.addForm').live('keyup',function autocalc(){
if(isNaN($(this).val())){
alert('Numbers only!');
$(this).val('');
} else {
var total=0;
$('.addForm').each(function(){
var val=$(this).val()
if (val && !isNaN(val))
total+=+val
})
if (!isNaN(total)){
oForm.total.value = total;
oForm.pallets.value = Math.ceil(total / 36);
}else{
oForm.total.value = '';
oForm.pallets.value = '';
}
}
})

jakecigar

Re: Adding newdiv's qty form to total

11 years ago

line 5 of your post needs to be.

var oForm=$('form')[0]

It was not declared.

JΛ̊KE

revivedra..

Re: Adding newdiv's qty form to total

11 years ago

Yah that still didnt work sir. Im trying to debug it at the same time. But I can't seem to figure out what it is that is breaking the code.

jakecigar

Re: Adding newdiv's qty form to total

11 years ago

I loaded the page, entered that line in the web inspector and it all added up. Try again.

JΛ̊KE

revivedra..

Re: Adding newdiv's qty form to total

11 years ago

<script type="text/javascript" language="javascript">
var oForm=$('form')[0]
$('.addForm').live('keyup',function autocalc(){
if(isNaN($(this).val())){
alert('Numbers only!');
$(this).val('');
} else {
var total=0;
$('.addForm').each(function(){
var val=$(this).val()
if (val && !isNaN(val))
total+=+val
})
if (!isNaN(total)){
oForm.total.value = total;
oForm.pallets.value = Math.ceil(total / 36);
}else{
oForm.total.value = '';
oForm.pallets.value = '';
}
}
})

When I added that line and uploaded it did not work for me. If you view the source of http://revivelab.com/RhinoShield/order_total3.php you can see the code is in there on line 48

jakecigar