We help IT Professionals succeed at work.

want to send dynamically created data to servlet while checkbox is cheeked

puneet kumar
puneet kumar asked
on
High Priority
94 Views
Last Modified: 2020-02-18
Requirement Description Imagehow can i send dynamically created fields through ajax to servlet?

i have a jsp page where i fetch data from a table and display there are 3 date fields

all row having checkbox when i click on chekbox new date value should go to servlet through ajax.
code are below -

<table align=center>

<tr>			<th>Check/UnCheck</th>
                <th>MYear</th>
                <th>Date1</th>
                <th>Date2</th>
                <th>Date3</th>
</tr>
<%for(int i=0 ; i<mYearVector.size();i++)
{
	
%>
 <tr>
<td align="top">
<INPUT type="checkbox" class="chkValues" id="ckbCheckAll" name="chkBox" type="checkbox" value="" size="50">
</td>
<td align="left">
<input class=inputText type="text" name="mYear" id="mYear"  value="<%=mYearVector.elementAt(i)%>"  readonly>
</td>

				<td>
		            <input class="date1" id="payrollCutOffDate<%=i%>" name="dob" type="text" value="<%=(oldValues.elementAt(0)==null?"":oldValues.elementAt(0))%>" />
				</td>
				<td>
		            <input class="date2" id="payrollPaymentDate<%=i%>" name="dob" type="text" value="<%=(oldValues.elementAt(1)==null?"":oldValues.elementAt(1))%>" />
				</td>
				<td>
		            <input class="date3" id="inactiveDate<%=i%>" name="dob" type="text" value="<%=(oldValues.elementAt(2)==null?"":oldValues.elementAt(2))%>" />
				</td>
</tr> 
<%}%>

</table>

Open in new window

Comment
Watch Question

Scott FellDeveloper & EE Moderator
CERTIFIED EXPERT
Fellow
Most Valuable Expert 2013

Commented:
I can't help with the jsp part but your js could be something like below (taken from  your previous question https://www.experts-exchange.com/questions/29168491/Datepicker-not-working-for-html-table-rows-except-first-row.html#a43006255

https://jsfiddle.net/v7hw4ud8/2/
<table  id="phone" width="100%" name="phone">
		    <tr>
			    <td colspan="5" bgcolor="#5C85B3">Phone</td>
			</tr>
			<tr>
      <th>go</th>
				<th>Date1</th>
				<th>Date2</th>
				<th>Date3</th>
			</tr>
			<tr>
      <td><input type="checkbox" data-row="row1" class="go"></td>
				<td>
		            <input class="date row1" id="dob1" name="dob" type="text" value="" />
				</td>
				<td>
		            <input class="date row1" id="dob2" name="dob" type="text" value="" />
				</td>
				<td>
		            <input class="date row1" id="dob3" name="dob" type="text" value="" />
				</td>
			</tr>
      
      </tr>
			<tr><td><input type="checkbox" data-row="row2" class="go"></td>
				<td>
		            <input class="date row2" id="dob4" name="dob" type="text" value="" />
				</td>
				<td>
		            <input class="date row2" id="dob5" name="dob" type="text" value="" />
				</td>
				<td>
		            <input class="date row2" id="dob6" name="dob" type="text" value="" />
				</td>
			</tr>
      
      </tr>
			<tr>
      <td><input type="checkbox" data-row="row3" class="go"></td>
				<td>
		            <input class="date row3" id="dob7" name="dob" type="text" value="" />
				</td>
				<td>
		            <input class="date row3" id="dob8" name="dob" type="text" value="" />
				</td>
				<td>
		            <input class="date row3" id="dob9" name="dob" type="text" value="" />
				</td>
			</tr>
      
		</table>

    

Open in new window

$(document).ready(function(){
  
			    $(".date").datepicker();
          
          $('.go').on('click',function(){
          
             //get values of dates
            var array = []; 
            $row = $(this).data('row');  //row1, row2, row3 etc
            $('input.'+$row).each(function() { 
                array.push($(this).val()); 
            });
            //send array via ajax
            //https://api.jquery.com/jquery.ajax/
            $.ajax({
                method: "POST",
                url: "somePage.jsp",
                data: { array: array}
              })
                .done(function( msg ) {
                  alert( "Data Saved: " + msg );
                });
            
          
          });
         
});

Open in new window

Author

Commented:
Hi scott how can is send it to submit button  please let me know how to post it while click on submit button
Scott FellDeveloper & EE Moderator
CERTIFIED EXPERT
Fellow
Most Valuable Expert 2013

Commented:
That is what the on click does. This is just a start, not complete code. Which part are you not understanding?

Author

Commented:
Hi Scott i tried with below code but row value is not going to servlet please let me know where i am wrong -

Script Code

$(document).ready(function(){
        
    $(".date").datepicker();

$('.chkValues').on('click',function(){

 //get values of dates
var array = [];
$row = $(this).data('row');  //row1, row2, row3 etc
$('input.'+$row).each(function() {
    array.push($(this).val());
});
//send array via ajax
//https://api.jquery.com/jquery.ajax/

$("#btnSubmit").click(function (event) {
 
      $.ajax({
    method: "POST",
    url: "DatePicker.jsp",
    data: { array: array}
  })
    .done(function( msg ) {
      alert( "Data Saved: " + msg );
    });
});

});

});




jsp Code


<table align=center>

<tr>                  <th>Check/UnCheck</th>
                <th>MonthYear</th>
                <th>Date1</th>
                <th>Date2</th>
                <th>Date3</th>
</tr>
<%for(int i=0 ; i<mYearVector.size();i++)
{
      
%>
 <tr>
<td align="top">
<INPUT type="checkbox" class="chkValues" id="ckbCheckAll" name="chkBox" type="checkbox" data-row="row<%=i%>" value="" size="50">
</td>
<td align="left">
<input class=inputText type="text" name="mYear" id="mYear"  value="<%=mYearVector.elementAt(i)%>"  readonly>
</td>

                        <td>
                        <input class="date row<%=i%>" id="date1<%=i%>" name="dob" type="text" value="<%=(oldValues.elementAt(0)==null?"":oldValues.elementAt(0))%>" />
                        </td>
                        <td>
                        <input class="date row<%=i%>" id="date2<%=i%>" name="dob" type="text" value="<%=(oldValues.elementAt(1)==null?"":oldValues.elementAt(1))%>" />
                        </td>
                        <td>
                        <input class="date row<%=i%>" id="date3<%=i%>" name="dob" type="text" value="<%=(oldValues.elementAt(2)==null?"":oldValues.elementAt(2))%>" />
                        </td>

</tr>
<%}%>

</table>
<br>
<table align=center>
<tr>
<td>
<input id = "btnSubmit" type="button" name="Submit" value=""  class=buttonstyle onmouseover="onMouseOver(this)"      onmouseout="onMouseOut(this)"
>
</td>
</tr>
</table>

Open in new window

Author

Commented:
scott i just want to send data to servlet via ajax call please send me code on below points

1)want to send data to servlet via ajax call.
2)only checked data should go .
3)on submit button data should go .


thanx in advance ..
Scott FellDeveloper & EE Moderator
CERTIFIED EXPERT
Fellow
Most Valuable Expert 2013

Commented:
i just want to send data to servlet via ajax

That is what this part of the code is doing
https://api.jquery.com/jquery.ajax/
$.ajax({
                method: "POST",
                url: "somePage.jsp",
                data: { array: array}
              })

Open in new window

The next part is gathering the output from your processing page
.done(function( msg ) {
                  alert( "Data Saved: " + msg );
                });

Open in new window

You can view what is being sent and what is being returned using the browser dev tools (F12) and going to the network tab, clicking on your processing page. From there you can see what the data is that is being posted and what is being returned.
When that data is posted as an array, it is going to look like
array[]:1/1/2020
array[]:1/1/2020
array[]:1/1/2020

or
array%5B%5D=1%2F1%2F2020&array%5B%5D=1%2F1%2F2020&array%5B%5D=1%2F1%2F2020

Your jsp page will need to parse that out.  Whatever your jsp page returns will be displayed in the .done(function....

Where is it you need help?  Are you not familiar with javascript/jquery or jsp or both?

Author

Commented:
i am familiar  with jsp only please answer my last 2 questions

2)only checked data should go .
3)on submit button data should go .

and one thing more when i am printing my values in servlet with request.getParameterValues its giving null.

your code when i clicked on checkbox it always go to servlet controller , i want only it will go when i click on submit button.
Scott FellDeveloper & EE Moderator
CERTIFIED EXPERT
Fellow
Most Valuable Expert 2013

Commented:
While this seems simple, there really is too much here to just give code on a forum like this. just starting with your html and requirements needs some work.  Is this something you want to try and work out yourself and learn.  If so, stick to one item you want help with for a question thread. That keeps everything succinct.

Author

Commented:
in your code all values are coming both checked and checked please tell the solution , this is based on your question so please tell solution.
Scott FellDeveloper & EE Moderator
CERTIFIED EXPERT
Fellow
Most Valuable Expert 2013

Commented:
This bit of code should only collect the data for what is checked.

 $('input.'+$row).each(function() { 
                array.push($(this).val()); 
            });

Open in new window

Author

Commented:
one more issue with code suppose 2 checkbox is selected 2 request come to controller having 3,3 values . example 3 value of first checked row come in 1st request then come second request having 3 value of second checked row .
Scott FellDeveloper & EE Moderator
CERTIFIED EXPERT
Fellow
Most Valuable Expert 2013

Commented:
You can change what I did to either create specific pairs to submit or wrap a form around your table and give the the fields unique names.

<form id="form1>
       <input class="date row1" id="dob1" name="dob" type="text" value="" />
      <input class="date row1" id="dob2" name="dob" type="text" value="" />
      <input class="date row1" id="dob3" name="dob" type="text" value="" />
       <button class="submit">submit</button>
</form>

Open in new window

or
<form id="form1>
       <input class="date row1" id="dob1" name="dob1" type="text" value="" />
      <input class="date row1" id="dob2" name="dob2" type="text" value="" />
      <input class="date row1" id="dob3" name="dob3" type="text" value="" />
     <button class="submit">submit</button>
</form>

Open in new window

or you can use the checkbox as the submit
<form id="form1">
       <input class="date row1" id="dob1" name="dob1" type="text" value="" />
      <input class="date row1" id="dob2" name="dob2" type="text" value="" />
      <input class="date row1" id="dob3" name="dob3" type="text" value="" />
     <input type="checkbox" data-row="1" value="1">
</form>

Open in new window

Then you can do an on click function and submit the form like $('#form1').submit();

Note that if you submit a form where all fields are the same name, the data will be sent as comma delimited or an array.

There are just too many options here to write all this for you.  This is why you need to figure out the logic you want to use, try the best you can and let us  help debug instead of writing it from scratch for you.

Author

Commented:
Hi Scott one small issue is there everything is working fine instead when i open
my jsp page from all dates  are fetching and coming from database (PrePopulated) and displaying in date box
when with datepicker i select any new date it is showing in input box but when
i am submitting through ajax old date is going.can you please help me out on this.
Developer & EE Moderator
CERTIFIED EXPERT
Fellow
Most Valuable Expert 2013
Commented:
What you are saying is, you have a code like
       <input class="date row1" id="dob1" name="dob1" type="text" value="<%=DATE_FROM_DATABASE%>" />

Open in new window

You then use the date picker to change the date.
When you submit the data, the <%=DATE_FROM_DATABASE%> is being used instead of the date from the date picker.

If that is the case, make sure you have unique id's and unique names for each input field.

Author

Commented:
Thanx Scott for you support.