Calling a Javascript function with parameters from JSP

user1592470 picture user1592470 · Apr 30, 2013 · Viewed 8.1k times · Source

I have a form like this...

<aui:form action="<%= generateRuleURL.toString() %>" name="rulesForm" method="post">
<aui:button-row>
<aui:button type="button" id="End" value="End"  />
<aui:button type="button" id="And" value="And" />
<aui:button type="button" id="Or" value="Or" />
</aui:button-row>
</aui:form>

In a view jsp file.

And a JS like this...

document.getElementById( 'End' ).onclick = function()
{
    var x=document.forms["rulesForm"]["FirstRuleElement"].value;
    System.out.println("Prova : " + x);
    var y=document.forms["rulesForm"]["FirstRuleAttribute"].value;
    System.out.println("Prova : " + y);
    var z=document.forms["rulesForm"]["Operator"].value;
    System.out.println("Prova : " + z);
    alert("First name must be filled out");

    if (x==null || x=="" || y==null || y=="" || z==null || z=="")
    {
      alert("First name must be filled out");
      return false;
    }

    AUI().one("#<portlet:namespace/>rulesForm").action='<%= generateRuleURL.toString()%>';

    document.forms["rulesForm"].submit();
};

In submit.js file.

What I should do for calling this method from one of the buttons, and other methods for the others? I tried lot of thinks but this didn't function..

For example:

Calling a commonFunction js: onclick="commonFunction('End')" //End is a string to be passed as a parameter

and so on.. with no results!

Could someone give me a hand with this?

Answer

Prakash K picture Prakash K · Apr 30, 2013

Here are two ways you can do what you want to:

  1. One way is to put your javascript code in the view.jsp and use <portlet:namespace/> like this:

    <aui:script>
    document.getElementById('<portlet:namespace/>End').onclick = function()
    {
        var x=document.forms["<portlet:namespace/>rulesForm"]["<portlet:namespace/>FirstRuleElement"].value;
        System.out.println("Prova : " + x);
        var y=document.forms["<portlet:namespace/>rulesForm"]["<portlet:namespace/>FirstRuleAttribute"].value;
        System.out.println("Prova : " + y);
        var z=document.forms["<portlet:namespace/>rulesForm"]["<portlet:namespace/>Operator"].value;
        System.out.println("Prova : " + z);
        alert("First name must be filled out");
    
        if (x==null || x=="" || y==null || y=="" || z==null || z=="")
        {
          alert("First name must be filled out");
          return false;
        }
    
        AUI().one("#<portlet:namespace/>rulesForm").action='<%= generateRuleURL.toString()%>';
    
        document.forms["<portlet:namespace/>rulesForm"].submit();
    };
    </aui:script>
    

    We need to use <portlet:namespace/> since you are using liferay's aui tags like <aui:form> which prepends the <portlet:namespace/> to the name and id attribute.
    Also using <portlet:namespace/> ensures that id or name attributes of elements does not conflict with other elements on the page as mentioned by @OlafKock in his comment.

  2. Another way, if you want to use the javascript file submit.js then create a javascript function in that file:

    function submitMyForm(portletNamespace) {
    
        var x=document.forms[portletNamespace + "rulesForm"][portletNamespace + "FirstRuleElement"].value;
        System.out.println("Prova : " + x);
        var y=document.forms[portletNamespace + "rulesForm"][portletNamespace + "FirstRuleAttribute"].value;
        System.out.println("Prova : " + y);
        var z=document.forms[portletNamespace + "rulesForm"][portletNamespace + "Operator"].value;
        System.out.println("Prova : " + z);
        alert("First name must be filled out");
    
        if (x==null || x=="" || y==null || y=="" || z==null || z=="")
        {
          alert("First name must be filled out");
          return false;
        }
    
        AUI().one("#<portlet:namespace/>rulesForm").action='<%= generateRuleURL.toString()%>';
    
        document.forms[portletNamespace + "rulesForm"].submit();
    }
    

    Call this function from the view.jsp as:

    <aui:form action="<%= generateRuleURL.toString() %>" name="rulesForm" method="post">
        <aui:button-row>
            <aui:button type="button" id="End" value="End" onClick="submitMyForm('<portlet:namespace/>')" />
            <aui:button type="button" id="And" value="And" />
            <aui:button type="button" id="Or" value="Or" />
        </aui:button-row>
    </aui:form>
    

Hope this helps in going forward.