Jump to content

getElementById('id').innerHTML


sanfly

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

  • 1 month later...
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]
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

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.