Reuben Gomes Reuben Gomes - 4 months ago 24
Ajax Question

Get all values in current tag from multiple tags and inputs

I have a page where my tag in paginatethis is used to paginate all the fields. Now from my php script 2 to 100 paginatethis class=abc tags can be generated , How can I get the values of only the current field? I have Used A Plugin For Pagination
easyPagination hence im using the paginatethis tag


My Pagination code looks like this


$('#qwe').easyPaginate({
paginateElement: 'paginatethis.abc',
elementsPerPage: 1,
effect: 'climb'
});


This is my jQuery. I need to select all elements in the current paginatethis tag on button click.

$(document).ready(function() {
$(".submit:current").click(function(){
var quesid = $("#quesId").val();
var oans = $("#oans").val();
var cdate = $("#testDate").val();
var studans = $("#answer:checked").val();

$.ajax({
url: "<?php echo base_url('Front/submitAns');?>",
data: {
quesid: quesid,
oans: oans,
cdate: cdate,
studans: studans
},
method: "POST",
dataType: "text",
success: function(data) {
$("#counts").html(data);
}
});
});
});


<paginatethis class="abc">
<input type="radio" value="A" class="form-group" id="answer" name="answer">
<input type="radio" value="B" class="form-group" id="answer" name="answer">
<input type="radio" value="C" class="form-group" id="answer" name="answer">
<input type="radio" value="D" class="form-group" id="answer" name="answer">
<input type="hidden" name="testDate" value="<?php echo date("Y-m-d");?>" >
<input type="hidden" name="oans" id="oans" value="<?php echo base64_encode($data->ans);?>" >
<input type="hidden" name="quesId" id="quesId" value="<?php echo $data->id;?>" >
<button type="button" name="submit" class="submit">SUBMIT</button>
</paginatethis> <!--/value changed from above tag-->
<paginatethis class="abc">
<input type="radio" value="A" class="form-group" id="answer" name="answer">
<input type="radio" value="B" class="form-group" id="answer" name="answer">
<input type="radio" value="C" class="form-group" id="answer" name="answer">
<input type="radio" value="D" class="form-group" id="answer" name="answer">
<input type="hidden" name="testDate" value="<?php echo date("Y-m-d");?>" > //value changes in every tag
<input type="hidden" name="oans" id="oans" value="<?php echo base64_encode($data->ans);?>" >
<input type="hidden" name="quesId" id="quesId" value="<?php echo $data->id;?>" >
<button type="button" name="submit" class="submit">SUBMIT</button>
</paginatethis>

Answer

You can use the function serialize to get all the values of the inputs inside your current page.

Note that you will need to change the click event to handle clicks on DOM changes, so instead of $('.select').click I used $('#qwe').on('click', '.submit',

Here is an example:

$('#qwe').easyPaginate({
  paginateElement: 'paginatethis.abc',
  elementsPerPage: 1,
  effect: 'climb'
});

$('#qwe').on('click', '.submit', function() {
  all_data_in_page = $('#qwe input').serialize();
  console.log(all_data_in_page);
  $.ajax({
    url: "your url",
    data: all_data_in_page,
    method: "POST",
    dataType: "text",
    success: function(data) {
      $("#counts").html(data);
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://st3ph.github.io/jquery.easyPaginate/js/jquery.easyPaginate.js"></script>
<div id="qwe">
  <paginatethis class="abc">
    Content of page 1
    <input type="radio" value="A" class="form-group" id="answer" name="answer">
    <input type="radio" value="B" class="form-group" id="answer" name="answer">
    <input type="radio" value="C" class="form-group" id="answer" name="answer">
    <input type="radio" value="D" class="form-group" id="answer" name="answer">
    <input type="hidden" name="testDate" value="1" >
    <input type="hidden" name="oans" id="oans" value="2" >
    <input type="hidden" name="quesId"  id="quesId" value="3" >
    <button type="button" name="submit" class="submit">SUBMIT</button>
  </paginatethis>
  <paginatethis class="abc"> 
    Content of page 2
    <input type="radio" value="A" class="form-group" id="answer" name="answer">
    <input type="radio" value="B" class="form-group" id="answer" name="answer">
    <input type="radio" value="C" class="form-group" id="answer" name="answer">
    <input type="radio" value="D" class="form-group" id="answer" name="answer">
    <input type="hidden" name="testDate" value="4" >
    <input type="hidden" name="oans" id="oans" value="5" >
    <input type="hidden" name="quesId"  id="quesId" value="6" >    
    <button type="button" name="submit" class="submit">SUBMIT</button>
  </paginatethis>
</div>