Calling method onClick of Jsp form Jsp

Abhishek Patil picture Abhishek Patil · Jan 11, 2017 · Viewed 53.6k times · Source

I wish to call a method in JSP onClick, the method is on the same JSP inside scriptlet.

How should I archive this?

<%@ page import="java.io.*,java.lang.*,java.util.*,java.net.*,java.util.*,java.text.*"%>
<%@ page import="javax.activation.*,javax.mail.*,org.apache.commons.*"%>
<%@ page import="javax.servlet.http.*,javax.servlet.*"%>


<%!
    public String sendMail(String to, String sub, String msg) {
        String res = null;
        System.out.println("HI");       
        return res;
    }%>

<html>
<head>
<title>Send Email using JSP</title>
</head>
<body>
    <center>
        <h1>Send Email using JSP</h1>
    </center>
    <form>  
        <label>Email To</label><br />       
            <input type="text" name="to" /><br /> 
        <label>Subject</label><br />        
            <input type="text" name="sub" /><br /> 
        <label for="body">Message</label><br />
            <input type="text" name="msg" /><br /> 
        <input type="submit" onClick="sendMail( to, sub, msg )"/>
    </form>
</body>
</html>


Note

The methods name is "sendMail", It's called on submit button I want to do the whole code in JSP only.

Answer

Jad Chahine picture Jad Chahine · Jan 11, 2017

The onclick event occurs when the user clicks on an element. This attribute has the ability to call JS functions (front end)

In your case, you want to call a JAVA function (server side) so the best way is to move the java code to a servlet and use it.

Anyway if you want to keep the JAVA function in the jsp, you can do this via ajax in this way

<script type="text/javascript">
        $(document).ready(function() {
            $('#sendMailBtn').click(function (){
                $.ajax({
                    type: "post",
                    url: "/path", 
                    data: "email=" + $('#email').val() + "&subject="+$('#subject').val() + "&msg=" + $('#msg').val(),
                    success: function(msg){      
                        //
                    }
                });
            });
        });
 </script>

AJAX is a developer's dream, because you can

  • Update a web page without reloading the page
  • Request data from a server - after the page has loaded
  • Receive data from a server - after the page has loaded
  • Send data to a server - in the background
  • Check the full code here

    <%@ page import="java.io.*,java.lang.*,java.util.*,java.net.*,java.util.*,java.text.*"%>
    <%@ page import="javax.activation.*,javax.mail.*,org.apache.commons.*"%>
    <%@ page import="javax.servlet.http.*,javax.servlet.*"%>
    
    
    <%!
        public String sendMail(String to, String sub, String msg) {
            String res = null;
            System.out.println("HI");       
            return res;
        }
    %>
    
    <html>
        <head>
            <title>Send Email using JSP</title>
            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
        </head>
    
        <body>
            <center>
                <h1>Send Email using JSP</h1>
            </center>
            <form>  
                <label>Email To</label><br />       
                <input id="email" type="text" name="to" /><br /> 
                <label>Subject</label><br />        
                <input id="subject" type="text" name="sub" /><br /> 
                <label for="body">Message</label><br />
                <input id="msg" type="text" name="msg" /><br /> 
                <input id="sendMailBtn" type="submit" />
            </form>
        </body>
    
        <script type="text/javascript">
            $(document).ready(function() {
                $('#sendMailBtn').click(function (){
                    $.ajax({
                        type: "post",
                        url: "/path", 
                        data: "email=" + $('#email').val() + "&subject="+$('#subject').val() + "&msg=" + $('#msg').val(),
                        success: function(msg){      
                            //
                        }
                    });
                });
            });
        </script>
    </html>
    

    For more information check

  • AJAX Introduction: http://www.w3schools.com/xml/ajax_intro.asp
  • onclick Event: http://www.w3schools.com/tags/ev_onclick.asp