Jump to content

Archived

This topic is now archived and is closed to further replies.

sanfly

getElementById('id').innerHTML

Recommended Posts

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">&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>[/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

Share this post


Link to post
Share on other sites
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,,

Share this post


Link to post
Share on other sites
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="&laquo; Cancel">
                    <input type="submit" value="Submit Bands &raquo;">
                </td>
            </tr>
        </table>
    </form>


</body>
</html>
[/code]

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.