JesuZ Posted May 5, 2009 Share Posted May 5, 2009 Hello, I found nice way to add stuff in element innerHTML, but when I'm adding stuff in there, it clears everytime fields in it... Is there way to update innerHTML, without losing data in fields? Thanks for help. Quote Link to comment Share on other sites More sharing options...
KevinM1 Posted May 5, 2009 Share Posted May 5, 2009 Hello, I found nice way to add stuff in element innerHTML, but when I'm adding stuff in there, it clears everytime fields in it... Is there way to update innerHTML, without losing data in fields? Thanks for help. Try using the += operator, like so: var myDiv = document.getElementById('myDiv'); var moreText = "and, another thing.... "; myDiv.innerHTML += moreText; Quote Link to comment Share on other sites More sharing options...
JesuZ Posted May 5, 2009 Author Share Posted May 5, 2009 Hello, I'm new face in here... Found this topic via Google, and this helped me kind of lot... I've kind of code where should add new fields by clicking button, for sending more information to php-script. <div id="areas"> <p>Tiles between: <input name="minValues[]" type="text" id="min" size="5" /> - <input name="maxValues[]" type="text" id="max" size="5" /></p> </div> Using script below for onClick-action function addRow() { var elem = document.getElementById('areas'); var newText = '<p>\nTiles between:\n<input name="minValues[]" type="text" id="min" size="5" /> - <input name="maxValues[]" type="text" id="max" size="5" />\n</p>\n'; elem.innerHTML += newText; } I've little problem, that if I've already entered some values to old fields, and add a new one, all click will clear all older fields values also. How might I could avoid that? Added this in other (old solved) topic. There you see my current script... Quote Link to comment Share on other sites More sharing options...
KevinM1 Posted May 5, 2009 Share Posted May 5, 2009 Hmm...I'm not sure. I just wrote a simple test script (code below) that works fine: <html> <head> <title>blah</title> <script type="text/javascript"> window.onload = function() { var myDiv = document.getElementById('myDiv'); var myButton = document.getElementById('myButton'); myButton.onclick = function() { myDiv.innerHTML += " button was clicked "; } } </script> </head> <body> <div id="myDiv"></div> <br /> <br /> <button id="myButton">Click Me</button> </body> </html> Question: when exactly is your div losing the new text? Because things set with innerHTML won't persist if you're refreshing the page due to a form submission. Quote Link to comment Share on other sites More sharing options...
JesuZ Posted May 6, 2009 Author Share Posted May 6, 2009 Yeah, I'm not refreshing page... But when I've input-fields in my element, with some values, that I've wrote in them... And I notice that hey, I need another field for more information, and press button to add new field, yeah, it will add there new field, but in same time, all earlier fields turn empty, and I'll have to write values in again. Quote Link to comment Share on other sites More sharing options...
KevinM1 Posted May 6, 2009 Share Posted May 6, 2009 Yeah, I'm not refreshing page... But when I've input-fields in my element, with some values, that I've wrote in them... And I notice that hey, I need another field for more information, and press button to add new field, yeah, it will add there new field, but in same time, all earlier fields turn empty, and I'll have to write values in again. Hmm...that's probably because the values written into the fields aren't considered to be a part of the existing HTML. So, when you append the new HTML to the form, the values are lost because, as far as innerHTML is concerned, they don't exist anyway. An easy fix is to temporarily store all the form's values in variables, then once the new HTML is appended to the old, reassign them to the proper fields. Something like: var myForm = document.getElementById('myForm'); var originalFormLength = myForm.elements.length; var tmpValues = new Array(); for(var i = 0; i < originalFormLength; i++) { tmpValues[i] = myForm.elements[i].value; } /* innerHTML assignment here */ for(var j = 0; j < originalFormLength; j++) { myForm.elements[i].value = tmpValues[i]; } It's a bit more difficult to do with a mix of form input types (i.e., text and/or radio buttons and/or a select element, etc), but you should get the idea. Quote Link to comment Share on other sites More sharing options...
AmandaF Posted May 6, 2009 Share Posted May 6, 2009 What if you use the DOM instead of innerHTML? Something like this: function addRow() { var elem = document.getElementById('areas'); var input_min = document.createElement('input'); var input_max = document.createElement('input'); var newText = document.createElement('p'); input_min.setAttribute('type','text'); input_min.setAtttribute('name','minValues[]'); //Set the other attributes for input_min and input_max. I'm too lazy to write it out. ;-) newText.appendChild(input_min); newText.appendChild(document.createTextNode(' - '); newText.appendChild(input_max); elem.appendChild(newText); } Quote Link to comment Share on other sites More sharing options...
jackpf Posted May 6, 2009 Share Posted May 6, 2009 Check this shit out. <script> function blah() { var f = document.forms[0]; var a = new Array(); for(var i = 0; i < f.length; i++) { a[i] = f.elements[i].value; } //do your reload for(var i = 0; i < a.length; i++) { f.elements[i].value = a[i]; } } </script> <form> <input type="text" /> <input type="text" /> <input type="text" /> <input type="text" /> <input type="button" onclick="blah();" /> </form> Did you mean something like that? If I've completely missunderstood what you were asking, please forgive me 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.