Link to home
Start Free TrialLog in
Avatar of puneet kumar
puneet kumar

asked on

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

User generated 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

Avatar of Scott Fell
Scott Fell
Flag of United States of America image

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?anchorAnswerId=43006255#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

Avatar of puneet kumar
puneet kumar

ASKER

Hi scott how can is send it to submit button  please let me know how to post it while click on submit button
That is what the on click does. This is just a start, not complete code. Which part are you not understanding?
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

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 ..
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?
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.
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.
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.
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

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 .
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.
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.
ASKER CERTIFIED SOLUTION
Avatar of Scott Fell
Scott Fell
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Thanx Scott for you support.