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.
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 have a page containing:
<div class="my_div">
<table>
<tr>
<th>Title 1</th><th>Title 2</th><th>Title 3</th>
</tr>
<tr>
<td><input type="input" name="set[1][arg1]" value="X"></td>
<td><input type="input" name="set[1][arg2]" value="Y"></td>
<td><input type="input" name="set[1][arg3]" value="Z"></td>
</tr>
<tr>
<td><input type="input" name="set[2][arg1]" value="X"></td>
<td><input type="input" name="set[2][arg2]" value="Y"></td>
<td><input type="input" name="set[2][arg3]" value="Z"></td>
</tr>
<tr>
<td><input type="input" name="set[3][arg1]" value="X"></td>
<td><input type="input" name="set[3][arg2]" value="Y"></td>
<td><input type="input" name="set[3][arg3]" value="Z"></td>
</tr>
</table>
Add another Set
</div>
<div class="my_div">
<table>
<tr>
<th>Title 1</th><th>Title 2</th><th>Title 3</th>
</tr>
<tr>
<td><input type="input" name="set[4][arg1]" value="X"></td>
<td><input type="input" name="set[4][arg2]" value="Y"></td>
<td><input type="input" name="set[4][arg3]" value="Z"></td>
</tr>
<tr>
<td><input type="input" name="set[5][arg1]" value="X"></td>
<td><input type="input" name="set[5][arg2]" value="Y"></td>
<td><input type="input" name="set[5][arg3]" value="Z"></td>
</tr>
<tr>
<td><input type="input" name="set[6][arg1]" value="X"></td>
<td><input type="input" name="set[6][arg2]" value="Y"></td>
<td><input type="input" name="set[6][arg3]" value="Z"></td>
</tr>
</table>
Add another Set
</div>
Two (or more) divs, containing a table each, plus n rows, each containing inputs. The inputs you already see are dynamically created from data in the db.
I would like to be able to just add a new <tr> when the link below any table is clicked. The catch being that the table which will recieve the new row is the one immediately above the link clicked.
I did think about giving each table a unique id which matches the id of the link but am unsure how in the jQuery to then recognise that a link with a random id has been clicked.
Then i thought maybe I could use the closest functionality and traverse backwards from the link to the table above it but I don't think that works. (maybe it does?)
Also, when I add the new row, it needs to be blank, which I think I could figure out, once I manage to clone the last (or any for that matter) row and append it to the end of the relevant table. E.g. new row:
<tr>
<td><input type="input" name="newSet[][arg1]" value=""></td>
<td><input type="input" name="newSet[][arg2]" value=""></td>
<td><input type="input" name="newSet[][arg3]" value=""></td>
</tr>
Hope it makes sense what I am asking.
Thanks in advance.
Jon
First, add a class addSet to your links and remove the id or make it unique. Repeated ids is not a valid markup. After doing this, I'd say this should work
$('.addSet').click(function(e) {
e.preventDefault();
var $table = $(this).prev();
var $row = $table.find('tr:last');
var $clonedRow = $row.clone();
$clonedRow.find('input').each(function(index) {
var $this = $(this);
$this.val('');
$this.prop('name','set[][arg' + (index + 1) + ']' );
})
$table.append($clonedRow);
});
DEMO
DEMO
As pointed out in the comments, please change id="addSet" to class="addSet" to get rid of duplicate ID's. Make a clone of the last row .... there should be at least one row in the table, otherwise this part will fail. Then fix the name and value of each input element in the clone. You can either change the current value with .val() or the default/initial value with .attr() or removeAttr('value').
Here is the code you need:
$(function() {
$(document).on('click', 'a.addSet', function(e) {
e.preventDefault();
var tr = $(this).closest('div.my_div').find('tr').last().clone();
tr.find('input').attr('name', function() {
return $(this).attr('name').replace(/set\[\d{1,}\]/g,'newSet[]');
})
.each(function() {
$(this).val('');
});
$(this).closest('div.my_div').find('table tbody').append( tr );
});
});
you can do it by adding a class to the link as id must be unique:
HTML:
<div class="my_div">
<table>
<tr>
<th>Title 1</th>
<th>Title 2</th>
<th>Title 3</th>
</tr>
<tr>
<td>
<input type="input" name="set[1][arg1]" value="X" />
</td>
<td>
<input type="input" name="set[1][arg2]" value="Y" />
</td>
<td>
<input type="input" name="set[1][arg3]" value="Z" />
</td>
</tr>
<tr>
<td>
<input type="input" name="set[2][arg1]" value="X" />
</td>
<td>
<input type="input" name="set[2][arg2]" value="Y" />
</td>
<td>
<input type="input" name="set[2][arg3]" value="Z" />
</td>
</tr>
<tr>
<td>
<input type="input" name="set[3][arg1]" value="X" />
</td>
<td>
<input type="input" name="set[3][arg2]" value="Y" />
</td>
<td>
<input type="input" name="set[3][arg3]" value="Z" />
</td>
</tr>
</table> Add another Set
</div>
<div class="my_div">
<table>
<tr>
<th>Title 1</th>
<th>Title 2</th>
<th>Title 3</th>
</tr>
<tr>
<td>
<input type="input" name="set[4][arg1]" value="X" />
</td>
<td>
<input type="input" name="set[4][arg2]" value="Y" />
</td>
<td>
<input type="input" name="set[4][arg3]" value="Z" />
</td>
</tr>
<tr>
<td>
<input type="input" name="set[5][arg1]" value="X" />
</td>
<td>
<input type="input" name="set[5][arg2]" value="Y" />
</td>
<td>
<input type="input" name="set[5][arg3]" value="Z" />
</td>
</tr>
<tr>
<td>
<input type="input" name="set[6][arg1]" value="X" />
</td>
<td>
<input type="input" name="set[6][arg2]" value="Y" />
</td>
<td>
<input type="input" name="set[6][arg3]" value="Z" />
</td>
</tr>
</table> Add another Set
</div>
JQUERY:
$(".addSet").click(function () {
$(this).prev("table").append('<tr><td><input type="input" name="newSet[][arg1]" value=""></td><td><input type="input" name="newSet[][arg2]" value=""></td><td><input type="input" name="newSet[][arg3]" value=""></td></tr>');
})
FIDDLE:
http://jsfiddle.net/kbxekrjc/
I am answering my own question because I used a combination of two of the other provided answers (#ClaudioRedi & #user3558931)
$('.addSet').click(function(e) {
e.preventDefault();
var $table = $(this).prev();
var $row = $table.find('tr:last');
var $clonedRow = $row.clone();
$clonedRow.find('input').attr('name', function() {
return $(this).attr('name').replace(/set\[\d{1,}\]/g,'newSet[]');
})
.each(function() {
$(this).val('');
});
$clonedRow.hide();
$table.append($clonedRow);
$clonedRow.show('slow');
});
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.
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
I have text boxes in HTML like:
<table id="tbl">
<tr>
<td><input type="text" name="t1[]"></td>
<td><input type="text" name="t2[]"></td>
<td><input type="text" name="t3[]"></td>
</tr>
<tr>
<td><input type="text" name="t1[]"></td>
<td><input type="text" name="t2[]"></td>
<td><input type="text" name="t3[]"></td>
</tr>
</table>
Now I want to fill the TextBoxes in first row with some value on onchange event of another textbox.
How should I do it?
The following answer by Rahul Fills all the textboxes with the same value but I want to only first 2 tds of first tr of given table with different values.
Please Help.
It would be better to use a js library like jQuery. In jQuery you can do like this.
$(function(){
$("yourtextboxselector").change(function(){
$("#tbl1 tr:first input:text").each ( function(){
$(this).val('new value');
});
});
});
<table id="tbl1">
<tr>
<td><input type="text" name="t1[]" /></td>
<td><input type="text" name="t2[]" /></td>
</tr>
<tr>
<td><input type="text" name="t1[]" /></td>
<td><input type="text" name="t2[]" /></td>
</tr>
<tr>
<td><input type="text" name="t1[]" /></td>
<td><input type="text" name="t2[]" /></td>
</tr>
</table>