CODEWITHSUNDEEP
jqueryjspservlets
Ravi Tej
Ravi Tej

Reputation: 1

how to pass objects selected in check box from jsp to servlet

I am passing list of objects from servlet to JSP. Showing them on JSP page like 

<c:forEach items="${plcContacts}" var="contact">
    <tr>
    <td><input type="checkbox" name="contacts" class="case" id ="${contact.col2}" >></input><br></td>
    <td>${contact.col5}</td>
    <td>${contact.col4}</td>
    <td class="teamFunction">${contact.col2}</td>
    </tr>
    </c:forEach>

In the above, 

contact.col5 is email id, 
contact.col4 is name,
contact.col2 is team member function.

So I have buttons for selecting all contacts , deselect all contacts, contacts based on their function. I have done it using JQuery successfully as below.

 // add multiple select functionality
    $("#CheckAll").click(function () {
          $('.case').prop('checked', true);
    });

    $("#UnCheckAll").click(function () {
          $('.case').prop('checked', false);
    });

// check by Function
    $("#CheckByFunction").click(function() {    
        $('input[type=checkbox]').each(function () {
            var plc = $('#plcFunction').val().replace(/ /g, '-');
            var teamFunction =  this.id.replace(/ /g, '-');
            if (plc == teamFunction) {
                $(this).prop('checked', true);
            } else {
                 $(this).prop('checked', false);
            }
        });
    });

My question here is when next button is clicked on this JSP page , I need to send the list of contact objects whose check boxes were selected to servlet. I am trying to do like below.

**//read all the checked contacts**
$("#Next").click(function() {
  selected = new Array();
  $("input[type='checkbox']:checked").each(function() { 
    selected.push($(this).val());
  });
});

I can retrieve all contact objects in servlet by putting them in session , but I need only the contacts with check box selected. Can someone please help me on this?

Upvotes: 0

Views: 4263

Answers (3)

BalusC
BalusC

Reputation: 1108692

You need to give your checkboxes an unique value identifying the checked value:

<input type="checkbox" name="contacts" value="${contact.col2}" />

Then you can just use HttpServletRequest#getParameterValues() to obtain all checked values:

String[] checkedContacts = request.getParameterValues("contacts");

That's all. No need to collect it into some JS array on submit. That's an ugly JS hack which doesn't degrade gracefully (i.e. if enduser has JS disabled, the whole submit breaks).

Upvotes: 1

Ram
Ram

Reputation: 144679

Well, you are storing undefined values in an array as your checkboxes do no have value attributes, also your markup is invalid, input element doesn't have closing </input> tag, supposing your inputs have following classes, you can use map method and store the values in an array.

var selected = $('#table tr').has('input[type=checkbox]').map(function(){
       var $this = $(this);
       return {
          val: $this.find('input[type=checkbox]').val(),
          email: $this.find('input[type=text].email').val(),              
          name: $this.find('input[type=text].name').val(),
          // ...
       }
})

Upvotes: 0

nick.stuart
nick.stuart

Reputation: 544

First, your html needs a value attribute set, not an id:

<c:forEach items="${plcContacts}" var="contact">
    <tr>
    <td><input type="checkbox" name="contacts" class="case" value="${contact.col2}"></input></td>
    </tr>
</c:forEach>

Second, your javascript should be something along the lins of:

$("#CheckAll").click(function () {
    //Notice use of attr here, not prop
    $('.case').attr('checked', true);
});

$("#UnCheckAll").click(function () {
      //notice we are remove attr
      $('.case').removeAttr('checked');
});

//should be able to complete the fill by function based off the above

//to get the selected, you weren't far off, biggest thing should actually be
//the setting of value instead of id.
var selected = [];
$("input[type='checkbox']:checked").each(function() { 
    selected.push($(this).val());
});
//spit the array out so you can see what you end up with.
console.log(selected)

Upvotes: 0

Related Questions