sanfly Posted April 24, 2006 Share Posted April 24, 2006 Hi, lets say i have the following form:[code]<script> function add_band(){ data = ""; inter = "'"; spaces = " "; data1 = document.getElementById("cust").innerHTML; data = data + '<table cellspacing="10"><tr><td valign="top" align="right" width="80"><b>Band Name: </b></td><td valign="top"><input type="text" name="b_name[]" size="30" maxlength="100"> <b>Website: </b><input type="text" name="b_web[]" size="40" maxlength="100"></td></tr></table>'; document.getElementById("cust").innerHTML = data1 + data; } </script><form method="post" action="gigs.php?action=add2" onsubmit="submitonce(this)" name="gigs"> <span id=cust style="position:relative;"></span><br> <br> <input type="button" value="» Add Band «" onclick="add_band()"></form>[/code]if i add any data into the fields, then press "Add band", the new set of fields is added as expected, but the data is wiped from the fields i have already filled in. Does anyone know how I can fix this?Cheers Quote Link to comment Share on other sites More sharing options...
GBS Posted April 25, 2006 Share Posted April 25, 2006 Hi there,Your code is OK using IE, but it doesn't work using Firefox,You need to use the property:document.getElementById(name).[b]setAttribute[/b]("value",document.getElementById(name).value);to make it work with FF,,The code could be something like:[code]<html><body><script>function AssignValues(name){// this line is needed with firefox:document.getElementById(name).setAttribute("value",document.getElementById(name).value);}function debug(name,val1,webname,val2) {//just to populate the debug window:document.getElementById('text').value="innerHTML is: >>\r\n"+document.getElementById('cust').innerHTML;document.getElementById('text').value=document.getElementById('text').value+"\r\n& value is well: >>"+document.getElementById(name).getAttribute("value");}//we need a variable to make some increment id:var indexed = 0;function add_band(indexed){ indexed=indexed+1; data = ""; inter = "'"; spaces = " ";data = data + '<table cellspacing="10">';data = data + ' <tr>';data = data + ' <td valign="top" align="right" width="80">';data = data + ' <b>Band Name: </b>';data = data + ' </td>';data = data + ' <td valign="top">';data = data + ' <input type="text" id="name'+indexed+'" onchange="AssignValues(this.id);debug(this.id,this.value);" size="30" maxlength="100">';data = data + ' </td>';data = data + ' <td valign="top">';data = data + ' <b>Website: </b>';data = data + ' <input type="text" id="web'+indexed+'" onchange="AssignValues(this.id);debug(this.id,this.value);" size="40" maxlength="100">';data = data + ' </td>';data = data + ' </tr>';data = data + '</table>'; document.getElementById("cust").innerHTML = document.getElementById("cust").innerHTML + data;return indexed;}</script><form method="post" action="gigs.php?action=add2" onsubmit="submitonce(this)" name="gigs"> <span id=cust style="position:relative;"></span><br> <br> <input type="button" value="» Add Band «" onclick="indexed=add_band(indexed)"></form><br><textarea id="text" cols="100" rows="30" disabled=true></textarea></body></html>[/code]I have added a debug window to check what the innerHTML was exactly (without the setAttribute property, under FF, we didn't have the line 'value="Name of the band"'>Hoping it helps,,l8tr,, Quote Link to comment Share on other sites More sharing options...
sanfly Posted April 25, 2006 Author Share Posted April 25, 2006 Thanks mate, seems to be working :) Quote Link to comment Share on other sites More sharing options...
sanfly Posted May 30, 2006 Author Share Posted May 30, 2006 I've tried to adapt the code above for a different page, but with the same idea (see code below). However, I'm having problems with firefox again.The first time I click on the "+ Band" button, it works fine. A select menu appears with my option(s). The second time I click the "+ Band" button, a second select menu appears but any value selected in the first disappears, and both the select drop downs now contain no options. I've been playing around with it for a while but cant come up with a solution. Can anyone help me out?[code]<html><head> <title>Untitled</title> <script> function AssignValues(name){ // this line is needed with firefox: document.getElementById(name).setAttribute("value",document.getElementById(name).value); } //we need a variable to make some increment id: var indexed = 0; function add_band(indexed){ var bands = "<option value=28>These Four Walls"; indexed=indexed+1; data = ""; inter = "'"; spaces = " "; data = data + '<select name=band[] id="name'+indexed+'" onchange="AssignValues(this.id);"><option value=0>--SELECT BAND--' + bands + '</select><br><br>'; document.getElementById("cust").innerHTML = document.getElementById("cust").innerHTML + data; return indexed; }</script></head><body> <title>Add Band To Gig</title> <p class="h1">Add Band To Gig</p> There are no other bands associated with this gig<br> <br> <form name="add_gig" method="post" action="gigs.php?action=addband2"> <table cellspacing="5"> <tr> <td valign="top" align="right"><br><b>New Bands: </b></td> <td> <br> <!-- Placeholder for dynamic form contents --> <span id="cust" style="position:relative;"></span> <input type="button" value="+ Band" onclick="indexed=add_band(indexed)"> </td> </tr> <tr> <td colspan="2" align="center"> <br> <br> <!-- Dont Forget Hidden values" --> <input type="hidden" name="g_id" value="32"> <input type="button" onclick="history.back()" value="« Cancel"> <input type="submit" value="Submit Bands »"> </td> </tr> </table> </form></body></html>[/code] 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.