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:
PHP Code:
    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:
HTML Code:
<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;">&nbsp;</td>
    </tr>
    
    <tr class="Row">
        <td style="width:10%; padding:2px 2px 2px 16px;">
            <span id="changeCompositeSectionOrder_9">1</span>&nbsp;
            <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>&nbsp;
            <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">&nbsp;</td>
    </tr>
</table>