<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>:: Gharsansar Spices Order Form ::</title>
<script language="javascript" type="text/javascript">
function addRow(tableID)
{
var rowCount;
var rowno;
var table = document.getElementById(tableID);
rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.id = "row"+rowCount;
rowno = row.id;
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
cell2.innerHTML = rowCount + 1;
cell2.className ="style2";
var cell3 = row.insertCell(2);
var e1 = document.createElement('select');
e1.name = 'Category['+rowCount+']';
e1.id = 'Category['+rowCount+']';
e1.setAttribute("onclick","javascript:SelectSubCat(this);");
choice = document.createElement('option');
choice.value = ':: Select A Product ::';
choice.appendChild(document.createTextNode(':: Select A Product ::'));
e1.appendChild(choice);
var choice = document.createElement('option');
choice.value = 'Jalani Jaljira';
choice.appendChild(document.createTextNode('Jalani Jaljira'));
e1.appendChild(choice);
choice = document.createElement('option');
choice.value = 'Pav Bhaji Masala';
choice.appendChild(document.createTextNode('Pav Bhaji Masala'));
e1.appendChild(choice);
choice = document.createElement('option');
choice.value = 'Sambhar Masala';
choice.appendChild(document.createTextNode('Sambhar Masala'));
e1.appendChild(choice);
choice = document.createElement('option');
choice.value = 'Sabji Masala';
choice.appendChild(document.createTextNode('Sabji Masala'));
e1.appendChild(choice);
choice = document.createElement('option');
choice.value = 'Kitchen King Masala';
choice.appendChild(document.createTextNode('Kitchen King Masala'));
e1.appendChild(choice);
choice = document.createElement('option');
choice.value = 'Garam Masala';
choice.appendChild(document.createTextNode('Garam Masala'));
e1.appendChild(choice);
choice = document.createElement('option');
choice.value = 'Meat Masala';
choice.appendChild(document.createTextNode('Meat Masala'));
e1.appendChild(choice);
choice = document.createElement('option');
choice.value = 'Chat Masala';
choice.appendChild(document.createTextNode('Chat Masala'));
e1.appendChild(choice);
choice = document.createElement('option');
choice.value = 'Chicken Masala';
choice.appendChild(document.createTextNode('Chicken Masala'));
e1.appendChild(choice);
choice = document.createElement('option');
choice.value = 'Ghar Sansar Jaljira';
choice.appendChild(document.createTextNode('Ghar Sansar Jaljira'));
e1.appendChild(choice);
choice = document.createElement('option');
choice.value = 'Dry Ginger Powder';
choice.appendChild(document.createTextNode('Dry Ginger Powder'));
e1.appendChild(choice);
choice = document.createElement('option');
choice.value = 'Dry Mango Powder';
choice.appendChild(document.createTextNode('Dry Mango Powder'));
e1.appendChild(choice);
choice = document.createElement('option');
choice.value = 'Pudina Powder';
choice.appendChild(document.createTextNode('Pudina Powder'));
e1.appendChild(choice);
choice = document.createElement('option');
choice.value = 'Jeera Powder';
choice.appendChild(document.createTextNode('Jeera Powder'));
e1.appendChild(choice);
choice = document.createElement('option');
choice.value = 'Black Pepper';
choice.appendChild(document.createTextNode('Black Pepper'));
e1.appendChild(choice);
choice = document.createElement('option');
choice.value = 'White Pepper Powder';
choice.appendChild(document.createTextNode('White Pepper Powder'));
e1.appendChild(choice);
choice = document.createElement('option');
choice.value = 'Fennel Powder (Saunf)';
choice.appendChild(document.createTextNode('Fennel Powder (Saunf)'));
e1.appendChild(choice);
choice = document.createElement('option');
choice.value = 'Kashmiri Mirch';
choice.appendChild(document.createTextNode('Kashmiri Mirch'));
e1.appendChild(choice);
choice = document.createElement('option');
choice.value = 'Kasuri Methi';
choice.appendChild(document.createTextNode('Kasuri Methi'));
e1.appendChild(choice);
choice = document.createElement('option');
choice.value = 'Jaljira';
choice.appendChild(document.createTextNode('Jaljira'));
e1.appendChild(choice);
choice = document.createElement('option');
choice.value = 'Chana Chole Masala';
choice.appendChild(document.createTextNode('Chana Chole Masala'));
e1.appendChild(choice);
choice = document.createElement('option');
choice.value = 'Super Garam Masala';
choice.appendChild(document.createTextNode('Super Garam Masala'));
e1.appendChild(choice);
choice = document.createElement('option');
choice.value = 'Haldi Powder';
choice.appendChild(document.createTextNode('Haldi Powder'));
e1.appendChild(choice);
choice = document.createElement('option');
choice.value = 'Dhaniya Powder';
choice.appendChild(document.createTextNode('Dhaniya Powder'));
e1.appendChild(choice);
choice = document.createElement('option');
choice.value = 'Red Chilli Powder';
choice.appendChild(document.createTextNode('Red Chilli Powder'));
e1.appendChild(choice);
cell3.appendChild(e1);
var cell4 = row.insertCell(3);
e_sub_cat = document.createElement('select');
e_sub_cat.name = 'SubCat['+rowCount+']';
e_sub_cat.id = 'SubCat['+rowCount+']';
cell4.appendChild(e_sub_cat);
var cell5 = row.insertCell(4);
var el = document.createElement('input');
el.type = 'text';
el.name = 'quantity[]';
el.size = 20;
el.setAttribute("onblur","javascript:check_numeric(this)");
cell5.appendChild(el);
}
function deleteRow(tableID)
{
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++)
{
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
function check_numeric(control)
{
var val=control.value;
var first=val.substring(0,1);
if(isNaN(val))
{
alert("Enter a numeric value only!");
control.value="";
control.focus();
}
if(first=="-")
{
alert("Enter a numeric value only!");
control.value="";
control.focus();
}
return true;
}
function SelectSubCat(control_value)
{
// ON selection of category this function will work
//var sub_cat_id = document.getElementById('SubCat['+rowCount+']').id;
var sub_cat_id = control_value.id;
var mySplitResult = sub_cat_id.split("[");
var control_no = mySplitResult[1];
var control_row_no = control_no.split("]");
var row_num = control_row_no[0];
var i;
for(i=document.getElementById('SubCat['+row_num+']').options.length-1;i>=0;i--)
{
document.getElementById('SubCat['+row_num+']').remove(i);
}
if(control_value.value == 'Jalani Jaljira')
{
addOption("2.5 gm", "2.5 gm",row_num);
addOption("5 gm", "5 gm",row_num);
addOption("50 gm", "50 gm",row_num);
addOption("100 gm", "100 gm",row_num);
addOption("150 gm", "150 gm",row_num);
addOption("300 gm", "300 gm",row_num);
addOption("500 gm", "500 gm",row_num);
}
if(control_value.value == 'Pav Bhaji Masala')
{
addOption("15 gm", "15 gm",row_num);
addOption("50 gm", "50 gm",row_num);
addOption("100 gm", "100 gm",row_num);
}
if(control_value.value == 'Sambhar Masala')
{
addOption("50gm", "50gm",row_num);
addOption("100gm", "100gm",row_num);
}
if(control_value.value == 'Sabji Masala')
{
addOption("15 gm", "15 gm",row_num);
addOption("50 gm", "50 gm",row_num);
addOption("100 gm", "100 gm",row_num);
}
if(control_value.value == 'Kitchen King Masala')
{
addOption("15 gm", "15 gm",row_num);
addOption("50 gm", "50 gm",row_num);
addOption("100 gm", "100 gm",row_num);
addOption("1 Kg", "1 Kg",row_num);
}
if(control_value.value == 'Garam Masala')
{
addOption("50gm", "50gm",row_num);
addOption("100gm", "100gm",row_num);
}
if(control_value.value == 'Meat Masala')
{
addOption("15 gm", "15 gm",row_num);
addOption("50 gm", "50 gm",row_num);
addOption("100 gm", "100 gm",row_num);
}
if(control_value.value == 'Chat Masala')
{
addOption("15 gm", "15 gm",row_num);
addOption("50 gm", "50 gm",row_num);
addOption("200 gm", "200 gm",row_num);
}
if(control_value.value == 'Chana Masala')
{
addOption("50 gm", "50 gm",row_num);
addOption("100 gm", "100 gm",row_num);
}
if(control_value.value == 'Chicken Masala')
{
addOption("50 gm", "50 gm",row_num);
addOption("100 gm", "100 gm",row_num);
}
if(control_value.value == 'Ghar Sansar Jaljira')
{
addOption("100 gm", "100 gm",row_num);
}
if(control_value.value == 'Dry Ginger Powder')
{
addOption("100 gm", "100 gm",row_num);
}
if(control_value.value == 'Dry Mango Powder')
{
addOption("100 gm", "100 gm",row_num);
}
if(control_value.value == 'Pudina Powder')
{
addOption("100 gm", "100 gm",row_num);
}
if(control_value.value == 'Jeera Powder')
{
addOption("50 gm", "50 gm",row_num);
addOption("100 gm", "100 gm",row_num);
}
if(control_value.value == 'Black Pepper')
{
addOption("50 gm", "50 gm",row_num);
addOption("100 gm", "100 gm",row_num);
}
if(control_value.value == 'White Pepper Powder')
{
addOption("50 gm", "50 gm",row_num);
addOption("100 gm", "100 gm",row_num);
}
if(control_value.value == 'Fennel Powder (Saunf)')
{
addOption("50 gm", "50 gm",row_num);
addOption("100 gm", "100 gm",row_num);
}
if(control_value.value == 'Kashmiri Mirch')
{
addOption("100 gm", "100 gm",row_num);
addOption("1 Kg", "1 Kg",row_num);
}
if(control_value.value == 'Kasuri Methi')
{
addOption("25 gm", "25 gm",row_num);
addOption("50 gm", "50 gm",row_num);
addOption("100 gm", "100 gm",row_num);
addOption("500 gm", "500 gm",row_num);
}
if(control_value.value == 'Jaljira')
{
addOption("15 gm", "15 gm",row_num);
}
if(control_value.value == 'Chana Chole Masala')
{
addOption("15 gm", "15 gm",row_num);
}
if(control_value.value == 'Super Garam Masala')
{
addOption("100 gm", "100 gm",row_num);
addOption("200 gm", "200 gm",row_num);
addOption("1 Kg", "1 Kg",row_num);
}
if(control_value.value == 'Haldi Powder')
{
addOption("100 gm", "100 gm",row_num);
addOption("200 gm", "200 gm",row_num);
addOption("500 gm", "500 gm",row_num);
addOption("1 Kg", "1 Kg",row_num);
}
if(control_value.value == 'Dhaniya Powder')
{
addOption("100 gm", "100 gm",row_num);
addOption("200 gm", "200 gm",row_num);
addOption("500 gm", "500 gm",row_num);
addOption("1 Kg", "1 Kg",row_num);
}
if(control_value.value == 'Red Chilli Powder')
{
addOption("100 gm", "100 gm",row_num);
addOption("200 gm", "200 gm",row_num);
addOption("500 gm", "500 gm",row_num);
addOption("1 Kg", "1 Kg",row_num);
}
}//////////////////
function addOption(value, text, rno)
{
var optn = document.createElement("OPTION");
optn.text = text;
optn.value = value;
//if(rowCount==undefined)
// rowCount=0;
document.getElementById('SubCat['+rno+']').options.add(optn);
}
</script>
<style type="text/css">
<!--
.style1 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #0066FF;}
.style2 {border:0px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#0066FF; font-weight:bold;}
.style3 {
font-size: 14px;
font-weight: bold;
}
.table{border: 2px solid #CCCCCC;}
.button{background-color:#0099FF; font-family:Verdana, Arial, Helvetica, sans-serif; font-weight: bold; color:#FFFFFF; font-size:12px; }
.table_cell_new {
font-size:11px;
font-family:Verdana, sans-serif, serif, Arial, Helvetica;
color: #555859;
font-weight: 300;
width: 180px;
}
.line {
color:#CCCCCC; size:inherit; border-bottom:solid;
}
.style4 {font-family: Verdana, Arial, Helvetica, sans-serif;}
.style5 {font-size: 12px;}
-->
</style>
</head>
<body>
<table width="583" border="0" align="center">
<tr>
<td width="596" height="298">
<form name="drop_list" method="post" action="submitorder.php" enctype="multipart/form-data" >
<table width="581" border="0" align="center" class="table">
<tbody>
<tr>
<td height="149" valign="top"><table width="476" border="0" align="left">
<tr>
<td height="34" colspan="3" class="style1 style3">Submit Order Details</td>
</tr>
<tr>
<td width="138" class="txtLabel style4 style5">Company Name</td>
<td width="328" colspan="2"><label>
<input name="companyname" type="text" class="table_cell_new" id="companyname" maxlength="50" />
</label></td>
</tr>
<tr>
<td class="txtLabel style4 style5">Address</td>
<td colspan="2"><input name="address" type="text" class="table_cell_new" id="address" maxlength="50" /></td>
</tr>
<tr>
<td class="txtLabel style4 style5">Contact No.</td>
<td colspan="2"><input name="contactno" type="text" class="table_cell_new" id="contactno" maxlength="15" /></td>
</tr>
<tr>
<td class="txtLabel style4 style5">Email Add.</td>
<td colspan="2"><input name="email" type="text" class="table_cell_new" id="email" maxlength="15" /></td>
</tr>
<tr>
<td height="11" colspan="3" valign="top"></td>
</tr>
</table></td>
</tr>
<tr>
<td height="10" valign="top" class="line"> </td>
</tr>
<tr>
<td width="571" height="56" valign="top"><table width="570" border="0">
<tr>
<td width="52" class="style2">Select </td>
<td width="51" align="left" class="style2"><div align="left">S. No.</div></td>
<td width="197" align="left" class="style2"><div align="left">Product Name</div></td>
<td width="103" align="left" class="style2"><div align="left">Variation</div></td>
<td width="145" align="left" class="style2"><div align="left">Quantity</div></td>
</tr>
</table>
<table id="dataTable" width="571" border="0">
<tr>
<td width="60"> </td>
<td width="56" class="style2"> 1 </td>
<td width="204" align="left"><div align="left">
<select name="Category[0]" id="Category[0]" onChange="SelectSubCat(this);">
<option value="0" selected="true">:: Select A Product ::</option>
<option value="Jalani Jaljira">Jalani Jaljira</option>
<option value="Pav Bhaji Masala">Pav Bhaji Masala</option>
<option value="Sambhar Masala">Sambhar Masala</option>
<option value="Sabji Masala">Sabji Masala</option>
<option value="Kitchen King Masala">Kitchen King Masala</option>
<option value="Garam Masala">Garam Masala</option>
<option value="Meat Masala">Meat Masala</option>
<option value="Chat Masala">Chat Masala</option>
<option value="Chicken Masala">Chicken Masala </option>
<option value="Ghar Sansar Jaljira">Ghar Sansar Jaljira</option>
<option value="Dry Ginger Powder">Dry Ginger Powder</option>
<option value="Dry Mango Powder">Dry Mango Powder</option>
<option value="Pudina Powder">Pudina Powder</option>
<option value="Jeera Powder">Jeera Powder</option>
<option value="Black Pepper">Black Pepper</option>
<option value="White Pepper Powder">White Pepper Powder</option>
<option value="Fennel Powder (Saunf)">Fennel Powder (Saunf) </option>
<option value="Kashmiri Mirch">Kashmiri Mirch </option>
<option value="Kasuri Methi">Kasuri Methi </option>
<option value="Jaljira">Jaljira </option>
<option value="Chana Chole Masala">Chana Chole Masala </option>
<option value="Super Garam Masala">Super Garam Masala</option>
<option value="Haldi Powder">Haldi Powder </option>
<option value="Dhaniya Powder">Dhaniya Powder</option>
<option value="Red Chilli Powder">Red Chilli Powder</option>
</select>
</div></td>
<td width="109" align="left"><div align="left">
<select name="SubCat[0]" id="SubCat[0]">
</select>
</div></td>
<td width="120"><input name="quantity[]" type="text" size="20" maxlength="25" onblur="return check_numeric(this);"/></td>
</tr>
</table>
<br>
<input type="button" class="button" onClick="addRow('dataTable')" value="Add More" />
<input type="button" class="button" onClick="deleteRow('dataTable')" value="Delete Row" />
<input name="Submit" type="submit" class="button" value="Submit Details" />
</td>
</tr>
</tbody>
</table>
</form>
</td>
</tr>
</table>
</body>
</html>
views:
520answers:
3
A:
Try refactoring that massive function into smaller parts (you can have a standard function for adding option elements) which will mean less copy/paste code.
You can then add simple debugging statements through these functions to see what is happening.
ck
2009-05-28 11:22:58
A:
Didn't read the whole thing - you pasted far too much code - but I'll have a guess at the problem.
IE has a well-known issue that it is not able to add table cells dynamically using DOM methods. Use innerHTML instead, which works.
Daniel Roseman
2009-05-28 11:29:15
IE has a well-known issue that it is not able to edit the inside of a table with innerHTML.
David Dorward
2009-05-28 11:48:55
A:
e1.setAttribute("onclick","javascript:SelectSubCat(this);");
I think this line may be the cause. Look at the following (the first row uses "onchange", but the rows added with JS uses "onclick" …):
document.getElementById("Category[0]").onchange // the first row
>> function()
but,
document.getElementById("Category[1]").onclick // the second row
>> "SelectSubCat(this);"
I.e. Internet Explorer sets onclick to a string! (Btw, the recommended way of adding a listener is to use addEventListener (but IE ignores that and uses its own attachEvent!).) Anyway, there is a DOM 0 way of doing this that works (afaic) in both IE and Fx: element.onevent. You don't have to pass this to the function when you use this method, just replace the previous line with (this = the clicked element, when the function is called):
e1.onchange = SelectSubCat;
But, you have to change how the first row calls SelectSubCat and use this instead of control_value in the function.
One last thing, a similar line:
el.setAttribute("onblur","javascript:check_numeric(this)");
You have to do the same thing here.
You should probably listen to all people shouting at you how terrible your functions are (maybe some arrays may help to clean up some parts of the code). And (the last "and" :), this page will not work without JS and is therefore broken.
(For more info on events in JS see Introduction to Events.)
cic
2009-05-29 15:45:19