nezbie Posted December 20, 2006 Share Posted December 20, 2006 [code] function addEvent(maxCols) { var ni = document.getElementById('myDiv'); var numi = document.getElementById('theValue'); var num = (document.getElementById('theValue').value -1)+ 2; numi.value = num; var divIdName = "my"+num+"Div"; var divContents = ""; for(a=0; a < maxCols; a++) { divContents += "<input class=\"inputFields\" name=\"rowContents["+num+"]["+a+"]\" style=\"width: 150px;\" value=\"\" type=\"text\"> "; } var newdiv = document.createElement('div'); newdiv.setAttribute("id",divIdName); newdiv.setAttribute("id",divIdName); newdiv.innerHTML = "Row "+num+" "+divContents+" <a href=\"javascript:;\" onclick=\"removeEvent(\'"+divIdName+"\')\">Poista rivi "+num+"</a>"; ni.appendChild(newdiv); } <input type="hidden" value="' . $row . '" id="theValue" /> <a href="javascript:;" onclick="addEvent(\'' . $colCount . '\');">Add row</a><br /><br /> <div id="myDiv"> </div>[/code]$row = my starting row(code from php as well the whle "add rows thingy"Firefox (1.5.0.8) cannot read the field values that are dynamically added but IE(7) can. How should I modify this code that mozilla could read the field values?So when I post a form the elements dynamically created are posted within. No trouble in IE.Thanks Quote Link to comment Share on other sites More sharing options...
tomfmason Posted December 20, 2006 Share Posted December 20, 2006 You see IE is, for lack of a better term, Crap.. You should always design your apps with FF and or Opera in mind and then work it into IE. The reason that I say this is that there are few things that work in FF that will not in IE.. On the other hand you can almost have any mess of code and it will work in IE... Have you looked at the Javascript Console in FF? If not, you might want to check it out. As it should give you a decent description as to what the problem is.Good Luck,Tom Quote Link to comment Share on other sites More sharing options...
nezbie Posted December 20, 2006 Author Share Posted December 20, 2006 The console gives no errors/notices/warningsWhat might the problem be, did you know? ;) Quote Link to comment Share on other sites More sharing options...
fenway Posted December 20, 2006 Share Posted December 20, 2006 I'm not sure I understand the code as it stands, maybe because I'm missing the $row part... Quote Link to comment Share on other sites More sharing options...
nezbie Posted December 20, 2006 Author Share Posted December 20, 2006 [quote]$row = my starting row(code from php as well the whle "add rows thingy")[/quote]It is filled correctly - so that is not the problem. For some reason mozilla ignores these fields created with javascript when posting the form. If I echo out print_r($_POST) after form submission with PHP, Mozilla only prints out values for fields generated with php. IE echoes out lines generated with PHP and Javascript. Quote Link to comment Share on other sites More sharing options...
tomfmason Posted December 20, 2006 Share Posted December 20, 2006 Well when looking through your code again I saw that you are setting the id attribute twice.. I am not really sure if that is what the problem is but... I suspect that this is not the full code. Can you please post a link to the live version?Good Luck,Tom Quote Link to comment Share on other sites More sharing options...
nezbie Posted December 20, 2006 Author Share Posted December 20, 2006 [code]<head> <script type="text/javascript"> <!-- function addEvent(maxCols) { var ni = document.getElementById('myDiv'); var numi = document.getElementById('theValue'); var num = (document.getElementById('theValue').value -1)+ 2; numi.value = num; var divIdName = "my"+num+"Div"; var divContents = ""; for(a=0; a < maxCols; a++) { divContents += "<input class=\"inputFields\" name=\"rowContents["+num+"]["+a+"]\" style=\"width: 150px;\" value=\"\" type=\"text\"> "; } var newdiv = document.createElement('div'); newdiv.setAttribute("id",divIdName); newdiv.setAttribute("id",divIdName); newdiv.innerHTML = "Rivi "+num+" "+divContents+" <a href=\"javascript:;\" onclick=\"removeEvent(\'"+divIdName+"\')\">Poista rivi "+num+"</a>"; ni.appendChild(newdiv); } function removeEvent(divNum) { var d = document.getElementById('myDiv'); var olddiv = document.getElementById(divNum); d.removeChild(olddiv); } //--> </script></head><body><input type="hidden" value="' { my start value goes here, numeric } '" id="theValue" /><a href="javascript:;" onclick="addEvent(\'' . $colCount . '\');">Lisää rivejä</a><br /><br /><div id="myDiv"> </div></body>Live example on web, but not using forms (this is where I adapted my code and modified):[url]http://www.dustindiaz.com/add-and-remove-html-elements-dynamically-with-javascript/[/url][/code] Quote Link to comment Share on other sites More sharing options...
nezbie Posted December 21, 2006 Author Share Posted December 21, 2006 Ok, I solved this. Gladly there was nothing wrong with the javascript code, but form positions on page. It seems to be "illegal" to build forms like <table><tbody><form><tr><td></td></tr></form></tbody></table>, Mozilla and evidently Opera cannot read the form properly, at least not with "dynamic fields". I didn't think this the first because I've never had this kind of trouble with forms.When I changed the form -tags right before and after the table tags, my page started working perfectly :SI'm glad though, I just have a lot to repair in my other scripts now x) Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.