PDA

View Full Version : Dynamiclly generated form fields are not submitted width the form



sd1
08-21-2005, 07:54 PM
Hi all.
i wrote a script that dynimaclly genreate form fields with DOM.everythink is working fine except the submit proccess. when i press the submit button none of the items is posted.

any help will be greatly appriciated, this is my code:
the code is java script with php,all the question marks are hebrew charecters


<form name=makeInvoiceIn method=get>
<td align=right valign=top style=\"font-size:16px;\">?????: <tr><td valign=top align=center>
<div><input name=\"add_row\" type=\"button\" id=\"add_row\" value=\"add row\" onclick=\"addRow()\" />

</div>
<table align=center width=90% cellpadding=0 cellspacing=2 id=\"table1\">
<tr style=\"font-weight:bold;font-size:14px;\">
<td>??? ????</td><td>?? ????</td><td>????</td><td>???? ???'</td><td>????</td><td>??? ??????</td><td>% ????</td><td>??\"?</td>
</tr>
<tr><td colspan=8 height=3 style=\"border-bottom:1px solid black;\"><img src=images/tranGif.gif></td></tr>
<script type=\"text/javascript\">
function addRow(){
var tbody = document.getElementById(\"table1\").tBodies[0];
var row = document.createElement(\"TR\");
row.setAttribute(\"align\",\"right\");

var i=0;
//Cell 1
var cell1 = document.createElement(\"TD\");
cell1.setAttribute(\"align\",\"center\");
var inp1 = document.createElement(\"INPUT\");
inp1.setAttribute(\"type\",\"text\");
inp1.setAttribute(\"size\",\"8\");
inp1.setAttribute(\"name\",\"itemID\" +i);
inp1.setAttribute(\"id\",\"itemID\" +i);
inp1.setAttribute(\"disabled\",\"itemID\" +i);
cell1.appendChild(inp1);

//Cell 2
var cell2 = document.createElement(\"TD\");
cell2.setAttribute(\"align\",\"center\");
var inp2 = document.createElement(\"SELECT\");
inp2.setAttribute(\"size\",\"1\");
inp2.setAttribute(\"name\",\"itemID\" +i);
inp1.setAttribute(\"id\",\"itemID\" +i);
inp2.onchange= function(){showtext(i);};
opt = document.createElement('Option');
opt.innerHTML = '';
opt.value = '';
inp2.appendChild(opt);

var price = new Array();
var currencyIDArr = new Array();
var currencyRate = new Array();
";
$start = 0;
$resultServices = mysql_query("SELECT * FROM tblMoreServices ORDER BY 'title' ASC");
while ($rowServices = mysql_fetch_array($resultServices)) {
if ($rowServices[currencyID] != 1) {
$resultCurrencyRate = mysql_query("SELECT * FROM tblCurrencyRates WHERE currencyID='$rowServices[currencyID]' ORDER BY 'id' DESC LIMIT 0,1");
$rowCurrencyRate = mysql_fetch_array($resultCurrencyRate);
} else {
$rowCurrencyRate[currencyValue] = 0;
}
if ($rowServices[incVAT] == "y") {
$rowServices[basePrice] = $rowServices[basePrice] *$varNumeric;
}
echo "
price[$rowServices[id]] = $rowServices[basePrice];
currencyIDArr[$rowServices[id]] = $rowServices[currencyID];
currencyRate[$rowServices[id]] = $rowCurrencyRate[currencyValue];
opt$start = document.createElement('Option');
opt$start.innerHTML = '$rowServices[title]';
opt$start.value = $rowServices[id];
inp2.appendChild(opt$start);
";
$start++;

}
echo "
cell2.appendChild(inp2);
function showtext(i) {
var unitPriceID = inp2.options[inp2.selectedIndex].value;
inp2.setAttribute(\"disabled\",\"itemID\" +i);
cell2.appendChild(inp2);
inp1.setAttribute(\"value\",unitPriceID);
cell1.appendChild(inp1);
inp3.setAttribute(\"value\",1);
cell3.appendChild(inp3);
inp4.setAttribute(\"value\", price[unitPriceID]);
cell4.appendChild(inp4);
inp5.value = currencyIDArr[unitPriceID];
cell5.appendChild(inp5);
inp6.value = currencyRate[unitPriceID];
cell6.appendChild(inp6);
inp7.value = 0;
cell7.appendChild(inp7);
var totalUnits = inp3.value;
var totalUnitPrice = inp4.value;
var totalCurRate = inp6.value;
if (totalCurRate > 0) {
var totalPrice = (totalCurRate*totalUnitPrice*totalUnits);
} else {
var totalPrice = (totalUnitPrice*totalUnits);
}
inp8.value = roundit(totalPrice,3);
}


//Cell 3
var cell3 = document.createElement(\"TD\");
cell3.setAttribute(\"align\",\"center\");
var inp3 = document.createElement(\"INPUT\");
inp3.setAttribute(\"type\",\"text\");
inp3.setAttribute(\"size\",\"4\");
inp3.setAttribute(\"name\",\"amount\" +i);
inp3.onblur= function(){changeUnitFunc(i);};
cell3.appendChild(inp3);

function changeUnitFunc(i) {
var totalUnits = inp3.value;
var totalUnitPrice = inp4.value;
var totalCurRate = inp6.value;
var totalRebate = inp7.value
if (totalCurRate > 0) {
var totalPrice = (totalCurRate*totalUnitPrice*totalUnits);
} else {
var totalPrice = (totalUnitPrice*totalUnits);
}
if (totalRebate > 0) {

var rebatePerecnt = totalRebate / 100;
var totalPriceToRebate = totalPrice*rebatePerecnt;
totalPrice = totalPrice-totalPriceToRebate;
}
inp8.value = roundit(totalPrice,3);
}

//Cell 4
var cell4 = document.createElement(\"TD\");
cell4.setAttribute(\"align\",\"center\");
var inp4 = document.createElement(\"INPUT\");
inp4.setAttribute(\"type\",\"text\");
inp4.setAttribute(\"size\",\"4\");
inp4.setAttribute(\"name\",\"unitPrice\" +i);
inp4.onblur= function(){changeUnitFunc(i);};
cell4.appendChild(inp4);
//Cell 5
var cell5 = document.createElement(\"TD\");
cell5.setAttribute(\"align\",\"center\");
var inp5 = document.createElement(\"SELECT\");
inp5.setAttribute(\"size\",\"1\");
inp5.setAttribute(\"name\",\"currencyID\" +i);
inp5.onchange= function(){changeCurrency(i);};
optCur = document.createElement('Option');
optCur.innerHTML = '';
optCur.value = '';
inp5.appendChild(optCur);
";
$startCur = 0;
$resultCurrency = mysql_query("SELECT * FROM tblCurrency ORDER BY 'id' ASC");
while ($rowCurrency = mysql_fetch_array($resultCurrency)) {
echo "opt$startCur = document.createElement('Option');
opt$startCur.innerHTML = '$rowCurrency[title]';
opt$startCur.value = $rowCurrency[id];
inp5.appendChild(opt$startCur);";
}
echo "
cell5.appendChild(inp5);

function changeCurrency(i) {
if (inp5.value == 1) {
inp6.value = 0
cell6.appendChild(inp6);
} else {
inp6.value = \"".$rowCurrencyRate[currencyValue]."\";
cell6.appendChild(inp6);
}
var totalUnits = inp3.value;
var totalUnitPrice = inp4.value;
var totalCurRate = inp6.value;
var totalRebate = inp7.value
if (totalCurRate > 0) {
var totalPrice = (totalCurRate*totalUnitPrice*totalUnits);
} else {
var totalPrice = (totalUnitPrice*totalUnits);
}
if (totalRebate > 0) {

var rebatePerecnt = totalRebate / 100;
var totalPriceToRebate = totalPrice*rebatePerecnt;
totalPrice = totalPrice-totalPriceToRebate;
}
inp8.value = roundit(totalPrice,3);
}


//Cell 6
var cell6 = document.createElement(\"TD\");
cell6.setAttribute(\"align\",\"center\");
var inp6 = document.createElement(\"INPUT\");
inp6.setAttribute(\"type\",\"text\");
inp6.setAttribute(\"size\",\"4\");
inp6.setAttribute(\"name\",\"currencyRate\" +i);
inp6.onblur= function(){changeUnitFunc(i);};
cell6.appendChild(inp6);
//Cell 7
var cell7 = document.createElement(\"TD\");
cell7.setAttribute(\"align\",\"center\");
var inp7 = document.createElement(\"INPUT\");
inp7.setAttribute(\"type\",\"text\");
inp7.setAttribute(\"size\",\"4\");
inp7.setAttribute(\"name\",\"currencyRate\" +i);
inp7.onblur= function(){changeUnitFunc(i);};
cell7.appendChild(inp7);
//Cell 8
var cell8 = document.createElement(\"TD\");
cell8.setAttribute(\"align\",\"center\");
var inp8 = document.createElement(\"INPUT\");
inp8.setAttribute(\"type\",\"text\");
inp8.setAttribute(\"size\",\"8\");
inp8.setAttribute(\"name\",\"currencyRate\" +i);
cell8.appendChild(inp8);

//cell 9
var cell9 = document.createElement('TD');
var inp9 = document.createElement('INPUT');
inp9.setAttribute('type','button');
inp9.setAttribute('value','??? ????');
inp9.onclick=function(){delRow(this);}
cell9.appendChild(inp9);

//
row.appendChild(cell1);
row.appendChild(cell2);
row.appendChild(cell3);
row.appendChild(cell4);
row.appendChild(cell5);
row.appendChild(cell6);
row.appendChild(cell7);
row.appendChild(cell8);
row.appendChild(cell9);
tbody.appendChild(row);
i++;

document.makeinvoice.list=i;
//alert(\"i= \" +i);
//alert(row.innerHTML);
}

function delRow(button)
{
var row = button.parentNode.parentNode;
var tbody = document.getElementById('table1').getElementsByTagName('tbody')[0];
tbody.removeChild(row);
}


function changeMe2(){

}
</script>

<script>

function roundit(Num, Places) {
if (Places > 0) {
if ((Num.toString().length - Num.toString().lastIndexOf('.')) > (Places + 1)) {
var Rounder = Math.pow(10, Places);
return Math.round(Num * Rounder) / Rounder;
}
else return Num;
}
else return Math.round(Num);
}
</script>
</table>
</td></tr>
<tr><td align=left>??\"? ???? ???: <input type=text totalNoVat id=totalNoVat disabled></td></tr>
<tr><td valign=top align=left><input type=button name=snd onClick=\"alert(document.forms.makeInvoiceIn.amount0.value)\" value=\"check\"></td></tr>
<tr><td valign=top align=left><input type=submit name=snd value=\"????\"></td></tr>
</table>
</form>

mwinter
08-21-2005, 09:15 PM
Posting server-side code when trying to debug something that is exclusively client-side doesn't help. Unless the problem is obvious, debugging a script requires a working example that demonstrates the problem.

There are two immediate problems that jump out at me. The first is that your markup isn't valid: you have a form element immediately followed by a table cell (td). The second is that you're using the Node.appendChild method to add option elements to a select element. This won't work in IE (and in others). Either use the Option constructor from (de facto) DOM 0, or the HTMLSelectElement.add (but that has problems due to cross-browser incompatibility).

Mike

sd1
08-21-2005, 09:53 PM
hi mwinter and 10x a lot for your help.

as for the result code, it's attached right here.
about the browser - lucky me, i don't have to make my code to work in IE because the code is written for Safari and Firefox only (we use Macs).

anyway,here is the result code of what i wrote above: (attached file)

mwinter
08-22-2005, 07:01 PM
As I said, your markup is invalid. Fix it (with some help from the W3C validator (http://validator.w3.org/), if necessary) and your problem will go away.

Mike

sd1
08-23-2005, 12:27 AM
10x a lot
i fixed it and it's really working

best wishes