Javascript issue

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;">&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>

  1. You don’t have a ) to match your ( in the getElement() function calls.
  2. You haven’t defined getElement()

Sorry felgall, here is the getElement function:


	function getElement(s_id)
	{
		if (document.all)
		{
			return document.all[s_id];
		}
		else
		{
			return document.getElementById(s_id);
		}
	}

But I would like to come up with the solution that when I click the link “change order”, it should show the textbox with order value of each row and when I click the save, it should verify that it has no duplicate order number. I am stuck on this.

How many Internet Explorer Four visitors do you have to need the document.all?

The rest of your code is a real mess as well. never use href="javascript - JavaScript should be attached to the click event (preferably using a listener) and if you don’t have an actual destination for the href then use a button tag instead.

If your separate ALL of the JavaScript out into its own file without jumbling any of it with the HTML then it will be easier to see what it is doing and much easier to make changes to it.