views:

24

answers:

1

I have a button that, when pressed, will add a new HTML row. Within these rows are two combo boxes: cboOffsetGroup and cboOffsetType. Depending on what is selected in cboOffsetGroup, the options for cboOffsetType will change. I do this using a refreshPage() function in Javascript. It works fine in the first row, but in the subsequently added rows, I cannot figure out how to call the refreshPage() funciton so that I can populate the appropriate options for cboOffsetType. Any help on this is appreciated. Note that I'm pretty much a novice at this, and realize this may not be the best code, but it's what I have to work with. Thanks!

 <%
Dim CN, RS, vIndexOffset, vOffsetGroup

Set CN = GetDataConnection

vIndexOffset = Request.Form("txtOffsetIndex")
%>

<body>
<form name="frmExceptionInput" id="frmExceptionInput" method="post">
<input type="hidden" name="txtAction" id="txtAction" value="">

<table width="50%" id="tblOffsetDetail">
<tbody>
    <tr>
        <td colspan="2">
        <input type="button" class="button" value= "Add New Item" id="btnNewOffsetItem" name="btnNewOffsetItem" onClick="javascript:addNewOffsetItem();">
        <input type="hidden" id="txtOffsetIndex" name="txtOffsetIndex" value="1">
    </td>
    </tr>
    <tr>
        <td>
            <p>
            <select name="cboOffsetGroup1" id="cboOffsetGroup1" onChange="refreshPage();">
                <option value="0"></option>
                <%
                Set RS = CN.Execute ("spSelectGroup")
                If Not RS.EOF Then
                    Do While Not RS.EOF
                        %>
                        <option value='<%= RS("offsetGroupID")%>'<%If RS("offsetGroupID") = Request.Form("cboOffsetGroup" & vIndexOffset) Then Response.Write " selected"%>><%= RS("offsetGroup")%></option>    
                        <%
                        'Get next record
                        RS.MoveNext
                    Loop
                End If  
                %>
            </select>
            </p>        
        </td>
        <td>
            <p>
            <select name="cboOffsetType1" id="cboOffsetType1">
            <%
            'If the user changes the combo box selected, set vOffsetGroup = the value selected by the user on the page.
            If Request.Form("txtAction") = "Change Selection" Then
                vOffsetGroup = Request.Form("cboOffsetGroup" & vIndexOffset)
            End If
            %>  
            <option value="0"></option>
            <%
            Set RS = CN.Execute ("spSelectType @vOffsetGroup='" & vOffsetGroup & "'")
            If Not RS.EOF Then
                Do While Not RS.EOF
                    %>
                    <option value='<%= RS("offsetItemTypeID")%>'<%If Request.Form("cboOffsetType1") = RS("offsetItemTypeID") Then Response.Write "selected"%>><%= RS("offsetItemType")%></option>
                    <%
                    'Get next record
                    RS.MoveNext
                Loop
            End If
            %>
            </select>
            </p>
        </td>
    </tr>
</tbody>
</table>

</form>
</body>

<script language="javascript">

function refreshPage()
{
    var refreshPage = document.getElementById("frmExceptionInput");

    //If this function is called, the value of txtAction will become "Change Selection."
    document.getElementById("txtAction").value = "Change Selection";

    refreshPage.submit();
}

//Display additional rows.
function addNewOffsetItem()
{
    var iX = document.getElementById("txtOffsetIndex").value;
    iX ++;
    document.getElementById("txtOffsetIndex").value = iX;

    var tbl = document.getElementById("tblOffsetDetail").getElementsByTagName("TBODY")[0];
    var tr = document.createElement("TR");
    tbl.appendChild(tr);

    //cboOffsetGroup1
    var tdOffsetGroup = document.createElement("TD");
    tr.appendChild(tdOffsetGroup);

    var p = document.createElement("P");
    tdOffsetGroup.appendChild(p);

    var cboOffsetGroup = document.createElement("select"); 
    p.appendChild(cboOffsetGroup);

    cboOffsetGroup.id = "cboOffsetGroup" + iX;
    cboOffsetGroup.setAttribute('name','cboOffsetGroup' + iX);

    var cboOffsetGroup1 = document.getElementById("cboOffsetGroup1");
    var i = 0;

    for (i = 0; i < cboOffsetGroup1.children.length; i++)
        {
            var opt = document.createElement("option");
            opt.value = cboOffsetGroup1 [i].value;
            opt.innerText = cboOffsetGroup1 [i].innerText;
            cboOffsetGroup.appendChild(opt);
        }   

    //cboOffsetType1
    var tdOffsetType = document.createElement("TD");
    tr.appendChild(tdOffsetType);

    var p = document.createElement("P");
    tdOffsetType.appendChild(p);

    var cboOffsetType = document.createElement("select"); 
    p.appendChild(cboOffsetType);

    cboOffsetType.id = "cboOffsetType" + iX;
    cboOffsetType.setAttribute('name','cboOffsetType' + iX);

    var cboOffsetType1 = document.getElementById("cboOffsetType1");
    var i = 0;

    for (i = 0; i < cboOffsetType1.children.length; i++)
        {
            var opt = document.createElement("option");
            opt.value = cboOffsetType1 [i].value;
            opt.innerText = cboOffsetType1 [i].innerText;
            cboOffsetType.appendChild(opt);
        }
}

</script>
</html>
+1  A: 

You're better of using JQuery for this sort of task.

http://api.jquery.com/add/

JeremySpouken
I can look into this for future reference in new projects, but do not really have time to devote to it for this project. Am looking for a solution within the code I currently have.
baldwingrand