Add content of each div to textbox
I have a list of divs created on the server side, each with a price, quantity (user input) and name. I was able to use jQuery to calculate the total and add them.
Now I would like to give the name, quantity and total of each item having a value in my textbox for each line.
So far I have the following (part of the application of which is currently not working):
$(document).ready(function () {
$(".product-row input").change(multInputs);
function multInputs() {
var mult = 0;
// for each row:
$("div.product-row").each(function () {
// get the values from this row:
var $price = $('.price', this).html();
var $quantity = $('.quantity', this).val();
var $total = ($price * 1) * ($quantity * 1);
// set total for the row
$('.multTotal',this).text($total);
mult += $total;
$('#textarea',this).append($name).append($total);
});
$("#total").html(mult);
}
});
If I can work it out, I'm sure I can work out how to add a grand total and clear the text box every time something changes (I'm not looking for someone to do all the work).
Any feedback on why my text ad isn't filling would be much appreciated.
Edit: The solution, really well explained below with braks, resulted in the following (working!) Code:
$(document).ready(function () {
$(".product-row input").change(multInputs);
function multInputs() {
var mult = 0;
// for each row:
$("div.product-row").each(function () {
// get the values from this row:
var price = $('.price', this).html();
var quantity = $('.quantity', this).val();
var name = $('.name', this).html();
var total = (price * 1) * (quantity * 1);
// set total for the row
$('.multTotal',this).text(total);
mult += total;
$('#textarea').val($('#textarea').val() + ' ' + name + ' ' + total);
});
$("#total").html(mult);
}
});
source to share
$ (textarea) .append (txt) doesn't work as you think. When the page loads, the text nodes inside the text box set the value of that form box. After that, text nodes and value can be disabled. As you type in a field, the value changes, but the text nodes inside it on the DOM don't. Then you change the text nodes with append () and the browser erases the value as it knows the text nodes inside the tag have changed.
So, you want to set a value that you don't want to add. To do this, use the jQuery val () method.
You should use something like $('#textarea').val($('#textarea').val() + ' ' + $name + ' ' + $total);
Also, I'm not sure why you are inserting $ in your variables, mixing with PHP?
source to share