jquery Archives - Ebhor.com

How to get multiple checkbox value in javascript and JQuery

In many websites you find multiple check box form to select your interest, or to select multiple options.

That can be created by using HTML check box.

<input type="checkbox" name="Hobby" value="Painting" id="cb1">

1	<input type="checkbox" name="Hobby" value="Painting" id="cb1">

Here to make a input as a text box we need type="checkbox".

name is name given to text box

value property specifies what value a text box holds.

id is used to uniquely identify this text box in HTML Document.

Check It: <input type="checkbox" id="checkbox1" name="checkbox1" value="Ok">

1	Check It: <input type="checkbox" id="checkbox1" name="checkbox1" value="Ok">

To get this text box value we can use JavaScript.

To get element by Id we can use document.getElementById().

Inside getElementById() we pass the elements id.

in above code we can see that check box id is checkbox1

and to get value we can use value property of getElementById()

how to get checkbox value in javascript with getelementbyid()

var bike = document.getElementById("checkbox1"); if(bike.checked){ ele.push(bike.value); }

<!DOCTYPE html>
<html>
    <body>
        Check It: <input type="checkbox" id="checkbox1" name="checkbox1" value="Ok">
        <button onclick="getValue()">Get Value</button>
        <script>
            function getValue() {
              var x = document.getElementById("checkbox1").value;
              alert("value is "+x);
            }
        </script>
    </body>
</html>

<!DOCTYPE html>

<html>

<body>

Check It: <input type="checkbox" id="checkbox1" name="checkbox1" value="Ok">

<button onclick="getValue()">Get Value</button>

function getValue() {

var x = document.getElementById("checkbox1").value;

alert("value is "+x);

}

</script>

</body>

</html>

Try It

How to get multiple checkbox value in javascript with getElementById()

Here to select multiple check boxes we selected each check box one by one.

Select Element by id using document.getElementById().

then check checkbox is checked or not.

If checked then push in array.

<!DOCTYPE html>
<html>
    <body>
        <label>Check Which you have</label><br/>
        <input type="checkbox" id="checkbox1" name="bike" value="Bike"> Bike <br/>
        <input type="checkbox" id="checkbox2" name="car" value="Car"> Car   <br/>
        <input type="checkbox" id="checkbox3" name="home" value="Home"> Home <br/>
        <button onclick="getValue()">Get Value</button>
        <p id="p1"></p>
        <script>
            function getValue() {
             var ele=[]
              var bike = document.getElementById("checkbox1")
              if(bike.checked){
                    ele.push(bike.value);
             }
             var car = document.getElementById("checkbox2")
              if(car.checked){
                    ele.push(car.value);
             }
             var home = document.getElementById("checkbox3")
              if(home.checked){
                    ele.push(home.value);
             }
               if(ele.length>0){
                document.getElementById("p1").innerHTML = ele;
               }
               else{
               document.getElementById("p1").innerHTML = "You Dont have any thing";
               }
             }
             
             
        </script>
    </body>
</html>

<!DOCTYPE html>

<html>

<body>

<label>Check Which you have</label><br/>

<button onclick="getValue()">Get Value</button>

function getValue() {

var ele=[]

var bike = document.getElementById("checkbox1")

if(bike.checked){

ele.push(bike.value);

}

var car = document.getElementById("checkbox2")

if(car.checked){

ele.push(car.value);

}

var home = document.getElementById("checkbox3")

if(home.checked){

ele.push(home.value);

}

if(ele.length>0){

document.getElementById("p1").innerHTML = ele;

}

else{

document.getElementById("p1").innerHTML = "You Dont have any thing";

}

</script>

</body>

</html>

Try It

How to get checkbox value in JQuery

JQuery makes code simple and easy, to select checkbox we can use either name, id or input type checkbox.

We can use any of above ways as per need.

Here we will use checkbox id to select checkbox.

You can download JQuery or include from CDN

We checked check box is selected or not using ($('#checkbox1').is(":checked"))

Here checkbox1 is id of checkbox.

To get the value of check box $('#checkbox1').val();

<!DOCTYPE html>
<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <script>
            $(document).ready(function() {
             $("#btn").click(function(){
                if ($('#checkbox1').is(":checked"))
                 {
                      var cbVal= $('#checkbox1').val();
                      alert(cbVal);
                 }
                 else{
                      alert("checkbox is not checked");
                 }
                 });
            });
        </script>
    </head>
    <body>
        Check It: <input type="checkbox" id="checkbox1" name="checkbox1" value="Good">
        <button id="btn">Get Value</button>
        
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

$(document).ready(function() {

$("#btn").click(function(){

if ($('#checkbox1').is(":checked"))

{

var cbVal= $('#checkbox1').val();

alert(cbVal);

}

else{

alert("checkbox is not checked");

}

});

</script>

</head>

<body>

Check It: <input type="checkbox" id="checkbox1" name="checkbox1" value="Good">

<button id="btn">Get Value</button>

</body>

</html>

Try It

How to get multiple checkbox value in JQuery

$("input:checkbox[name=cb1]:checked").each(function(){ ele.push($(this).val()); });

Here Input check box with name cb1 is checked then for each element get checkbox value and push to array.

Fig: get multiple checkbox value using JQuery

 <!DOCTYPE html>
<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <script>
            $(document).ready(function() {
             $("#btn").click(function(){
                   var ele=[];
             $("input:checkbox[name=cb1]:checked").each(function(){
                  ele.push($(this).val());
                  console.log("btn clicked");
               });
             alert("selected "+ele);
             });
            });
        </script>
    </head>
    <body>
        Your Play Games: <br/>
        Cricket <input type="checkbox"  name="cb1" value="Cricket"><br/>
        FootBall <input type="checkbox"  name="cb1" value="FootBall"><br/>
        VolleyBall <input type="checkbox" name="cb1" value="VolleyBall"><br/>
        BadMinton <input type="checkbox" name="cb1" value="BadMinton"><br/>
        <button id="btn">Get Value</button>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

$(document).ready(function() {

$("#btn").click(function(){

var ele=[];

$("input:checkbox[name=cb1]:checked").each(function(){

ele.push($(this).val());

console.log("btn clicked");

});

alert("selected "+ele);

});

</script>

</head>

<body>

Your Play Games: <br/>

Cricket <input type="checkbox" name="cb1" value="Cricket"><br/>

FootBall <input type="checkbox" name="cb1" value="FootBall"><br/>

VolleyBall <input type="checkbox" name="cb1" value="VolleyBall"><br/>

BadMinton <input type="checkbox" name="cb1" value="BadMinton"><br/>

<button id="btn">Get Value</button>

</body>

</html>

Try It

It is very easy to access multiple check box value using JavaScript and JQuery.

You can use these in your web page like in form and to capture user information.

Add active class onclick javascript and jQuery

Add active class to a div on javascript onclick event

Here we are applying a style to a simple div.

Steps to add a css class on click event

Create a div with specific id (here id=”text”)
on click on div call a method makeActive()
Define a function makeActive() in side <script> tag.
Inside makeActive() getElementById
Get Elements classList and add class active.
Use the innerHTML to change to element Text

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            .active {
            padding: 5px;
            background-color: #20BF55;
            color: white;
            }
        </style>
    </head>
    <body>
        <div id="text" onclick="makeActive()">
            Click to make Active
        </div>
        <script>
            function makeActive() {
               var element = document.getElementById("text");
               element.classList.add("active");
               element.innerHTML="This is Active";
            }
        </script>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

.active {

padding: 5px;

background-color: #20BF55;

color: white;

}

</style>

</head>

<body>

Click to make Active

</div>

function makeActive() {

var element = document.getElementById("text");

element.classList.add("active");

element.innerHTML="This is Active";

}

</script>

</body>

</html>

Try It

Add active class onclick javascript to HTML ul List to make menu

Here We have ul list elements to create horizontal menu on click on any element an active class is applied on it and if any one have already active class then remove it.

create a ul menu with li items
make menu display inline using css
inside script tag select all anchor in menu class
on click event find is there any active class in li
if found then remove it
add active class to clicked element.

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            .menu li{
            display:inline;
            margin: 15px;
            }
            .active {
            background-color: #20BF55;
            padding:5px;
            }
        </style>
    </head>
    <body>
        <ul class="menu">
            <li class="active"><a href="#">Home</a>
            </li>
            <li><a href="#">About Us</a>
            </li>
            <li><a href="#">Contact Us</a>
            </li>
            <li><a href="#">FAQ</a>
            </li>
        </ul>
        <script>
            var a = document.querySelectorAll(".menu a");
            for (var i = 0, length = a.length; i < length; i++) {
              a[i].onclick = function() {
                var b = document.querySelector(".menu li.active");
                if (b) b.classList.remove("active");
                this.parentNode.classList.add('active');
              };
            }
             
        </script>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

.menu li{

display:inline;

margin: 15px;

}

.active {

background-color: #20BF55;

padding:5px;

}

</style>

</head>

<body>

</li>

<li><a href="#">About Us</a>

</li>

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

</li>

</li>

</ul>

var a = document.querySelectorAll(".menu a");

for (var i = 0, length = a.length; i < length; i++) {

a[i].onclick = function() {

var b = document.querySelector(".menu li.active");

if (b) b.classList.remove("active");

this.parentNode.classList.add('active');

};

}

</script>

</body>

</html>

Try It

Reference

Add active class to a div on Jquery onclick event

Here we have taken example of only a single div on click on div it will add an active class on div.

you can download or include Jquery from CDN

To achieve this follow these steps

Define active css class
Include Latest Jquery jquery.min.js file to your html
Create a div with id text.
Write Jquery code inside script tag.
Check for document ready state if ready then
write click function for #text
add a class using jquery addClass()
Change the div content using Jquery text().

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            .active {
            padding: 5px;
            background-color: #20BF55;
            color: white;
            }
        </style>
    </head>
    <body>
        <div id="text">
            Click to make Active
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
              $("#text").click(function(){
                $(this).addClass("active");
                $(this).text("Active Class");
              });
            });
        </script>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

.active {

padding: 5px;

background-color: #20BF55;

color: white;

}

</style>

</head>

<body>

Click to make Active

</div>

$(document).ready(function(){

$("#text").click(function(){

$(this).addClass("active");

$(this).text("Active Class");

});

</script>

</body>

</html>

Try It

Add active class onclick JQuery to HTML ul List to make menu

As we already seen how to add a active class in HTML List.

The same work we will do with JQuery.

JQuery provides easy way to add and remove css class in any element

Create a simple HTML unordered list
Style list to make inline and provide margin
define a active style in css
Include Jquery latest jquery.min.js file
Write Jquery event that will work on document ready
On click on anchor tag inside li first remove all active class from li then add active class in parent li of anchor tag.

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            .menu li{
            display:inline;
            margin: 15px;
            }
            .active {
            background-color: #20BF55;
            padding:5px;
            }
        </style>
    </head>
    <body>
        <ul class="menu">
            <li class="active"><a href="#">Home</a>
            </li>
            <li><a href="#">About Us</a>
            </li>
            <li><a href="#">Contact Us</a>
            </li>
            <li><a href="#">FAQ</a>
            </li>
        </ul>
       
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
              $("a").click(function(){
              $(".menu li").removeClass("active");
                $(this).parent("li").addClass("active");
                
              });
            });
        </script>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

.menu li{

display:inline;

margin: 15px;

}

.active {

background-color: #20BF55;

padding:5px;

}

</style>

</head>

<body>

</li>

<li><a href="#">About Us</a>

</li>

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

</li>

</li>

</ul>

$(document).ready(function(){

$("a").click(function(){

$(".menu li").removeClass("active");

$(this).parent("li").addClass("active");

});

</script>

</body>

</html>

Jquery provides addClass() and removeClass() to add and remove any css class.

You can learn how to access parent class id in JQuery

Add Hover effect in HTML menu using JQuery hover()

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            .menu li{
            display:inline;
            margin: 15px;
            }
            .active {
            background-color: #20BF55;
            padding:5px;
            }
            .hover {
            background-color: #89de6f;
            padding:5px;
            }
        </style>
    </head>
    <body>
        <ul class="menu">
            <li class="active"><a href="#">Home</a>
            </li>
            <li><a href="#">About Us</a>
            </li>
            <li><a href="#">Contact Us</a>
            </li>
            <li><a href="#">FAQ</a>
            </li>
        </ul>
       
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
              $("a").click(function(){
              $(".menu li").removeClass("active");
                $(this).parent("li").addClass("active");
                
              });
              $( "a" ).hover(function() {
                  $(this).parent("li").addClass("hover");
              }, function() {
                  $(".menu li").removeClass("hover");
               });
            });
        </script>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

.menu li{

display:inline;

margin: 15px;

}

.active {

background-color: #20BF55;

padding:5px;

}

.hover {

background-color: #89de6f;

padding:5px;

}

</style>

</head>

<body>

</li>

<li><a href="#">About Us</a>

</li>

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

</li>

</li>

</ul>

$(document).ready(function(){

$("a").click(function(){

$(".menu li").removeClass("active");

$(this).parent("li").addClass("active");

});

$( "a" ).hover(function() {

$(this).parent("li").addClass("hover");

}, function() {

$(".menu li").removeClass("hover");

});

</script>

</body>

</html>

To add hover effect we used below code.

This will add and remove css class on hover.

$( "a" ).hover(function() {
                  $(this).parent("li").addClass("hover");
              }, function() {
                  $(".menu li").removeClass("hover");
               });

$( "a" ).hover(function() {

$(this).parent("li").addClass("hover");

}, function() {

$(".menu li").removeClass("hover");

});

Jquery html method

html() is used to get or set the html content in matched selector.
Getting content using html()

Html() get contents with html tags of specified selector

If more then one elements are there with same selector then only first matched elements content are get using html().

for setting html content we pass string argument in html()

setting html content using html()

we can set more then one selector value by html().

using function in html()

Jquery toggle an element

toggle is a method which is used to show and hide the selected class. if select element is hidden then on toggle it will show element.
If element is not hidden on toggle it will hide the element.

<div class="description">
    <h1>Photography</h1>
    <p>Photography is the science, art and practice of creating durable images by recording light or other electromagnetic radiation, either electronically by means of an image sensor, or chemically by means of a light-sensitive material such as photographic film.</p>
</div>
<input type="submit" value="Toggle" id="toggle" />

<h1>Photography</h1>

<p>Photography is the science, art and practice of creating durable images by recording light or other electromagnetic radiation, either electronically by means of an image sensor, or chemically by means of a light-sensitive material such as photographic film.</p>

</div>

$(document).ready(function () {
    $(document).on('click', '#toggle', function (event) {
        $(".description").toggle();
    });
});

$(document).ready(function () {

$(document).on('click', '#toggle', function (event) {

$(".description").toggle();

});

Output

We can also specify the toggle time and function to perform task of toggle done

$(document).ready(function () {
    $(document).on('click', '#toggle', function (event) {
        $(".description").toggle(2000,function (event) {
            alert("toggle done");
        });
    });
});

$(document).ready(function () {

$(document).on('click', '#toggle', function (event) {

$(".description").toggle(2000,function (event) {

alert("toggle done");

});

Output

Hide and show html elements using jquery

Hide and show function are used to show and hide any html element.
Here on button click we are showing and hiding the div.

<div class="description">
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
</div>
 <input type="submit" value="Hide" id="hide" />
 <input type="submit" value="Show" id="show" />

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

</div>

$(document).ready(function () {
    $(document).on('click', '#hide', function (event) {
       $(".description").hide();
    });
     $(document).on('click', '#show', function (event) {
       $(".description").show();
    });
});

$(document).ready(function () {

$(document).on('click', '#hide', function (event) {

$(".description").hide();

});

$(document).on('click', '#show', function (event) {

$(".description").show();

});

Output

We can also provide how long this hide or show will take place be specifying the time
like

$(“.description”).hide(2000);
or $(“.description”).show(2000);

to perform specific task after hide or show we can use

$(document).ready(function () {
    $(document).on('click', '#hide', function (event) {
        $(".description").hide("slow", function () {
            alert("Hiding Completed.");
        });
    });
    $(document).on('click', '#show', function (event) {
        $(".description").show(100, function () {
            alert("Showing Completed.");
        });
    });
});

$(document).ready(function () {

$(document).on('click', '#hide', function (event) {

$(".description").hide("slow", function () {

alert("Hiding Completed.");

});

$(document).on('click', '#show', function (event) {

$(".description").show(100, function () {

alert("Showing Completed.");

});

Output

jquery get parent id based on class value

If we have nested divs one inside another and we want to get id of parent div for this we use parents().

suppose following div structure

<div class="level1" id="level1_123">

<div class="level2" id="level2_324">

<div class="level3" id="level3_567">

<div class="level4" id="level4_985">
                <input type="submit" value="Get Parent Id" id="submit">
</div>

</div>

</div>

</div>

</div>

$(document).ready(function () {
    $(document).on('click', '#submit', function (event) {
        event.preventDefault();
        var parentId = $(this).parents(".level1").attr("id");
        alert(parentId);
    });
});

$(document).ready(function () {

$(document).on('click', '#submit', function (event) {

event.preventDefault();

var parentId = $(this).parents(".level1").attr("id");

alert(parentId);

});

as above we have seen how to get id for top parent and similar we can get id or class value for any level of parent.
for getting class value we can use following which will give second level divs class based on its id value.

var parentClass = $(this).parents(" #level2_324").attr("class");="" <="" pre="">
<strong>Output</strong>
<iframe width="100%" height="300" src="http://jsfiddle.net/ebhor/k8ykzLx2/embedded/result,js,html" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

var parentClass = $(this).parents(" #level2_324").attr("class");="" <="" pre="">

<strong>Output</strong>

Getting id and class value of a html element

We have a div and we want to get its id value based on its class value.

Suppose a div is given as below and we want to fetch div id based on a button click.
for getting attribute id we use attr() method.

Example

<div class="select" id="select_25">
This is a ball
</div>
<input type="submit" value="Get Id" id="submit">

This is a ball

</div>

$(document).ready(function () {
    $(document).on('click', '#submit', function (event) {
        event.preventDefault();
         alert("id is "+$(".select").attr('id'));
         alert("class is "+$("#select_25").attr('class'));
    });
});

$(document).ready(function () {

$(document).on('click', '#submit', function (event) {

event.preventDefault();

alert("id is "+$(".select").attr('id'));

alert("class is "+$("#select_25").attr('class'));

});

Output

Changing text on mouse over event

Change text of html element on mouseover and on mouseleave event it should show original message.

Example

<div id="message">
 Hi How are you
</div>

Hi How are you

</div>

$(document).ready(function() {
      $(document).on('mouseover', '#message', function(event) {
        event.preventDefault();
        $("#message").text("I am fine");
    }).on('mouseleave', '#message', function(event) {
        event.preventDefault();
        $("#message").text("Hi How are you");
    });
});

$(document).ready(function() {

$(document).on('mouseover', '#message', function(event) {

event.preventDefault();

$("#message").text("I am fine");

}).on('mouseleave', '#message', function(event) {

event.preventDefault();

$("#message").text("Hi How are you");

});

Output:

Replacing content of div using .replaceWith()

To replace the content of a div span or any other block elements content with html element a jquery method .replaceWith() is used.
Syntax:

  $(selector).replaceWith(newContent);

1	$(selector).replaceWith(newContent);

  $(selector).replaceWith(function);

1	$(selector).replaceWith(function);

A selector can be id class or tag selector of element to replace with newContent passed in .replaceWith() method. a newContent can be html string, DOM element, Array or object.
Another syntax uses any function that evaluates and replace the selector with new function return value.

There is a div with id value a with content Hi how are you. Here id a will replaced with div id with value b and content I am fine when ever user click on button.

Example:
Html page is

<div class="one">
  <div id="a">
    Hi How are you
  </div>
  <button id="replace">
    Replace Content
  </button>
</div>

Hi How are you

</div>

Replace Content

</button>

</div>

We want to replace <div id=”a”> with following content

    <div id="b">
          I am fine.
    </div>

I am fine.

</div>

To achive above with jquery we will use following code

$(document).ready(function() {
      $(document).on('click', '#replace', function(event) {
        event.preventDefault();
              $("#a").replaceWith("<div id=\"b\">I am fine.</div>");
      
    });
});

$(document).ready(function() {

$(document).on('click', '#replace', function(event) {

event.preventDefault();

$("#a").replaceWith("<div id=\"b\">I am fine.</div>");

});

Output:

Here new content will be

<div class="one">
  <div id="b">
        I am fine.
    </div>
  <button id="replace">
    Replace Content
  </button>
</div>

I am fine.

</div>

Replace Content

</button>

</div>

Lets use function in replaceWith method

<h1 class="test">
<div id="a">Good to read this</div>
</h1>
<div id="b">Better to practice now</div>
<button id="replace">
    Replace Content
  </button>

</h1>

<div id="b">Better to practice now</div>

Replace Content

</button>

Jquery code

$(document).ready(function() {
      $(document).on('click', '#replace', function(event) {
        event.preventDefault();
              $("#a").replaceWith($('#b");
      
    });
});

$(document).ready(function() {

$(document).on('click', '#replace', function(event) {

event.preventDefault();

$("#a").replaceWith($('#b");

});

.replaceWith() does not clone the object it replace the content on DOM.

Showing Arraylist values using Struts2 Json and JQuery

I am having comment class, I want to show its property values to jsp page using json

Comments.java

package example;

import java.sql.Timestamp;

public class Comments {

    private int id;
    private String name;
    private String pic;
    private String comment;
    private Timestamp commentDate;

    public String getComment() {
        return comment;
    }

    public void setComment(String comment) {
        this.comment = comment;
    }

    public Timestamp getCommentDate() {
        return commentDate;
    }

    public void setCommentDate(Timestamp commentDate) {
        this.commentDate = commentDate;
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getPic() {
        return pic;
    }

    public void setPic(String pic) {
        this.pic = pic;
    }
}

package example;

import java.sql.Timestamp;

public class Comments {

private int id;

private String name;

private String pic;

private String comment;

private Timestamp commentDate;

public String getComment() {

return comment;

}

public void setComment(String comment) {

this.comment = comment;

}

public Timestamp getCommentDate() {

return commentDate;

}

public void setCommentDate(Timestamp commentDate) {

this.commentDate = commentDate;

}

public int getId() {

return id;

}

public void setId(int id) {

this.id = id;

}

public String getName() {

return name;

}

public void setName(String name) {

this.name = name;

}

public String getPic() {

return pic;

}

public void setPic(String pic) {

this.pic = pic;

}

ListJson assigning values for comments.java. Here we fetch value of commentList and totalcomments value in our jsp page.

package example;

import com.opensymphony.xwork2.ActionSupport;
import java.util.ArrayList;

public class ListJson extends ActionSupport {

    private ArrayList commentList = new ArrayList<comments>();
    private long totalComments;

    public String execute() {
        comments c = new comments();
        c.setId(1);
        c.setName("Manish");
        c.setComment("Hi how are you");
        c.setPic("a.jpg");
        c.setCommentDate(null);

        comments d = new comments();
        d.setId(2);
        d.setName("Nita");
        d.setComment("I am fine");
        d.setPic("b.jpg");
        d.setCommentDate(null);
        commentList.add(c);
        commentList.add(d);
        setTotalComments(commentList.size());
        System.out.println("In action");

        return SUCCESS;
    }

    public long getTotalComments() {
        return totalComments;
    }

    public void setTotalComments(long totalComments) {
        this.totalComments = totalComments;
    }

    public ArrayList getCommentList() {
        return commentList;
    }

    public void setCommentList(ArrayList commentList) {
        this.commentList = commentList;
    }
}

package example;

import com.opensymphony.xwork2.ActionSupport;

import java.util.ArrayList;

public class ListJson extends ActionSupport {

private ArrayList commentList = new ArrayList<comments>();

private long totalComments;

public String execute() {

comments c = new comments();

c.setId(1);

c.setName("Manish");

c.setComment("Hi how are you");

c.setPic("a.jpg");

c.setCommentDate(null);

comments d = new comments();

d.setId(2);

d.setName("Nita");

d.setComment("I am fine");

d.setPic("b.jpg");

d.setCommentDate(null);

commentList.add(c);

commentList.add(d);

setTotalComments(commentList.size());

System.out.println("In action");

return SUCCESS;

}

public long getTotalComments() {

return totalComments;

}

public void setTotalComments(long totalComments) {

this.totalComments = totalComments;

}

public ArrayList getCommentList() {

return commentList;

}

public void setCommentList(ArrayList commentList) {

this.commentList = commentList;

}

Struts.xml

 <package name="example1" extends="struts-default, json-default">
        <action name="fetchComments" class="example.ListJson">
            <result  type="json"></result>
        </action>
    </package>

</action>

</package>

In Jsp page

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    </head>
    <body>
        <input type="button" id="button1" value="Submit">

        <div class="total-comments"></div>
        <div class="allcomments">

        </div>        
        <script>
            $("#button1").click(function() {
                $.getJSON('fetchComments', function(data) {
                    $(".total-comments").html("<h2>Total comments are "+data.totalComments+"</div>");
                   
                    var msg;
                 
                    $.each(data.commentList, function(j) {
                        msg='<div class="comment">';
                        msg+= '<div class="id">'+data.commentList[j].id+'</div>'
                        msg+= '<div class="name">'+data.commentList[j].name+'</div>';         
                        msg+= '<div class="image">'+data.commentList[j].pic+'</div>'
                        msg+= '<div class="image">'+data.commentList[j].comment+'</div>'
                        msg+= '<div class="commentDate">'+data.commentList[j].commentDate+'</div>'
                        msg+='</div>';
                        $(".allcomments").append(msg);
                    });
                    return false;                    
                });
            });
           </script>
</body>
</html>

<%@page contentType="text/html" pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

$("#button1").click(function() {

$.getJSON('fetchComments', function(data) {

$(".total-comments").html("<h2>Total comments are "+data.totalComments+"</div>");

var msg;

$.each(data.commentList, function(j) {

msg='<div class="comment">';

msg+= '<div class="id">'+data.commentList[j].id+'</div>'

msg+= '<div class="name">'+data.commentList[j].name+'</div>';

msg+= '<div class="image">'+data.commentList[j].pic+'</div>'

msg+= '<div class="image">'+data.commentList[j].comment+'</div>'

msg+= '<div class="commentDate">'+data.commentList[j].commentDate+'</div>'

msg+='</div>';

$(".allcomments").append(msg);

});

return false;

});

</script>

</body>

</html>

How to get multiple checkbox value in javascript and JQuery

how to get checkbox value in javascript with getelementbyid()

How to get multiple checkbox value in javascript with getElementById()

How to get checkbox value in JQuery

How to get multiple checkbox value in JQuery

Read More

Add active class onclick javascript and jQuery

Add active class to a div on javascript onclick event

Add active class onclick javascript to HTML ul List to make menu

Add active class to a div on Jquery onclick event

Add active class onclick JQuery to HTML ul List to make menu

Add Hover effect in HTML menu using JQuery hover()

Read More

Jquery html method

Jquery toggle an element

Hide and show html elements using jquery

jquery get parent id based on class value

Getting id and class value of a html element

Changing text on mouse over event

Replacing content of div using .replaceWith()

Showing Arraylist values using Struts2 Json and JQuery