Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Calling method onClick of Jsp form Jsp

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.

like image 719
Abhishek Patil Avatar asked Dec 18 '22 10:12

Abhishek Patil


1 Answers

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
  • like image 137
    Jad Chahine Avatar answered Dec 28 '22 23:12

    Jad Chahine