Hi, This might be a javascript questions since javascript is actually creating the row, but since the problem isn't creating the row but rather the display, I thought I'd start here first... Clicking the add new row button works perfectly in Firefox. When I add a new row in IE6 and IE7 only the first row adds correctly... the quantity field adds correctly each time but the others don't. Any ideas? I have attached my code and screen shots. I understand that I should not have my style information included with the html but I take that out after I get the page working the way it is supposed to. HERE IS THE STYLE CODE <style type="text/css"> #quickShopHeadings{ width: 950px; font-weight: bold; float: left; border-bottom: 1px solid; } #quickShopForm { width: 950px; padding-bottom: 10px; float: left; background: #E5E1D9; } #quickShopHelp { width: 300px; clear: both; float: left; padding-top: 10px; padding-left: 5px; padding-right: 5px; background: #EEEEEE; } #qsInfo{ clear: both; float: left; width: 100%; } #quickShopHelp p, #qsInfo p{ padding-top: 5px; padding-bottom: 5px; } #quickShopHelp .helpHeader{ font-weight: bold; } #quickShopHeadings ul, #quickShopForm ul{ list-style: none; } #quickShopHeadings li{ background: #CAC4B4; } #quickShopForm li{ padding-top: 10px; } .qsQuantity{ display: block; clear: both; float: left; width: 60px; padding-left: 5px; } .qsNameHeading{ display: block; float: left; width: 735px; } .qsItemNumber{ display: block; float: left; width: 150px; } .qsName{ position: relative; display: block; float: left; } .qsChoice, .qsStartOver{ display: block; float: left; padding-left: 10px; } .qsButton{ display: block; float: left; padding-left: 10px; } </style> HERE IS THE HTML/JAVA CODE <div id="quickShopHeadings"> <ul> <li class="qsQuantity">Quantity</li> <li class="qsItemNumber">Item Number</li> <li class="qsNameHeading">Name</li> </ul> </div> <div id="quickShopForm"> <form id="quickShopItems" name="quickShopItems" method="post" action=""> <input type="hidden" name="activity" id="activity" value="" /> <input type="hidden" name="listName" id="listName" value="" /> <input type="hidden" name="howmany" id="howmany" value="" /> <% nt rowCount = 0; or (int x = 1; x < 7; x++) { rowCount = rowCount + 1; %> <ul id="quickShopList"> <li class="qsQuantity"><%=x%> <input type="text" name="quantity_<%=x%>" id="quantity_<%=x%>" size="2" value="" /></li> <li class="qsItemNumber"><input type="text" name="prefix_<%=x%>" id="prefix_<%=x%>" size="3" value="" /> - <input type="text" name="partNumber_<%=x%>" id="partNumber_<%=x%>" size="9" value="" onblur="javascript:ajax_checkItemNumber('<%=x%>')" /></li> <li id="itemName_<%=x%>" class="qsName"> </li> <li id="choice2_<%=x%>" class="qsChoice"> </li> <li id="choice3_<%=x%>" class="qsChoice"> </li> <li id="choice4_<%=x%>" class="qsChoice"> </li> <li id="clearButton_<%=x%>" class="qsStartOver" style="display: none"><input type="button" value="Clear" name="ClearChoices" onclick="StartOver('<%=rowCount%>')"/></li> </ul> <% } %> <ul id="newRows"></ul> <ul id="formButtons" style="clear: both; float: left;"> <li class="qsButton"><input type="button" value="Add to Shopping Cart" onclick="javascript:quickShop('quickShopItems', 'quickShopCart', 'AddToCart?')" /></li> <li class="qsButton"><input type="button" value="Add Another Row" onclick="javascript:addQuickShopRow()" /></li> </ul> <input type="hidden" id="rowCount" name="rowCount" value="<%=rowCount%>" /> </form> </div> HERE IS THE JAVASCRIPT function addQuickShopRow() { //Purpose: Adds a new quickshop <li> to the quickshop form var newList = document.getElementById('newRows'); var rowNumber = document.getElementById('rowCount').value; var newRowNumber = parseInt(rowNumber) + 1; // Create the Quantity Row var quantityLI = document.createElement('li'); quantityLI.className = "qsQuantity"; quantityLI.innerHTML = newRowNumber + "<input type='text' name=\"quantity_"+newRowNumber+"\" id=\"quantity_"+newRowNumber+"\" size='2' value='' />"; newList.appendChild(quantityLI); // Create the Item Number Row var itemNumberLI = document.createElement('li'); itemNumberLI.className = "qsItemNumber"; itemNumberLI.innerHTML = "<input type='text' name=\"prefix_"+newRowNumber+"\" id=\"prefix_"+newRowNumber+"\" size='3' value='' /> - <input type='text' name=\"partNumber_"+newRowNumber+"\" id=\"partNumber_"+newRowNumber+"\" size='9' value='' onblur='javascript:ajax_checkItemNumber("+newRowNumber+")' />"; newList.appendChild(itemNumberLI); // Create the Item Name Row var itemNameLI = document.createElement('li'); itemNameLI.className = "qsName"; itemNameLI.id = "itemName_" + newRowNumber; itemNameLI.innerHTML = " "; newList.appendChild(itemNameLI); // Create the Choice Rows var choice2LI = document.createElement('li'); choice2LI.className = "qsChoice"; choice2LI.id = "choice2_" + newRowNumber; choice2LI.innerHTML = " "; newList.appendChild(choice2LI); var choice3LI = document.createElement('li'); choice3LI.className = "qsChoice"; choice3LI.id = "choice3_" + newRowNumber; choice3LI.innerHTML = " "; newList.appendChild(choice3LI); var choice4LI = document.createElement('li'); choice4LI.className = "qsChoice"; choice4LI.id = "choice4_" + newRowNumber; choice4LI.innerHTML = " "; newList.appendChild(choice4LI); // Create the clear button var clearButton = document.createElement('li'); clearButton.className = "qsStartOver"; clearButton.id = "clearButton_" + newRowNumber; clearButton.style.display = "none"; clearButton.innerHTML = "<input type='button' value='Clear' name='ClearChoices' onclick='StartOver("+newRowNumber+")' />"; newList.appendChild(clearButton); document.getElementById('rowCount').value = newRowNumber; }
Here is a picture of what it looks like when it is working... I get valid item options using ajax... just an FYI
no live example unfortunately... i'm developing everything locally. maybe i'll have to wait until the new server is up and then revisit this issue later if no one can help me...