How to send across a parameter from a jsp page to a servlet?

Question

I have a horizontal navigation menu in a JSP page and a submit button . I want to send the selected value from the navigation menu to a servlet . How to do that and how to get that value in the corresponding servlet ? The problem is in my solution the form is not being submitted that is the servlet displaying the value in HTML is not loading .

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Welcome</title>
<style type="text/css">
    * {
    margin:0px;
    padding:0px;
}

body {
    background-color:#f7f0f0;
    font-family:Verdana;
    padding:50px;   /*all four paddings are 50px*/
}

h1 {
    text-align:center;
    border-bottom:2px solid #666;
    padding-bottom:10px;
}

ul#mainmenu,ul.sub1,ul.sub2,ul.sub3,ul.sub4,ul.sub5 {
    list-style-type:none;
    font-size:15px;
}

ul#mainmenu {
    padding-top:10px;
}

ul#mainmenu li{
    float:left;
    position:relative;
    width:350px;
    text-align:center;
    margin-right:3px;   /*renders a right margin of 5 pixels around the list items */
}

ul#mainmenu a {
    text-decoration:none;
    display:block;
    line-height:25px;   /*gives a vertical centering*/
    width:350px;    /*same as the width of the list items*/
    height:25px;
    background:linear-gradient(to right,#bdc2ed,white,#bdc2ed); /*create a color gradient to the right*/
    border-radius:5px;
    /*outline:1px solid red;*/  /*takes up the space outside of the elements's container (i.e. in this case the outside of the list items*/
}

ul#mainmenu .sub1 li {
    margin-top:2px;
}

ul#mainmenu .sub1 a {
    border:1px solid green; /*takes up the space outside of the content itself i.e. the anchor tags . That's where the border radius comes into the picture*/
}

ul#mainmenu .sub2 li,.sub3 li,.sub4 li,.sub5 li {
    margin-left:20px;
}

ul#mainmenu li:hover > a {
    text-transform:uppercase; /*select and style every <a> element where the the par */
    background:linear-gradient(to right,blue,white,blue);
    border:1px solid black;
}

ul#mainmenu li:hover a:hover {
    background:linear-gradient(to right,#718ce5,white,#718ce5);
}

ul#mainmenu ul.sub1 {
    display:none;
    position:absolute;
    top:26px;
    left:0px;
}

ul#mainmenu ul.sub2 {
    display:none;
    position:absolute;
    top:-2px;
    left:335px;
}

ul#mainmenu ul.sub3 {
    display:none;
    position:absolute;
    top:-2px;
    left:335px;
}

ul#mainmenu ul.sub4 {
    display:none;
    position:absolute;
    top:-2px;
    left:335px;
}

ul#mainmenu ul.sub5 {
    display:none;
    position:absolute;
    top:-2px;
    left:335px;
}

ul#mainmenu li:hover ul.sub1 
{
    display:block;
}

ul#mainmenu ul.sub1 li:hover ul.sub2
{
    display:block;
}

ul#mainmenu ul.sub2 li:hover ul.sub3
{
    display:block;
}

ul#mainmenu ul.sub2  li#submenu_shirts:hover ul.sub4
{
    display:block;
}

ul#mainmenu ul.sub1 li#submenu_shoes:hover ul.sub5
{
    display:block;
}

#submit_button 
{
    position:relative;
}


</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script type="text/javascript">
    $(document).ready(function () {

        $("#submit_button").prop("disabled", true);

        $("ul#mainmenu").on("click", function (event) {
            $("#submit_button").prop("disabled", false);
            $("form").submit();
        });

        $("form").submit(function (event) {
            alert("Form being submitted--Please Wait!");
            event.preventDefault();
        });
    });
</script>
</head>
<body>

<h1>Welcome</h1>

<form action="/servlets/MyFirstServlet" method="post">
<div style="width:auto;height:200px">
<ul id="mainmenu">
<li><a href="#">Home</a></li>

<li><a href="#">Products</a>
    <ul class="sub1">
        <li><a href="#">Clothing</a>
            <ul class="sub2">
                <li><a href="#">T-Shirts</a>
                    <ul class="sub3">
                            <li><a href="#">Polo</a></li>
                            <li><a href="#">V-Neck</a></li>
                            <li><a href="#">Henley</a></li>
                    </ul>
                </li>
                <li id="submenu_shirts"><a href="#">Shirts</a>
                    <ul class="sub4">
                            <li><a href="#">Half-Sleeve</a></li>
                            <li><a href="#">Full-Sleeve</a></li>
                    </ul>
                </li>
                <li><a href="#">Jeans</a></li>
                <li><a href="#">Trousers</a></li>
            </ul>
        </li>
        <li id="submenu_shoes"><a href="#">Shoes</a>
            <ul class="sub5">
                <li><a href="#">Sports-Shoes</a></li>
                <li><a href="#">Formal-Shoes</a></li> 
            </ul>
        </li>
        <li><a href="#">Accessories</a></li>
    </ul>
</li>

<li><a href="#">Contact Us</a></li>
</ul>

</div>

<div style="text-align:center">
<input type="submit" value="Post" id="submit_button" style="margin:0px auto 0px auto"/>
</div>

</form>

</body>
</html>

Related: http://stackoverflow.com/q/23713329/1065197. In short, you're not sending any parameter because there's no `input` nor `select` tag component in your HTML that sends any data. — Luiggi Mendoza, May 19 '14 at 06:42
Are you getting this alert *Form being submitted--Please Wait!* What is `event.preventDeafault();`. Not a valid one. It should be `event.preventDefault();` — Braj, May 19 '14 at 06:45
Does that mean I cant send my selected list item value to my servlet ? without having it in an input field? — recmach, May 19 '14 at 07:01

score 2 · Accepted Answer · answered May 19 '14 at 06:47

2

Instead of handling the navigation menu in forms , you could rather use the query string and send the selected value through the URL like this ,

  <a href = "URL">Menu name</a>

For e.g,

        <li><a href="/servlets/MyFirstServlet?vName=Jeans">Jeans</a></li>
        <li><a href="/servlets/MyFirstServlet?vName=Trousers">Trousers</a></li>

so that in your servlet using getParameter() method get the value of vName variable, like this ,

       String menuName=request.getParameter("Vname");

You can also pass the dynamic values through el in your query string .

Hope this helps!!

answered May 19 '14 at 06:47

Santhosh

8,181
4
29
56

Thats a good way though to do it ... :) – recmach May 19 '14 at 07:05
You could use the same `variable` so that the value alone changes , that could be retrieved in the server side – Santhosh May 19 '14 at 07:13

score 1 · Answer 2 · answered May 19 '14 at 06:46

1

If you want to add something with jquery before form submission, you can try adding attributes like this -

$("ul#mainmenu").on("click", function (event) {
    $("#submit_button").prop("disabled", false);
    var newAttribute = $('<input>').prop('type','hidden')
                                   .prop('name','someName')
                                   .val('someVal');
    $(form).append(newAttribute);
    $("form").submit();
});

answered May 19 '14 at 06:46

Adil Shaikh

44,509
17
89
111

Yes but can I add the selected value from my navigation menu and send it to my servlet? – recmach May 19 '14 at 07:04
there is no form input element in your menu ? – Adil Shaikh May 19 '14 at 07:08
No only a form input type button to do it ... can it be done this way ? Or should I have something explicitly ...? But anyways how to select and send the value in your way using jQuery from the navigation menu? – recmach May 19 '14 at 07:10
What kind of parameter you are trying to send ? may be an example of such attribute. – Adil Shaikh May 19 '14 at 07:12
supoose if I select shoes from that drop down I want to send that value "Shoes" or accordingly – recmach May 19 '14 at 07:20
Then you can simply replace `someVal` with the text of clicked element , if you have clicked any anchor then you can do `$(this).text()`, this will send the clicked text with parameter name `someName` (_you can change someName to whatever you like_) – Adil Shaikh May 19 '14 at 07:29

How to send across a parameter from a jsp page to a servlet?

2 Answers2