html onclick run javascript function not working

Question

I'm trying to run a javascript menthod on an input="image" in html. My code in my html looks like this:

onclick="manageHandlers('Unassign'); document.getElementsByName('manageHandlers')[0].submit(); "

and in my javascript the method is like this:

function manageHandlers(parameter){
   alert("It's working: "+parameter);
}

Is there something I'm doing wrong? I could sware this worked yesterday but today it's just not doing anything.

Thanks for looking at this!

full html code:

    <%-- 
    Document   : pathologist
    Created on : 16 Nov 2011, 09:53:58 AM
    Author     : dean.grobler
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet"%>
<%@ taglib uri="http://liferay.com/tld/aui" prefix="aui" %>
<%@ taglib uri="http://liferay.com/tld/ui" prefix="liferay-ui" %>

<%@ page import="javax.portlet.*"%>
<%@ page import="co.za.lancet.medelogget.*" %>
<%@ page import="java.util.ArrayList" %>
<%@ page import="com.liferay.portal.kernel.servlet.*" %>
<%@page import="com.liferay.portal.kernel.util.Validator" %>

<portlet:defineObjects />

<%
    String editable = request.getParameter("editable");
    String selectedValue = request.getParameter("selectedValue");
    int selectedIndex = 0;
    if (selectedValue != null) {
        selectedIndex = Integer.parseInt(selectedValue);
    }
    ArrayList<String> data = tableData.getTableData(selectedIndex, "consumers", "code");
    String AvailableJavaScript = tableData.consumersAvailableHandlers(data.get(0));  
    String AssignedJavaScript = tableData.consumersAssignedHandlers(data.get(0)); //data.get(0) is the whereclause    

%>

<!-- -------------------------Interface Starts here------------------------- -->

<aui:layout>
    <form name="consumerDetails" action="<portlet:actionURL ><portlet:param name="consumers" value="consumers"/></portlet:actionURL>" method="post">
        <input type="hidden" value="consumers" name="formType" />
        <input type="hidden" value="<%=selectedValue%>" name="selectedValue" />



    <input type="hidden" value="" id="button" name='button' />
    <aui:column columnWidth="50">
        <h3>
            <%if (editable.equals("")) {%>
            Edit Consumer
            <%} else {%>
            Consumer Details 
            <%}%>
            <%%>
        </h3>   
        <div class="horizontalRules"><hr class></div>
        <div id="successAndErrorMessages"></div>

        <table width="100%">
            <tr height="35px"><td width="25%">Code:</td><td><input type="text" value="<%=data.get(0)%>" name="code"  class="textBoxes" <%=editable%>></td></tr>
            <tr height="35px"><td width="25%">Description:</td><td><input type="text" value="<%=data.get(1)%>" name="description"  class="textBoxes" <%=editable%>></td></tr>           
        </table>
    </aui:column>    

    </form>
    </aui:layout>

    <!-- --------------------Handler rules section---------------------- -->        
    <%if (editable.equals("")) {%>

    <aui:layout>
        <aui:column columnWidth="100">
            <h3>Manage Handler Rules</h3>
            <div class="horizontalRules"><hr class></div>                        
            </aui:column>
        </aui:layout>

    <aui:layout>

        <form name="manageHandlers" id="formType" action="<portlet:actionURL ><portlet:param name="manageHandlers" value="manageHandlers"/></portlet:actionURL>" method="post">

            <!-- index selected in handlers tables -->
            <input type="hidden" name="selectedHandler" id="selectedHandler" /> 
            <input type="hidden" value="" id="handlerButton" name='handlerButton' />
            <input type="hidden" value="" id="button" name='button' />
            <input type="hidden" value="" id="tableType" name='tableType' />
            <input type="hidden" value="manageHandlers" name="formType" />

            <table width="100%">
                <tr><td width="35%"><table width="100%">
                            <tr>
                                <td><h4 style="margin-bottom: 10px;">Available Rules</h4></td>
                            </tr>
                            <tr>
                                <td><div class="availableTable" id='available_div'></div></td>
                            </tr>
                        </table></td>

                    <td width="15%"><div class="manageHandlersButtons1">
                            <table width="100%">
                                <tr>
                                    <td><h4>Fatal Error:</h4></td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox" id="fatal" name="fatal" class="manageHandlersCheckbox" value="1" /></td>                                        
                                </tr>
                                <tr>
                                    <td><input type="image" id="button" value="Assign" src="<%=renderRequest.getContextPath()%>/Images/rightarrow.png" alt="Assign Selected Rule" class="imgAssignUnassign" onclick="if(manageHandlers('Assign')){ document.getElementsByName('manageHandlers')[0].submit(); }" /></td>
                                </tr>
                                <tr>
                                    <td><input type="image" id="button" value="Unassign" src="<%=renderRequest.getContextPath()%>/Images/leftarrow.png" alt="Unassign Selected Rule" class="imgAssignUnassign" onclick="manageHandlers('Unassign'); document.getElementsByName('manageHandlers')[0].submit(); " /></td>
                                </tr>
                            </table>
                        </div></td>

                    <td width="35%"><table width="100%">
                            <tr>
                                <td><h4 style="margin-bottom: 10px;">Assigned Rules</h4></td>
                            </tr>
                            <tr>
                                <td><div class="assignedTable" id='assigned_div'></div></td>
                            </tr>
                        </table></td>

                    <td width="15%"><div class="manageHandlersButtons2">
                            <table width="100%">
                                <tr>
                                    <td><input type="button" id="button" name="MoveUp" value="MoveUp" style="width: 85px;" class="manageHandlersMvUp" onclick="if(manageHandlers('Move up')){ document.getElementsByName('manageHandlers')[0].submit(); }" /></td> 
                                </tr>
                                <tr>
                                    <td><input type="button" id="button" name="MoveDown" value="MoveDown" style="width: 85px;" class="manageHandlersMvDwn" onclick="if(manageHandlers('Move down')){ document.getElementsByName('manageHandlers')[0].submit(); }" /></td>
                                </tr>
                            </table></div>

                    </td></tr>
            </table>
        </form>                                

    </aui:layout>        

    <div class="horizontalRules2"><hr class></div>          

    <%}%>

    <table width="100%">
        <tr>
            <td width="25%"><input type="button" value="Back" style="width: 80px;" class="leftButtons"  onClick="document.getElementById('button').value='Back'; document.getElementsByName('consumerDetails')[0].submit()" /></td>

            <!-- if not editable, don't display this button -->
            <% if (editable.equals("")) {%>                   
            <td><input type="button" value="Save" style="width: 80px;" class="rightButtons" onClick="if (addEntryValidator('Save','consumers','edit')) {document.getElementsByName('consumerDetails')[0].submit()}" /></td>                    
                <% }%>
        </tr> 
    </table>

    <!-- JavaScript Tables -->    
    <script type="text/javascript"><%= AssignedJavaScript%></script>
    <script type="text/javascript"><%= AvailableJavaScript%></script>

Have you checked that your javacript file is included at the top of the page. Do you get any javascript errors in your browser? — CSharpened
– CSharpened, Commented Jan 27, 2012 at 9:36
I'm working with a jsp in Liferay portal, works for all my other pages that I did. And I did exactly the same, but for this one it's just not running the function for some reason. No js errors in browser no — user818700
– user818700, Commented Jan 27, 2012 at 9:38
Most likely a problem with the JS not being loaded correctly. See this fiddle: jsfiddle.net/BQ9t8 — AndersDaniel
– AndersDaniel, Commented Jan 27, 2012 at 9:42
Thanks Daniel.. Maybe I'll try restarting my server ("have you tried switching it off and on again?.."). Would that maybe help? — user818700
– user818700, Commented Jan 27, 2012 at 9:45

Benny Tjia · Accepted Answer · 2012-01-27 09:56:56Z

3

This is just wrong:

onclick="manageHandlers('Unassign'); 
document.getElementsByName('manageHandlers')[0].submit();"

I have never seen anything like that before..or if it is indeed possible and I do miss something, then I bet it's rarely done because it's a bad practice to not separate your js codes from content layer (HTML).

Anyway, onclick is an event handler. You normally assign a function that gets executed when clicking happens.

If I were you I would not probably do inline javascript. But if you really want to keep it inline, then you could try this:

function manageHandlers(parameter){
    alert('blabla' + parameter);
    document.getElementsByName('manageHandlers')[0].submit();
}

and onclick, you can do just onclick="manageHandlers('Unassign');" hope that helps..

answered Jan 27, 2012 at 9:56

Benny Tjia

4,88310 gold badges42 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

html onclick run javascript function not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related