JavaScript Renaming Form Image Input Name

Question

I am developing this for use in Internet Explorer 8 (because at work we have to use it). I have a page that has a table withing a form. The table has a button to "clone" rows, "AddScheduleRow()". That part works good. Each row has a button to delete that row "DeleteRow(r)". That part works well too. I also have a script to rename/renumber each row, "RenumberRows()". It almost works good. I can rename the text fields (for example what was previously StartDate3 now becomes StartDate2). However, in each row is an input that is type="image" and it is named like you should with any input. The name of it is "StartDateCal". The problem is that during the renaming process, when it hits the image input (TheForm.StartDateCal[i].name = "StartDateCal" + TempCounter;), I get a JavaScript error "'TheForm.StartDateCal' is null or not an object". I cannot figure this one out and it's standing in the way of moving on.

What can I do to try to rename an < input type = image /> ?

Below is the necessary code:

HTML

<html>
    <head>
    </head>
    <body>
        <form name="UpdateSchedule" method="post" action="DoSchedule.asp">
            <input type="hidden" name="NumRows" value="0">
            <input type="hidden" name="RowsAdded" value="0">
            <table id="ClassScheduleTable">
                <tr id="ScheduleRow" style="display:none;">
                    <td>
                        <input type="text" name="RowNum" value="0" size="1" onclick="alert(this.name)">
                    </td>
                    <td>
                        <b>Start Date</b> <input type="text" name="StartDate" value="" onclick="alert(this.name);" size="8">&nbsp;
                        <input type="image" name="StartDateCal" src="http://www.CumminsNorthwest.com/ATT/Img/Calendar3.png" style="border-style:none;" onClick="alert('name = ' + this.name);return false;">
                    </td>
                    <td>
                        <input type="button" value="Del." name="DelRow" class="subbuttonb" onclick="DeleteRow(this);">
                    </td>
                </tr>
                <tr>
                    <td colspan="3" style="text-align:right">
                    <input type="button" value="Add Class Date" class="SubButton" onclick="AddScheduleRow();">
                    </td>
                </tr>
            </table>
        </form>
    </body>    
<script language="JavaScript">

JS

    var TheForm = document.forms.UpdateSchedule;
    var NumRows =0;
    var RowsAdded =0;
    function AddScheduleRow(){
        NumRows++;
        TheForm.NumRows.value = NumRows;
        RowsAdded++;
        TheForm.RowsAdded.value = RowsAdded;

        var TableRowId = "ScheduleRow";
        var RowToClone = document.getElementById(TableRowId);
        var NewTableRow = RowToClone.cloneNode(true);

        NewTableRow.id = TableRowId + NumRows ;
        NewTableRow.style.display = "table-row";

        var NewField = NewTableRow.children;

        for (var i=0;i<NewField.length;i++){
            var TheInputFields = NewField[i].children;
            for (var x=0;x<TheInputFields.length;x++){
                var InputName = TheInputFields[x].name;
                if (InputName){
                    TheInputFields[x].name = InputName + NumRows;
                    //alert(TheInputFields[x].name);
                }
                var InputId = TheInputFields[x].id;
                if (InputId){
                    TheInputFields[x].id = InputId + NumRows;
                //alert(TheInputFields[x].id);
                }
            }
        }

        var insertHere = document.getElementById(TableRowId);
        insertHere.parentNode.insertBefore(NewTableRow,insertHere);
        RenumberRows();
    }

    AddScheduleRow();

    function DeleteRow(r){
        var i=r.parentNode.parentNode.rowIndex;
        document.getElementById("ClassScheduleTable").deleteRow(i);
        NumRows--;
        TheForm.NumRows.value = NumRows;
        RenumberRows();
    }

    function RenumberRows(){
        var TempCounter = 0;
        for (var i=0;i<=RowsAdded;i++){
            if (TheForm.RowNum[i]){
                TempCounter++;
                TheForm.RowNum[i].name = "RowNum" + TempCounter;
                TheForm.RowNum[i].value = TempCounter;
                TheForm.StartDate[i].name = "StartDate" + TempCounter;
                TheForm.StartDateCal[i].name = "StartDateCal" + TempCounter;
            }
        }
    }


</script>

</html>

redDevil · Accepted Answer · 2012-01-10 20:51:56Z

0

might be to do with your DTD,

try HTML4 Strict:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

answered Jan 10, 2012 at 20:51

redDevil

1,91917 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tveng · Accepted Answer · 2012-01-10 21:27:41Z

0

You can use

document.getElementsByName('StartDateCal')[i].name = "StartDateCal" + TempCounter;

instead of

TheForm.StartDateCal[i].name = "StartDateCal" + TempCounter;

answered Jan 10, 2012 at 21:27

tveng

2002 silver badges9 bronze badges

2 Comments

Soren Over a year ago

That works. Not sure why ot works that way instead of treating it like a normal form element, but it works.

tveng Over a year ago

Nice to know :). But you may better use the solution to set your doctype like achusonline wrote it. You just have to insert that line to the top of your document. Also before the <html>-tag. i tried that solution and it also works. Its just seem to be the cleaner solution.

Collectives™ on Stack Overflow

JavaScript Renaming Form Image Input Name

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest