I'm creating a script which has a form with some text fields that are going to be filled with numbers, there is a function that does some mathematical operations (simple)
The script works fine whenever I don't have to 'change' some parameter.... for instance, if on the first estimated row I write 2 and on adults# y put 4 then the estimated column changes to 8 (2*4). this is fine but is for some reason I change the 2 for a 3, the estimated column changes to 12 (3*4), but the last function, which adds every estimated column total into a big total field (estimated, on the upper part of the form)
How can I change the code to 'refresh' the big total whenever any field changes?
Thanks!!
<head>
<script>
// admissions
function adme1(){ document.formu.adm1tot.value=parseFloat(document.formu.adm1e.value)*parseFloat(document.form u.adm1cant.value);}
function adma1(){ document.formu.adm1tote.value=parseFloat(document.formu.adm1a.value)*parseFloat(document.for mu.adm1cant.value);}
function adme2(){ document.formu.adm2tot.value=parseFloat(document.formu.adm2e.value)*parseFloat(document.form u.adm2cant.value);}
function adma2(){ document.formu.adm2tote.value=parseFloat(document.formu.adm2a.value)*parseFloat(document.for mu.adm2cant.value);}
function adme3(){ document.formu.adm3tot.value=parseFloat(document.formu.adm3e.value)*parseFloat(document.form u.adm3cant.value);}
function adma3(){ document.formu.adm3tote.value=parseFloat(document.formu.adm3a.value)*parseFloat(document.for mu.adm3cant.value);}
//totales
function incomee(){ document.formu.totalestimated.value=parseFloat(document.formu.adm1tote.value)+parseFloat(doc ument.formu.adm2tote.value)+parseFloat(document.formu.adm3tote.value);}
</script>
</head>
<body>
<form method="POST" action="save.php" name="formu" >
<table border = "0" cellspacing="0" cellpadding="0" width="1100px">
<tr><td colspan="7" class="grisado">Event Budget for Group</td></tr>
<tr><td colspan="7"> Income</td></tr>
<tr><td colspan="5"> </td><td>Estimated</td><td>Actual</td></tr>
<tr><td colspan="5">Total Income</td>
<td><input style="text-align:right" type="text" name="totalactual" value="0" size = "3" readonly="readonly" onchange=""></td>
<td><input style="text-align:right" type="text" name="totalestimated" value="0" size = "3" readonly="readonly" onchange=""></td>
</tr>
<tr><td colspan="7"> </td><tr><td colspan="7">Admissions</td><tr><td>Estimated</td> <td>Actual</td><td> </td><td> </td><td> </td>
<td>Estimated</td>
<td>Actual</td>
<tr>
<td><input style="text-align:right" type="text" name="adm1e" value="0" size = "3" onchange="adme1();incomee();"></td>
<td><input style="text-align:right" type="text" name="adm1a" value="0" onchange="adma1();incomea();"></td>
<td> </td>
<td>Adults#</td>
<td><input style="text-align:right" type="text" name="adm1cant" value="0" onchange="adme1();adma1();incomee();incomea();"></td>
<td><input style="text-align:right" type="text" name="adm1tot" readonly="readonly" value="0" onchange="adma1();incomee();"></td>
<td><input style="text-align:right" type="text" name="adm1tote" readonly="readonly" value="0" onchange="adme1();incomea();"></td>
</tr>
</table>
</form>
</body>`
Many thanks in advance
Related
I'm creating a form where people can list a product but the website takes a listing fee once the item sells
I've got a JS Fiddle working but my fields are not showing the correct decimal points
So:
you put a number value in the price field
then the JS puts the price including tax (12,5%) into the next field
then shows you the 25% that the website owner will receive once sold
the shows the amount the seller will receive once item sells.
You can see what I've managed to get working in the below fiddle, but my JS is just so sloppy and I'm not sure how to get it to work exactly how I want.
Any assistance would be greatly appreciated
https://jsfiddle.net/Lq2cv4w9/1/
<form>
<table class="webform" cellspacing="0" cellpadding="2" border="0">
<tbody>
<tr>
<td><label for="CAT_Custom_2">Price</label><br />
<input type="text" maxlength="4000" onchange="output()" name="CAT_Custom_2" id="CAT_Custom_2" class="cat_textbox" /></td>
</tr>
<tr>
<td><label for="CAT_Custom_13">Price Including Tax's</label><br />
<input type="text" maxlength="4000" name="CAT_Custom_13" id="CAT_Custom_13" class="cat_textbox" /></td>
</tr>
<tr>
<td><label for="CAT_Custom_14">Cloudwine Commission 25%</label><br />
<input type="text" maxlength="4000" name="CAT_Custom_14" id="CAT_Custom_14" class="cat_textbox" /></td>
</tr>
<tr>
<td><label for="CAT_Custom_15">Seller Receives</label><br />
<input type="text" maxlength="4000" name="CAT_Custom_15" id="CAT_Custom_15" class="cat_textbox" /></td>
</tr>
<tr>
<td><label for="CAT_Custom_11">Listed Price</label><br />
<input type="text" maxlength="4000" name="CAT_Custom_11" id="CAT_Custom_11" class="cat_textbox" /></td>
</tr>
<tr>
<td><input class="cat_button" type="submit" value="Submit" id="catcustomcontentbutton" /></td>
</tr>
</tbody>
</table>
<script type="text/javascript" src="/CatalystScripts/ValidationFunctions.js?vs=b89.r513012-phase1"></script>
<script type="text/javascript">
function output() {
var value1 = document.getElementById('CAT_Custom_2').value;
document.getElementById('CAT_Custom_13').value = parseInt(value1) * (0.125) + parseInt(value1);
var value2 = document.getElementById('CAT_Custom_13').value;
document.getElementById('CAT_Custom_14').value = parseInt(value2) * (0.25);
var value3 = document.getElementById('CAT_Custom_14').value;
document.getElementById('CAT_Custom_15').value = parseInt(value2) - parseInt(value3);
document.getElementById('CAT_Custom_11').value = parseInt(value2);
}
</script>
</form>
I'm trying to use Javascript to set input fields to readonly, if they do not contain any value, i.e if they are null. this is my code, I'm not receiving any errors from the debugger, but it simply refuses to work, could someone
//checkScore();
function checkScore(){
document.getElementById('score_row1').readonly = true;
var scores = document.getElementsByClassName("score_holder");
var i;
for(i=0; i<scores.length; i++){
if(scores[i].value!=null){
scores[i].readonly="readonly";
}
}
}
<!doctype html>
<html>
<head>
</head>
<body onload="checkScore()">
<table align="center" cellpadding="3">
<tr valign="baseline">
<td colspan="3" align="center" id="course_row25" value="EDU-101"><strong>EDUCATION COURSES</strong></td>
</tr>
<tr>
<td align="right">
<input name="course_row1" type="text" id="course_row1" title="EDU-101: Historical Foundation of Education" value="EDU-101" size="5" readonly="readonly" />
</td>
<td> </td>
<td>
<input type="text" value="30" size="5" class="score_holder" />
</td>
</tr>
<tr>
<td align="right" id="course_row1" name="course_row1" value="EDU-101">
<input name="course_row1" type="text" id="course_row1" title="EDU-101: Historical Foundation of Education" value="EDU-101" size="5" readonly="readonly" />
</td>
<td> </td>
<td>
<input type="text" size="5" class="score_holder" />
</td>
</tr>
<tr>
<td align="right" id="course_row1" name="course_row1" value="EDU-101">
<input name="course_row1" type="text" id="course_row1" title="EDU-101: Historical Foundation of Education" value="EDU-101" size="5" readonly="readonly" />
</td>
<td> </td>
<td>
<input type="text" value="10" size="5" class="score_holder" />
</td>
</tr>
</table>
</body>
</html>
First, there is no element with the id score_row1 in your HTML, so your js will throw an error and fail.
Also the property is readOnly and not readonly
So this scores[i].readonly="readonly"; should be scores[i].readOnly="readonly";
Created a working demo here
The value of a text input will always be a string.
If nothing has been typed in it, then the value will be "". It will never be null.
I have an assignment where I should be validating forms both when the value of the form changes, as well as on submit. The functions themselves I have been allowed to obtain from the internet, provided I cite the source. My issue is that it's not working? I've tested it in a browser and am not getting corrected for anything, regardless of the amount of gibberish I provide. I thought I understood the concept, but it's just not working? Here is my code:
<form name="usercomments" method="post" action="cgi-bin/form-mail2.pl"
onsubmit="return validateForm();"strong text>
<table class="usercomments">
<tbody>
<tr>
<td><label for="realname">Name:</label></td>
<td><input id="realname" align="left" size="50" name="realname"
onchange="validateRealname(this, 'realnameguide');"></input></td>
<td id="realnameguide">Please use proper case when entering your name.</td>
</tr>
<tr>
<td><label for="email">Email:</label></td>
<td><input id="email" size="50" name="email" onchange="validateEmail(this, 'emailguide');"></input></td>
<td id="emailguide">Please use the format: ernest#craft.com</td>
</tr>
<tr>
<td><label for="message">Comments:</label></td>
<td><textarea id="message" name="message" rows="15" cols="50"
onchange="return validateForm(this, 'commentsguide');"></textarea></td>
<td id="commentsguide">Please provide your comments regarding the website
in the space provided below.</td>
</tr>
<tr>
<td><label for="rating">How would you rate this website?</label></td>
<td>
<p> 1=Fantastic!
2=It's Good!
3=It's Average.
4=It's Bad.
5=It's Terrible! </p>
<p style="word-spacing: 2.5em">
<input type="radio" value="1" name="rating"></input> 1
<input type="radio" value="2" name="rating"></input> 2
<input type="radio" value="3" name="rating"></input> 3
<input type="radio" value="4" name="rating"></input> 4
<input type="radio" value="5" name="rating"></input> 5
</p>
</td>
</tr>
<tr>
<td><label for="phone"> Phone Number:</label></td>
<td><input type="tel" name="phonenumber" id="phonenumber" onchange="return validatePhone(this, 'phoneinfo');">
</input></td>
<td id="phoneinfo">999-999-9999</td>
</tr>
<tr>
<td><label for="bday">Birthday:</label> </td>
<td><input id="bday" name="bday" onchange="return validateBday(this, 'bdayguide');"></input></td>
<td id="bdayguide">07/17/2014</td></tr>
<tr>
<td><input type="submit" value="Submit"></input></td>
</tr>
</tbody>
</table>
</form>
It looks as though you only have half of the assignment done at the moment. You will need to write the javascript functions you have reference, for example validateRealname.
You should do this in a separate javascript file and import it using <script> tags.
You also need to change the radio buttons from:
<input type="radio" value="1" name="rating"></input> 1
to:
<input type="radio" value="1" name="rating">1</input>
Once you've written those functions and imported them, you should be good to go.
Here is a tutorial i followed for reference: http://viralpatel.net/blogs/2009/07/sum-html-textbox-values-using-jquery-javascript.html
Here is my javascript....
<script type="text/javascript">
$(document).ready(function(){
//iterate through each textboxes and add keyup
//handler to trigger sum event
$(".txt").each(function() {
$("#btn").click(function(){
calculateSum();
$("#sum").show();
});
});
});
function calculateSum() {
var sum = 0;
//iterate through each textboxes and add the values
$(".txt").each(function() {
//add only if the value is number
if(!isNaN(this.value) && this.value.length!=0) {
sum += parseFloat(this.value);
}
});
//.toFixed() method will roundoff the final sum to 2 decimal places
$("#sum").html(sum.toFixed(2));
</script>
This is my html code to show the sum value..
<table width="1177" border="1" cellspacing="5" id="add" class="add">
<tr>
<td width="71" height="42"><button class="add">Add Rows</button></td>
<td width="144"><div align="center"><strong>Product Name</strong></div></td>
<td width="146"><div align="center"><strong>Brand Name</strong></div></td>
<td width="146"><div align="center"><strong>Model No</strong></div></td>
<td width="146"><div align="center"><strong>Dealer Price</strong> (DP)</div></td>
<td width="146"><div align="center"><strong>Quantity (Q)</strong></div></td>
<td width="146"><div align="center"> <strong>Total Price</strong> (TP) </div>
<div align="center">
(TP = DP x Q)
</div>
</td>
<td width="153"><div align="center"><strong>Quality</strong></div></td>
<td><div align="center"><strong>Insert Image</strong></div></td>
</tr>
<tbody>
<tr class="prototype">
<td height="26"><button class="remove">Remove</button></td>
<td><input type="text" name="product[]" id="product" /></td>
<td><input type="text" name="brand[]" id="brand" /></td>
<td><input type="text" name="model[]" id="model" /></td>
<td><input type="text" name="dprice[]" class="price"/></td>
<td><input type="text" name="quantity[]" class="quantity"/></td>
<td><input name="txt[]" type="text" class="txt" /></td>
<td><input type="text" name="quality[]" id="quality"/></td>
<td><input name="images[]" type="file"/></td>
</tr>
<tr>
<td height="26"><button class="remove">Remove</button></td>
<td><input type="text" name="product[]" id="product" /></td>
<td><input type="text" name="brand[]" id="brand" /></td>
<td><input type="text" name="model[]" id="model" /></td>
<td><input type="text" name="dprice[]" class="price"/></td>
<td><input type="text" name="quantity[]" class="quantity"/></td>
<td><input name="txt[]" type="text" class="txt" id="tp" /></td>
<td><input type="text" name="quality[]" id="quality"/></td>
<td><input name="images[]" type="file" id="image"/></td>
</tr>
<tr>
<td height="26"><button class="remove">Remove</button></td>
<td><input type="text" name="product[]" id="product" /></td>
<td><input type="text" name="brand[]" id="brand" /></td>
<td><input type="text" name="model[]" id="model" /></td>
<td><input type="text" name="dprice[]" class="price"/></td>
<td><input type="text" name="quantity[]" class="quantity"/></td>
<td><input name="txt[]" type="text" class="txt" id="tp" /></td>
<td><input type="text" name="quality[]" id="quality"/></td>
<td><input name="images[]" type="file" id="image"/></td>
</tr>
<tr>
<td height="26"><button class="remove">Remove</button></td>
<td><input type="text" name="product[]" id="product" /></td>
<td><input type="text" name="brand[]" id="brand" /></td>
<td><input type="text" name="model[]" id="model" /></td>
<td><input type="text" name="dprice[]" class="price"/></td>
<td><input type="text" name="quantity[]" class="quantity"/></td>
<td><input name="txt[]" type="text" class="txt" id="tp" /></td>
<td><input type="text" name="quality[]" id="quality"/></td>
<td><input name="images[]" type="file" id="image"/></td>
</tr>
</tbody>
</table>
</div>
<table width="1206" border="0">
<tr>
<td width="905"> </td>
<td width="86"><input name="btn" type="submit" id="btn" value="Grand Total" /></td>
<td width="201"><input name="sum" type="text" id="sum"/></td>
</tr>
How to show this sum value in textbox after button click.
Please help...
try this with val() method I have edited the answer..
<script>
$(document).ready(function () {
//iterate through each textboxes and add keyup
//handler to trigger sum event
$(".txt").each(function () {
$("#btn").click(function () {
calculateSum();
$("#sum").show();
});
});
});
function calculateSum() {
var sum = 0;
//iterate through each textboxes and add the values
$(".txt").each(function () {
//add only if the value is number
if (!isNaN(this.value) && this.value.length> 0) {
sum += parseFloat(this.value);
}
});
//.toFixed() method will roundoff the final sum to 2 decimal places
$("#sum").val(sum.toFixed(2));
}
</script>
here is the Fiddle
Okay, so I know this is the kind of answer that annoys people but...
Have you tried debuging javascript? It is possible to debug javascript code. For example using firebug: https://getfirebug.com/javascript . It might help.
Also, where are you assigning value of Sum to anything? Are you sure you did not want sum to be global variable (outside of any function)?
$('#idOfTextBox').val(sum.toFixed(2));
I have a table of selected products and I would like to use javascript to dynamically calculate certain values for the user without refreshing.
The user sees a number of fields: quantity input box (var t0), unit amount (var amt0), total amount (var ta0), unit weight (var weight0) and total weight (var tw0).
The following code works as I would like. The quantity input by the user is multiplied by the unit amount and set to total amount. The same is done for weight. The zeros refer to the FIRST appearance of a product. The issue is that we don't know how many products the user will select.
We can determine the number of products using arguments.length. My question is, how can I construct a loop to replace the 0 with perhaps the iteration variable i. We need to create the below script to correspond to the number of products selected.
//QTY FIELD
var qtyVal0 = t0.value;
//AMT FIELD
var amtVal0 = amt0.innerHTML;
ta0.value = qtyVal0 * amtVal0;
//WEIGHT FIELD
var weightVal0 = weight0.innerHTML;
tw0.value = qtyVal0 * weightVal0;
I tried using a 'for loop' and var ('qtyVal' + i) as well as var qtyVal + i. Plus every combination in between.
I also tried just duplicating the above working script a dozen times, but it unfortunately doesn't work when the number of duplications is different than the number of products.
Javascript is not my forte by any means, so any help (or a more efficient way to calculate) would be greatly appreciated. Thank you!
PS For all of my love and respect, I will also need to tackle the issue of adding all quantities, amounts, and weights in each of the three vertical columns. I'm not sure if this would affect the way that the calculations are designed. Once again, thank you!
UPDATE
Here is the HTML code for the form displayed to the user. I generate it in another php script and insert it into the page once the user selects from a list of products. It displays 3 products currently, but as mentioned, this can change to any number. Hopefully this is clearer. Do let me know. Cheers.
<table border="0" cellspacing="5" cellpadding="5">
<tbody>
<tr>
<td><!--PRODUCTS SELECTED WILL BE DISPLAYED HERE -->
<div id="txtHint">
<table id="products" width="1050" cellpadding="5" border="1">
<tbody>
<tr>
<th>QTY</th>
<th>Product</th>
<th>Unit Cost</th>
<th>Unit Measure</th>
<th>Amount</th>
<th>Total Amount</th>
<th>Weight</th>
<th>Total Weight</th>
<th>LBS / KGS</th>
<th>Rec D</th>
<th>Rec Q</th>
<th>Status</th>
</tr>
<tr>
<td><input name="t0" id="t0" type="text" onkeyup="return autocalc(this,t1,t2)" size="5" maxlength="5" tabindex="$i"></td>
<td>Catalogue</td>
<td>$150</td>
<td>Each</td>
<td><span id="amt0">10</span></td>
<td><input name="ta0" id="ta0" type="text" readonly="readonly" value="10" size="5" maxlength="5" tabindex="-1"></td>
<td><span id="weight0">101</span></td>
<td><input name="tw0" id="tw0" type="text" readonly="readonly" value="101" size="5" maxlength="5" tabindex="-1"></td>
<td>LBS</td>
<td>REC D</td>
<td>REC Q</td>
<td>STATUS</td>
</tr>
<tr>
<td><input name="t1" id="t1" type="text" onkeyup="return autocalc(this,t0,t2)" size="5" maxlength="5" tabindex="$i"></td>
<td>Product2</td>
<td>$18</td>
<td>Each</td>
<td><span id="amt1">15</span></td>
<td><input name="ta1" id="ta1" type="text" readonly="readonly" value="15" size="5" maxlength="5" tabindex="-1"></td>
<td><span id="weight1">50</span></td>
<td><input name="tw1" id="tw1" type="text" readonly="readonly" value="50" size="5" maxlength="5" tabindex="-1"></td>
<td>LBS</td>
<td>REC D</td>
<td>REC Q</td>
<td>STATUS</td>
</tr>
<tr>
<td><input name="t2" id="t2" type="text" onkeyup="return autocalc(this,t0,t1)" size="5" maxlength="5" tabindex="$i"></td>
<td>Product3</td>
<td>$236</td>
<td>Each</td>
<td><span id="amt2">1</span></td>
<td><input name="ta2" id="ta2" type="text" readonly="readonly" value="1" size="5" maxlength="5" tabindex="-1"></td>
<td><span id="weight2">50</span></td>
<td><input name="tw2" id="tw2" type="text" readonly="readonly" value="50" size="5" maxlength="5" tabindex="-1"></td>
<td>LBS</td>
<td>REC D</td>
<td>REC Q</td>
<td>STATUS</td>
</tr>
<tr>
<td><input name="total" type="text" readonly="readonly" value="0" size="5" maxlength="5" tabindex="-1"></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td><input name="totalAmount" type="text" readonly="readonly" value="0" size="5" maxlength="5" tabindex="-1"></td>
<td> </td>
<td><input name="totalWeight" type="text" readonly="readonly" value="0" size="5" maxlength="5" tabindex="-1"></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
</div></td>
</tr>
<tr>
<td><input type="submit" id="submitbtn" name="submit" value="Save Changes">
<input type="hidden" name="action" value="create_po"></td>
</tr>
<tr>
<td></td>
</tr>
</tbody>
</table>
If you're dead-set on calculating this from the HTML/DOM itself, you'll need to iterate over the appropriate table rows (consider using jQuery, you'll be glad), pull out the data in question from (what, table cells?), convert it to numbers, and do the math as normal.
There are a number of ways to do this, but it depends a lot on the HTML you're pulling the data from.