Jump to content


Photo

Please Help With Js Calculation


  • Please log in to reply
39 replies to this topic

#21 Xaotique

Xaotique

    Advanced Member

  • Members
  • PipPipPip
  • 558 posts
  • LocationPennsylvania, United States
  • Age:21

Posted 04 December 2012 - 04:41 PM

I'm not going to give you one you can copy and paste though.
Demo: http://xaotique.no-ip.org/tmp/24/

HTML
<input type="button" id="add" value="Add Row" />
<div id="container" style="margin-top: 5px;"></div>

Just a button and container for our rows.

Javascript / jQuery
// 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('<input type="text" class="num" style="width: 100px;" /> <input type="text" class="num" style="width: 100px;" /> <span class="result"></span>');
        
        // 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());
    });
});


#22 lingo5

lingo5

    Advanced Member

  • Members
  • PipPipPip
  • 394 posts
  • LocationSpain
  • Age:20

Posted 04 December 2012 - 04:46 PM

cool thanks a lot !!!!
Will play with it tomorrow cause i'm in Spain and it's quite late here.
Stay tuned :happy-04:

#23 Xaotique

Xaotique

    Advanced Member

  • Members
  • PipPipPip
  • 558 posts
  • LocationPennsylvania, United States
  • Age:21

Posted 04 December 2012 - 04:53 PM

Alright, have fun. Goodnight (:

#24 lingo5

lingo5

    Advanced Member

  • Members
  • PipPipPip
  • 394 posts
  • LocationSpain
  • Age:20

Posted 05 December 2012 - 02:54 PM

Hi xaotique,
check this out http://www.redbook.e...rator/test2.php
it's a bit messy but I think i got it!!!
how can I insert a nice table like the one in my previous script? http://www.redbook.e...tor/index-2.php
Thanks i'm so excited !!!

#25 lingo5

lingo5

    Advanced Member

  • Members
  • PipPipPip
  • 394 posts
  • LocationSpain
  • Age:20

Posted 05 December 2012 - 03:35 PM

hi again,
this is my html
<!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>

and this is my js
// 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">&euro;</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> &euro;</span><td bgcolor="#F8F8F8"><input type="button" id="remove" value="Remove Row" /> </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).remove("div");
   
   });
  });

I can't get the remove button to remove a row....what is wrong?

thanks

#26 Xaotique

Xaotique

    Advanced Member

  • Members
  • PipPipPip
  • 558 posts
  • LocationPennsylvania, United States
  • Age:21

Posted 05 December 2012 - 04:57 PM

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();

Edited by Xaotique, 05 December 2012 - 04:58 PM.


#27 lingo5

lingo5

    Advanced Member

  • Members
  • PipPipPip
  • 394 posts
  • LocationSpain
  • Age:20

Posted 06 December 2012 - 09:03 AM

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

http://www.redbook.e...rator/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">&euro;</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> &euro;</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();
});
});


#28 Xaotique

Xaotique

    Advanced Member

  • Members
  • PipPipPip
  • 558 posts
  • LocationPennsylvania, United States
  • Age:21

Posted 06 December 2012 - 11:01 AM

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.

#29 lingo5

lingo5

    Advanced Member

  • Members
  • PipPipPip
  • 394 posts
  • LocationSpain
  • Age:20

Posted 06 December 2012 - 12:15 PM

Thanks !!!!!....it work now.
http://www.redbook.e...rator/test2.php
I'm gonna play with this a bit more cause I want to make it look pretty and want to add more calculations to it...
please don't go far !!!!... :happy-04:

#30 lingo5

lingo5

    Advanced Member

  • Members
  • PipPipPip
  • 394 posts
  • LocationSpain
  • Age:20

Posted 06 December 2012 - 02:24 PM

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

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


#31 Xaotique

Xaotique

    Advanced Member

  • Members
  • PipPipPip
  • 558 posts
  • LocationPennsylvania, United States
  • Age:21

Posted 06 December 2012 - 03:02 PM

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

#32 lingo5

lingo5

    Advanced Member

  • Members
  • PipPipPip
  • 394 posts
  • LocationSpain
  • Age:20

Posted 06 December 2012 - 03:06 PM

sorry,
this is the html for the resulting calculation
<span id="result"></span> <span class="blackTXT"><span class="result"></span> &euro;</span>

and this is the js
// Show totaldiv.find(".result").html(total);});

how do I show 0 by default?

#33 Xaotique

Xaotique

    Advanced Member

  • Members
  • PipPipPip
  • 558 posts
  • LocationPennsylvania, United States
  • Age:21

Posted 06 December 2012 - 03:08 PM

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>

#34 lingo5

lingo5

    Advanced Member

  • Members
  • PipPipPip
  • 394 posts
  • LocationSpain
  • Age:20

Posted 06 December 2012 - 03:21 PM

thankssssssssssssssss.........
http://www.redbook.e...rator/test2.php

#35 Christian F.

Christian F.

    Advanced Member

  • Staff Alumni
  • 3,106 posts
  • LocationNorway

Posted 06 December 2012 - 03:47 PM

Yeah... I was way too late on this one. :(

Edited by Christian F., 06 December 2012 - 03:48 PM.

Keeping it simple.

#36 lingo5

lingo5

    Advanced Member

  • Members
  • PipPipPip
  • 394 posts
  • LocationSpain
  • Age:20

Posted 06 December 2012 - 03:52 PM

thanks anyways Christian..... :happy-04:

#37 Christian F.

Christian F.

    Advanced Member

  • Staff Alumni
  • 3,106 posts
  • LocationNorway

Posted 06 December 2012 - 04:09 PM

Hehe. You're very much welcome, even though I didn't help much. :)
* Christian tips his hat
Keeping it simple.

#38 lingo5

lingo5

    Advanced Member

  • Members
  • PipPipPip
  • 394 posts
  • LocationSpain
  • Age:20

Posted 23 January 2013 - 01:52 PM

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> &euro;</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

Edited by lingo5, 23 January 2013 - 01:53 PM.


#39 Christian F.

Christian F.

    Advanced Member

  • Staff Alumni
  • 3,106 posts
  • LocationNorway

Posted 23 January 2013 - 02:36 PM

There are two methods to accomplish this:
  • 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. ;)
  • 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.
Keeping it simple.

#40 lingo5

lingo5

    Advanced Member

  • Members
  • PipPipPip
  • 394 posts
  • LocationSpain
  • Age:20

Posted 23 January 2013 - 02:45 PM

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




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Cheap Linux VPS from $5
SSD Storage, 30 day Guarantee
1 TB of BW, 100% Network Uptime

AlphaBit.com