puneet kumar
asked on
want to send dynamically created data to servlet while checkbox is cheeked
how 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 -
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>
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?
ASKER
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
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>
ASKER
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 ..
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}
})
The next part is gathering the output from your processing page.done(function( msg ) {
alert( "Data Saved: " + msg );
});
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&a
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?
ASKER
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.
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
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.
ASKER
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());
});
ASKER
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.
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.
<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>
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>
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>
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.
ASKER
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.
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanx Scott for you support.
https://jsfiddle.net/v7hw4ud8/2/
Open in new window
Open in new window