Link not working

I have the below code in the xsl file
Link to config does not work.

    <script LANGUAGE="JavaScript" type="text/javascript" nonce="{$vNonce}">
          function ChangeMenu(servlet, type) {
          document.MainForm.disp.value     = 1;
          document.MainForm.abaction.value = type;
          document.MainForm.action         = servlet;
          document.MainForm.submit();
      }
    </script>
    <script type="text/javascript" nonce="{$vNonce}">
          document.addEventListener('DOMContentReady', function () {
              document.getElementById("config").addEventListener('click', ChangeMenu('Admin','config'), false);
            });
    </script>
<a class="clsMenuNormal" href="#" id="config">Config</a>
Newton21205Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Shalu MCommented:
Try this -

 <script language="JavaScript" type="text/javascript"  nonce="{$vNonce}">
        function ChangeMenu(servlet, type) {
            alert('success');
            //document.MainForm.disp.value = 1;
            //document.MainForm.abaction.value = type;
            //document.MainForm.action = servlet;
            //document.MainForm.submit();
        }
 
       function init() {
            document.getElementById("config").addEventListener("click", ChangeMenu('Admin', 'config'));
        }

        window.addEventListener('load', init);

</script>
Newton21205Author Commented:
i do get a success alert box when the page loads. But after loading when the link is clicked the link does not work.
# is added to the url and nothing happens
http://localhost:8080/abc/servlet/Admin#
Leonidas DosasCommented:
What is the Mainform property? I think you don't declare right the MainForm property.If you post the HTML code of the form I think that we can be more efficient to our answers.
Get Blueprints for Increased Customer Retention

The IT Service Excellence Tool Kit has best practices to keep your clients happy and business booming. Inside, you’ll find everything you need to increase client satisfaction and retention, become more competitive, and increase your overall success.

Download your eBook!
Newton21205Author Commented:
MainForm is the form name. It has multiple links defined using xsl if else.
MainForm calls the menu.xsl <xsl:call-template name="menu"/> template which has the javascript for function ChangeMenu

    <script type="text/javascript" nonce="{$vNonce}" >
          document.addEventListener('DOMContentReady', function () {
              window.document.getElementById("config").addEventListener('click', ChangeMenu('Admin','config'));
            });
    </script>
    <script type="text/javascript" nonce="{$vNonce}" >
          document.addEventListener('DOMContentReady', function () {
              document.getElementById('receipt').addEventListener('click', ChangeMenu('Admin','receipt'));
            });
    </script>

    <body bgcolor="#ffffff" topmargin="0" marginheight="0" leftmargin="0" marginwidth="0" rightmargin="0" bottommargin="0">
<xsl:call-template name="menu"/>
      </body></html>
</xsl:template>
<xsl:template name="main">
    <form name="MainForm" action="{$servlet_loc}Admin" method="post">
    <input type="hidden" name="abaction" value=""/>
    <table align="center" width="500">
    <tr><td class="pageTitleFont" valign="middle">Main Menu</td></tr>
    <tr height="5"><td></td></tr>
    <tr><td align="center">
        <table class="tablebox3" align="center" width="{$vWidth}" cellpadding="1" cellspacing="0" border="0">
            <tr>
                <td colspan="6" class="reportheader">Settings</td>
            </tr>
            <tr>
                <td align="center" >
                    <table>
                        <tr align="center">
                                  <td><a href="#" id="config"><img src="{$page_loc}images/details.gif" align="absmiddle" height="75" width="75" border="0"/>Config</a></td>
                        </tr>
                        <tr align="center">
                            <td class="clsMenuNormal"><a class="clsMenuNormal" href="#" id="config">Config</a></td>
                        </tr>
                    </table>
                <td align="center">
                    <xsl:if test="$vRole!='4'">
                    <table>
                        <tr align="center">
                            <td><a href="#" id="emailreceipt"><img src="{$page_loc}images/receipt.gif" align="absmiddle" height="75" width="75" border="0"/>Receipt</a></td>
                        </tr>
                        <tr align="center">
                            <td class="clsMenuNormal"><a class="clsMenuNormal" href="#" id="receipt">Receipt</a></td>
                        </tr>
                    </table>
                    </xsl:if>
                </td>
Leonidas DosasCommented:
AFter debugging you code I saw he following bugs-mistakes and I suggect these:

1:You use two+two elements with the same id (config-receipt).So when you target the element in your js code via document.getElementBuId you get an array with two key-values.I erase one id=config and one id=receipt element.
2.It's better to use JQuery so in my code you will see a JQuery code that is more handfull for you
3.You are using "DOMContentReady" event listener.There's no DOMContentReady event.You can use DOMContentLoaded.Ι suggest you to use Jquery $(document).ready() function.
4.In your ChangeMenu function you have the document.MainForm.disp.value = 1; statement. The disp returns undefined in my console, but when i wrote  document.MainForm.value = 1; I didn't have error or undefined.
SO...
Add the Jquery library in the head of the document remove the two duplicate anchror elements (or set another id) and at the bottom of your code paste the follow code:

JQuery:

$(document).ready(function(){
function ChangeMenu(servlet, type) {           
  
            document.MainForm.display = 1;
            document.MainForm.abaction.value = type;
            document.MainForm.action = servlet;
            document.MainForm.submit();
        }
 
 $('#config').on('click', function(){  
   ChangeMenu('Admin','config');
 });


$('#receipt').on('click', function(){ 
  ChangeMenu('Admin','receipt');
});
});

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Newton21205Author Commented:
solution worked
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.