Jump to content

Archived

This topic is now archived and is closed to further replies.

lingo5

Please Help With Js Calculation

Recommended Posts

Just add your CSS and classes back to get the style.

You can't use an ID like that multiple times. Use a class instead.

After you click the remove, the button's parent is the TD, and the TD's parent is the TR.

$(this).parent().parent().remove();

Share this post


Link to post
Share on other sites

sorry Xaotique....my remove button still not working.... :confused:

 

http://www.redbook.es/facturator/test2.php

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="../js/calculator2.js"></script>
</head>
<body>
<input type="button" id="add" value="Add Row" />
<div id="container" style="margin-top: 5px;"></div>
</body>
</html>

 

// Let page load
$(document).ready(function()
{
// Add new row when button is clicked
$("#add").click(function()
{
// Create the div (new row) and add its elements
var div = $(document.createElement("div")).html('<table width="901" align="center"><tr class="prototype"><form name="form" ><td bgcolor="#F8F8F8"<input type="ee" class="id" value="<?php echo $referencia?>" size="10" /></td><td bgcolor="#F8F8F8"><input type="text" id="descripcion[]" size="40" /></td><td bgcolor="#F8F8F8"><input type="text" class="num" style="width: 100px;"/></td><td nowrap bgcolor="#F8F8F8"><input type="text" class="num" style="width: 100px;"/><span class="blackTXT">€</span></td><td bgcolor="#F8F8F8"><span class="blackTXT">21%</span><td nowrap bgcolor="#F8F8F8"><span id="result"></span> <span class="blackTXT"><span class="result"></span> €</span><td bgcolor="#F8F8F8"><input type="button" class="remove" value="Remove" /> </form></tr></table> ');
// Add div to the page
$("#container").append(div);
// When we type into text area
div.find(".num").keyup(function()
{
// Starting total
var total = 1;
// Cycle the values and multiply the parsed number
div.find(".num").each(function(i, elmn)
{
total *= Number(elmn.value);
});
// Show total
div.find(".result").html(total);
});
// Trigger keyup when value changes (right-click paste wouldn't be typing)
div.find(".num").change($(this).keyup());
});
// Remove button functionality
$(".remove").click(function() {
$(this).parent().parent().remove();
});
});

Share this post


Link to post
Share on other sites

You have to do it when you create the button.

So you would have something like this after you append the row.

 

div.find(".remove").click(function()
{
   div.remove();
});

 

Also, you don't actually need a div for each new row, as well as a table you don't need, just a table row. Create a TR element instead of a DIV and just make the HTML the TD's. It would make more sense. Then just append that to the table.

Share this post


Link to post
Share on other sites

Xaotique,

how can I display an initial value of zero for the result?

 

// Show total
div.find(".result").html(total);
});

Share this post


Link to post
Share on other sites

You would just set the HTML to 0? Or are you asking something else?

Share this post


Link to post
Share on other sites

sorry,

this is the html for the resulting calculation

<span id="result"></span> <span class="blackTXT"><span class="result"></span> €</span>

 

and this is the js

// Show totaldiv.find(".result").html(total);});

 

how do I show 0 by default?

Share this post


Link to post
Share on other sites

All you're doing is changing what's inside of the SPAN with class result. So, when you set the HTML, which you're doing with a string, just put a 0 in there.

 

<span class="result">0</span>

Share this post


Link to post
Share on other sites

Hehe. You're very much welcome, even though I didn't help much. :)

* Christian tips his hat

Share this post


Link to post
Share on other sites

Hi, I am back to this project now after a few weeks of exams.

Is it possible to insert php code within js?....the thing is I need to insert a dynamic select to display the products in my DB in the table div like so

 

// Create the div (new row) and add its elementsvar
div = $(document.createElement("div")).html('<table width="901" align="center"><tr class="prototype"><form name="form" ><td bgcolor="#F8F8F8"<input var var div = $(document.createElement("div")).html('<table width="890" border="0" align="center" cellpadding="5" cellspacing="1"><tr><td width="57" align="center" bgcolor="#CCCCCC"><input type="text" class="id" size="3" readonly="readonly" /></td><td width="385" align="center" bgcolor="#CCCCCC" class="headerTXT"><select name="producto" id="producto"></select></td><td width="82" align="center" bgcolor="#CCCCCC" class="headerTXT"><input type="text" class="num" style="width: 30px;" value="0"/></td><td width="74" align="center" bgcolor="#CCCCCC" class="headerTXT"><input type="text" class="num" style="width: 50px;" value="0"/> <span class="blackTXT">\u20AC </span></td><td width="72" align="center" bgcolor="#CCCCCC" class="headerTXT"><span class="blackTXT">21%</span></td><td width="80" align="center" bgcolor="#CCCCCC" class="headerTXT"><span id="result"></span> <span class="blackTXT"><span class="result">0</span> €</span></td><td width="70" align="center" bgcolor="#CCCCCC"><input type="button" style="width:70px;height:25px" class="remove" value="Remove" /></td></tr></table>');

 

How would I call the connection and insert the php code in the js script?

 

TY

Share this post


Link to post
Share on other sites

There are two methods to accomplish this:

  1. By preparing the content ahead of time, and echoing out inside a JS variable when you create the page. PHP doesn't care what the output is, as it's all just text for all it cares. It's the browser that deals with the interpretation after it has received the content, after all. ;)
  2. Using AJAX to communicate back with a PHP script, have it create the content, and then insert it into the DOM using the same methods as above.

 

For the second method there are a lot of guides available online, and it is generally recommended to use jQuery (or similar frameworks) to make the whole process easier.

 

PS: Please ensure that you're using newlines, and proper indentation, in your code. Makes it a whole lot easier for others, and yourself, to read it.

Thank you.

Share this post


Link to post
Share on other sites

Thanks Chrsitian F....doing some research on the nr. 2 method now. :happy-04:

Share this post


Link to post
Share on other sites

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.