Javascript problem

[dudskie37]

Hi Gurus,I have this problem that I was not able to solve for many hours already. So, I decided to post this issue on this forum:1. I would like to come up when I click the link "change order", all the order column should show the textbox with the order value.2. I would like to come up when I change the order value, it should not accept duplicate like 2 and other one is 2 too.Javascript code so far:

    function showChangeCompositeSectionOrderForm(rcsoID)    {        getElement('changeCompositeSectionOrder_' + rcsoID).style.display = "none";        getElement('changeCompositeSectionOrderLink_' + rcsoID).style.display = "none";        getElement('changeCompositeSectionOrderForm_' + rcsoID).style.display = "";        getElement('changeCompositeSectionOrderSave_' + rcsoID).style.display = "";    }

Here is my HTML:

<table width="100%" cellspacing="0" cellpadding="2" border="0">    <tr class="Header">        <td style="width:10%;">Order</td>        <td style="width:30%;">Section Name</td>        <td style="width:10%; text-align:center;">Custom</td>        <td style="width:50%; text-align:center;"> </td>    </tr>        <tr class="Row">        <td style="width:10%; padding:2px 2px 2px 16px;">            <span id="changeCompositeSectionOrder_9">1</span>             <span style="display:none;" id="changeCompositeSectionOrderForm">                <input type="text" size="2" value="1" id="rcso_order_9" name="rcso_order_9">            </span>        </td>        <td style="width:30%;">Cover Section</td>                <td style="width:10%; text-align:center;">no</td>                <td style="width:50%; text-align:center;">            <a href="javascript:verifyRemoveSectionType(getElement('frmMain'), '9', '179', '283', '9');" class="smallLinks">remove</a> | <a href="javascript:showChangeCompositeSectionOrderForm('9');" id="changeCompositeSectionOrderLink_9" class="smallLinks">change order</a>            <span style="display:none;" id="changeCompositeSectionOrderSave_9">                <a href="javascript:verifyCompositeSectionOrderSave(getElement('frmMain'), '9');" class="smallLinks">save</a>            </span>        </td>    </tr>        <tr class="Row">        <td style="width:10%; padding:2px 2px 2px 16px;">            <span id="changeCompositeSectionOrder_10">2</span>             <span style="display:none;" id="changeCompositeSectionOrderForm">                <input type="text" size="2" value="2" id="rcso_order_10" name="rcso_order_10">            </span>        </td>        <td style="width:30%;">Preface Section</td>                <td style="width:10%; text-align:center;">no</td>                <td style="width:50%; text-align:center;">            <a href="javascript:verifyRemoveSectionType(getElement('frmMain'), '10', '179', '283', '10');" class="smallLinks">remove</a> | <a href="javascript:showChangeCompositeSectionOrderForm('10');" id="changeCompositeSectionOrderLink_10" class="smallLinks">change order</a>            <span style="display:none;" id="changeCompositeSectionOrderSave_10">                <a href="javascript:verifyCompositeSectionOrderSave(getElement('frmMain'), '10');" class="smallLinks">save</a>            </span>        </td>    </tr>    <tr class="Row">        <td colspan="4"> </td>    </tr></table>

[dsonesuk]

You should be using document.getElementById(), not getElement().