Dynamisk form
Hej exp,Har lidt problemer med min form.. I input felt 1 skriver man rabatten.. og så regner den en ny pris ud i input2 feltet..
Virker kun i første kolonne.. og ikke i de koloner der bliver oprettet dynamisk..
Ville mene dette ville virke
// right cell // Discount
var discount = row.insertCell(3);
var dis = document.createElement('input');
dis.type = 'text';
dis.name = 'discount_' + iteration;
dis.id = 'discount_' + iteration;
dis.size = 10;
dis.onchange = test(iteration);
discount.appendChild(dis);
Men input felterne bliver ikke oprettet når jeg skriver test(iteration);
***********************************************
fil: index.html
<html>
<head>
<script type="text/javascript">
function addRowToTable()
{
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
// if there's no header row in the table, then iteration = lastRow + 1
var iteration = lastRow;
var row = tbl.insertRow(lastRow);
// left cell
var cellLeft = row.insertCell(0);
var textNode = document.createTextNode(iteration);
cellLeft.appendChild(textNode);
// select cell
var product = row.insertCell(1);
var pd = document.createElement('select');
pd.name = 'product_' + iteration;
pd.options[0] = new Option('text zero', 'value0');
pd.options[1] = new Option('text one', 'value1');
product.appendChild(pd);
// select cell
var colorBox = row.insertCell(2);
var col = document.createElement('select');
col.name = 'color_' + iteration;
col.options[0] = new Option('text zero', 'value0');
col.options[1] = new Option('text one', 'value1');
colorBox.appendChild(col);
// Discount
var discount = row.insertCell(3);
var dis = document.createElement('input');
dis.type = 'text';
dis.name = 'discount_' + iteration;
dis.id = 'discount_' + iteration;
dis.size = 10;
discount.appendChild(dis);
// price
var priceBox = row.insertCell(4);
var price = document.createElement('input');
price.type = 'text';
price.name = 'price_' + iteration;
price.id = 'price_' + iteration;
price.size = 10;
priceBox.appendChild(price);
// hidden
var hiddenBox = row.insertCell(5);
var hidden = document.createElement('input');
hidden.type = 'text';
hidden.name = 'hidden_' + iteration;
hidden.id = 'hidden_' + iteration;
hidden.size = 10;
hidden.value = 1000;
hiddenBox.appendChild(hidden);
}
function keyPressTest(e, obj)
{
var validateChkb = document.getElementById('chkValidateOnKeyPress');
if (validateChkb.checked) {
var displayObj = document.getElementById('spanOutput');
var key;
if(window.event) {
key = window.event.keyCode;
}
else if(e.which) {
key = e.which;
}
var objId;
if (obj != null) {
objId = obj.id;
} else {
objId = this.id;
}
displayObj.innerHTML = objId + ' : ' + String.fromCharCode(key);
}
}
function removeRowFromTable()
{
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
if (lastRow > 2) tbl.deleteRow(lastRow - 1);
}
function openInNewWindow(frm)
{
// open a blank window
var aWindow = window.open('', 'TableAddRowNewWindow',
'scrollbars=yes,menubar=yes,resizable=yes,toolbar=no,width=400,height=400');
// set the target to the blank window
frm.target = 'TableAddRowNewWindow';
// submit
frm.submit();
}
function validateRow(frm)
{
var chkb = document.getElementById('chkValidate');
if (chkb.checked) {
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length - 1;
var i;
for (i=1; i<=lastRow; i++) {
var aRow = document.getElementById('txtRow' + i);
if (aRow.value.length <= 0) {
alert('Row ' + i + ' is empty');
return;
}
}
}
openInNewWindow(frm);
}
function test(lin) {
var rabat = document.oForm.elements["discount_" + lin].value;
var pris = document.oForm.elements["hidden_" + lin].value;
if (document.oForm.elements["discount_" + lin].value.match(/%$/)){
var len = rabat.length-1;
rabat = rabat.substring(0, len);
fpris = pris-( (pris*rabat)/100 );
document.oForm.elements["price_" + lin].value = fpris;
} else {
fpris = pris-rabat;
document.oForm.elements["price_" + lin].value = fpris;
}
}
// -
</script>
</head>
<body>
<form action="post.html" name="oForm" method="get">
<p>
<input type="button" value="Add" onclick="addRowToTable();" />
<input type="button" value="Remove" onclick="removeRowFromTable();" />
<input type="button" value="Submit" onclick="validateRow(this.form);" />
<input type="checkbox" id="chkValidate" /> Validate Submit
</p>
<p>
<input type="checkbox" id="chkValidateOnKeyPress" checked="checked" /> Display OnKeyPress
<span id="spanOutput" style="border: 1px solid #000; padding: 3px;"> </span>
</p>
<table border="1" id="tblSample">
<tr>
<th colspan="6">Sample table</th>
</tr>
<tr>
<td>1</td>
<td>
<select name="product_1">
<option value="value0">text zero</option>
<option value="value1">text one</option>
</select>
</td>
<td>
<select name="color_1">
<option value="value0">text zero</option>
<option value="value1">text one</option>
</select>
</td>
<td>
<input type="text" name="discount_1" id="discount_1" size="10" onchange="test(1);" />
</td>
<td>
<input type="text" name="price_1" id="price_1" size="10" />
</td>
<td>
<input type="text" name="hidden_1" id="hidden_1" value="1000" size="10" />
</td>
</tr>
</table>
</form>
</body>
</html>
