Jump to content

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

Edited by Xaotique

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

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.

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?

  • 1 month later...

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

Edited by lingo5

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.

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • 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.