Get all values in current tag from multiple tags and inputs

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>

Can you add a jsfiddle? Or at least a working version of paginatethis, as it's not a standard jquery lib (asaik). — Dekel
– Dekel, Commented Aug 3, 2016 at 12:26
i am using this plugin to do jquery pagination st3ph.github.io/jquery.easyPaginate so i can add my own tag and its working fine — Reuben Gomes
– Reuben Gomes, Commented Aug 3, 2016 at 12:28
Edit the post and add the fact that you use the lib easyPaginate. Also - it will be much easier to help if you provide a working jsfiddle version. — Dekel
– Dekel, Commented Aug 3, 2016 at 12:30
whats i need is to grab the value from the current paginated page every time the <paginatethis class="abc"> </paginatethis> occurs its is 1 page and like this there could be 2-100 pages — Reuben Gomes
– Reuben Gomes, Commented Aug 3, 2016 at 12:31

Dekel · Accepted Answer · 2016-08-03 13:32:38Z

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>

answered Aug 3, 2016 at 13:32

Dekel

62.9k12 gold badges109 silver badges130 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Reuben Gomes Over a year ago

$('#qwe input').serialize(); assuming i want get only hidden fields and radio type i would use? ` $('#qwe input[type=hidden],#qwe input[type=rdio]').serialize();` not at my pc right now left my laptop in the car but judging by the console output i guess it works then ill filter the data on server side

Reuben Gomes Over a year ago

btw the comment above my thanks will that work for selecting the right inputs?

Dekel Over a year ago

It should, however you better use [type=radio] (the a was missing there)

Reuben Gomes Over a year ago

lol yea spelling error couldn't edit after the next comment :P

Collectives™ on Stack Overflow

Get all values in current tag from multiple tags and inputs

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related