PDA

Click to See Complete Forum and Search --> : Adding onclick event to button generated dinamically

Adrian
08-09-2004, 06:12 PM
What I'm trying to do is to create some form fields and some buttons,and apply to them the onclick event to invoke a function.
The adding of the form fields is working properly, but I couldn't add the onclick event to them. This is what I'm trying to do:
When clicking the choose button, a window opens and the user select a link, wich passes to the opener window 3 variables that will be displayed in the proper textboxes. The user inputs a value into another textbox, and the other button calculates the total price of that order.
If he wishes to continue the order, he clicks on a button to add a new line to the table, wich is exactly the same line as the first one.
So far, I've got it, but the buttons created doesn't have any
events to trigger a function.
I need to apply an onclick event to all the generated buttons, so that they can open the same window as the first button, an pass the variables to the correct line of the table, in the proper textboxes, that are created with an unique id, and the button to calculate should get the values from it's line of the table.
Can anybody help me out ?
Here's the code I've got so far for the main page:


<HTML>
<HEAD>
<style>
.buttao {
color: #fff;
background-color: #000;
}
</style>
<script>
var newWin2=null;
function doIt()
{
newWin2=window.open("choose.html","","left=0,top=0,location=0,scrollbars=1,menubar=0,toolbar=0,status=0,resizable=1,directories=0,width=" + screen.width + ",height=" + screen.height);
}
function catchIt(_x,_y,_z)
{
if (document.all)
document.form.no.value=_x;
document.form.name.value=_y;
document.form.prc.value=_z;
document.form.quant.focus();
}
</script>
<script>
function calcula() {
var value1 = document.form.prc.value;
var value2 = document.form.quant.value;
var totalizado = value1*value2;
document.form.total.value = totalizado;
}
</script>
<SCRIPT language="javascript">

counter = 1

function addRow(id){
var tbody = document.getElementById(id).getElementsByTagName("TBODY")[0];
var row = document.createElement("TR");
row.setAttribute("id","tr"+counter);

var td1 = document.createElement("TD");
var input1 = document.createElement("INPUT");
input1.setAttribute("type","text");
input1.setAttribute("name","no");
input1.setAttribute("value","no"+counter);
input1.setAttribute("size","2");
input1.setAttribute("id","no"+counter);
td1.appendChild(input1);

var td2 = document.createElement("TD");
var input2 = document.createElement("INPUT");
input2.setAttribute("type","text");
input2.setAttribute("name","name");
input2.setAttribute("id","name"+counter);
td2.appendChild(input2);

var td3 = document.createElement("TD");
var input3 = document.createElement("INPUT");
input3.setAttribute("type","text");
input3.setAttribute("name","prc");
input3.setAttribute("id","prc"+counter);
td3.appendChild(input3);

var td4 = document.createElement("TD");
var input4 = document.createElement("INPUT");
input4.setAttribute("type","text");
input4.setAttribute("name","quant");
input4.setAttribute("id","quant"+counter);
td4.appendChild(input4);

var td5 = document.createElement("TD");
var input5 = document.createElement("INPUT");
input5.setAttribute("type","text");
input5.setAttribute("name","total");
input5.setAttribute("id","total"+counter);
td5.appendChild(input5);

var td6 = document.createElement("TD");
var input6 = document.createElement("INPUT");
input6.setAttribute("type","button");
input6.setAttribute("name","esc");
input6.setAttribute("value","choose");
input6.setAttribute("id","esc"+counter);
input6.className = "buttao";
td6.appendChild(input6);

var td7 = document.createElement("TD");
var input7 = document.createElement("INPUT");
input7.setAttribute("type","button");
input7.setAttribute("name","calc");
input7.setAttribute("value","Calculate");
input7.setAttribute("id","calc"+counter);
input7.className = "buttao";
td7.appendChild(input7);

row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);
row.appendChild(td4);
row.appendChild(td5);
row.appendChild(td6);
row.appendChild(td7);
tbody.appendChild(row);

counter++;

}
</SCRIPT>
</HEAD>
<body>
<form name="form" id="form" action="cadastro.asp" method="post">
<table border="1" bordercolor="black">
<tr>
<td width="620" align="center" valign="middle">
<TABLE border="1" cellSpacing="0" id="myTable" bordercolor="black">
<TBODY>
<TR>
<TD width="50" align="center" valign="middle">Cod</TD>
<TD width="150" align="center" valign="middle">Product</TD>
<TD width="150" align="center" valign="middle">Price</TD>
<TD width="150" align="center" valign="middle">Order</TD>
<TD width="150" align="center" valign="middle">Total</TD>
<td width="30" align="center" valign="middle">&nbsp;</td>
<td width="30" align="center" valign="middle">&nbsp;</td>
<TR>
<TD width="50"><input type="text" name="no" size="2"></TD>
<TD width="50"><input type="text" name="name" size="20"></TD>
<TD width="150"><input type="text" name="prc" size="20"></TD>
<TD width="150"><input type="text" name="quant" size="20"></TD>
<TD width="150" align="center" valign="middle"><input type="text" name="total" size="20"></TD>
<td width="30"><input type="button" name="esc" value="choose" onclick="doIt()" class="buttao"></td>
<td width="30"><input type="button" name="calc" value="calculate" onclick="calcula()" class="buttao"></td>
</tr>
</TBODY>
</TABLE>
</td>
</tr>
<tr>
<td align="center" valign="middle"><INPUT name="B3" onclick="addRow('myTable')" type="button" value="Add Line">&nbsp;&nbsp;&nbsp;<input type="button" value="Calculate Total" onclick="calctotal()">&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" size="5" value="" name="totalpedido" id="totalpedido">&nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" value="Submit Form"></td>
</tr>
</form>
</body>
</HTML>




And the window that opens, named choose.html:




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">
function passBack(_a,_b,_c){
opener.catchIt(_a,_b,_c);
self.close();
}
</script>
</head>
<body leftmargin="0" topmargin="0" bottommargin="0" rightmargin="0">
<table align="center" valign="middle" border="1" bordercolor="black">
<tr>
<td width="260" height="20" align="center" valign="middle" class="text" bgcolor="#0033FF"><a href="#" onclick="passBack('001','Product 1','13.25')"><b>Product 1</b></a></td>
<td width="260" height="20" align="center" valign="middle" class="text" bgcolor="#0033FF"><a href="#" onclick="passBack('002','Product 2','14.05')"><b>Product 2</b></a></td>
<td width="260" height="20" align="center" valign="middle" class="text" bgcolor="#0033FF"><a href="#" onclick="passBack('003','Product 3','15.55')"><b>Product 3</b></a></td>
</tr>
</table></body>
</html>


Thanks in advance.
Charles
08-09-2004, 07:02 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<meta name="Content-Style-Type" content="text/css">
<title>Example</title>

<script type="text/javascript">
<!--
onload = function () {
button = document.createElement("BUTTON")
button.appendChild(document.createTextNode('alert'))

button.onclick = function () {alert()}

document.getElementsByTagName('BODY')[0].appendChild(button)}
// -->
</script>

</head>
<body>
</body>
</html>
Adrian
08-09-2004, 10:13 PM
Sorry about my code not beeing in the standart, I'll work on that.
Thanks for the brief reply, think I've got this part.
Now I'm trying to make the function catchIt(_x,_y,_z) extendable to all the lines in the table, so if I click the button in row3, for example, the text inputs in row 3 (no3, name3, prc3), will be filled with the data passed from the other page, and if I click on the button on row 4, the text inputs on row 4 (no4, name4, prc4) will be filled with the data passed from the other page. How can I do that ?
I tried to use the counter as variable, but with no success. How can I fill the correct fields in the correct lines of the table calling always the same function ?
Thanks again.