Jump to content


Photo

getElementById('id').innerHTML


  • Please log in to reply
3 replies to this topic

#1 sanfly

sanfly
  • Members
  • PipPipPip
  • Advanced Member
  • 344 posts
  • LocationNew Zealand

Posted 24 April 2006 - 11:07 PM

Hi, lets say i have the following form:

<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">&nbsp;&nbsp;<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="&raquo; Add Band &laquo;" onclick="add_band()">
</form>

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
If you're not part of the solution, you're part of the precipitate

#2 GBS

GBS
  • Members
  • PipPipPip
  • Advanced Member
  • 108 posts

Posted 25 April 2006 - 11:58 AM

Hi there,
Your code is OK using IE, but it doesn't work using Firefox,
You need to use the property:
document.getElementById(name).setAttribute("value",document.getElementById(name).value);
to make it work with FF,,

The code could be something like:
<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>
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,,
Sorry for my english,... I do my best, but sometimes,...
1st intention: understand the problem
2nd intention: try to solve it
3rd intention: try to understand how to solve it :)

#3 sanfly

sanfly
  • Members
  • PipPipPip
  • Advanced Member
  • 344 posts
  • LocationNew Zealand

Posted 25 April 2006 - 06:55 PM

Thanks mate, seems to be working :)
If you're not part of the solution, you're part of the precipitate

#4 sanfly

sanfly
  • Members
  • PipPipPip
  • Advanced Member
  • 344 posts
  • LocationNew Zealand

Posted 30 May 2006 - 10:19 AM

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?

<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="&laquo; Cancel"> 
                    <input type="submit" value="Submit Bands &raquo;">
                </td>
            </tr>
        </table>
    </form>


</body>
</html>

If you're not part of the solution, you're part of the precipitate




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users