Get all values in current tag from multiple tags a

Question

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 1

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>