使用jQuery将数据传递到新页面$ _POST

Question

I have two tables and an input inside a form that more or less goes like this:

the table code (the two tables are the same, except for a slight difference in what table it calls):

<table cellpadding="0" cellspacing="0" class="paperTable searchResultContainer">
    <thead>
        <tr>
            <th>Name</th>
            <th>ID</th>
            <th>Company Reg.</th>
            <th>Postcode</th>
        </tr>
    </thead>

    <tbody>
        <?php while ($row = $items->fetch_assoc()) : ?>
            <tr class="row" data-address1="<?php echo $row['address1']; ?>"
                data-address2="<?php echo $row['address2']; ?>" data-address3="<?php echo $row['address3']; ?>"
                data-county="<?php echo $row['address4']; ?>" data-postcode="<?php echo $row['postcode']; ?>"
            >
                <td><?php echo (strlen($row['name'])           > 0 ? $row['name']           : '-'); ?></td>
                <td><?php echo (strlen($row['id'])             > 0 ? $row['id']             : '-'); ?></td>
                <td><?php echo (strlen($row['company_reg_no']) > 0 ? $row['company_reg_no'] : '-'); ?></td>
                <td><?php echo (strlen($row['postcode'])       > 0 ? $row['postcode']       : '-'); ?></td>
            </tr>
        <?php endwhile; ?>
    </tbody>
</table>

and my input is a simple one-liner checkbox that asks if none of the above matches the search..

what I'm trying to do, if the user clicks a table row, it posts the .data() attributes of the <tr> tag to the next step in the form, which is another page.

I've tried the hidden input idea, but because it's in a while loop where the inputs share the same name, the value of the input will be the last in the loop because it's last set. I've also tried ajax:

$.ajax({
    data:    $(this).data(),
    type:    'post',
    url:     'stepDos.php',
    success: function(data)
             {
                 window.location.replace('/path/to/stepDos.php');
             }
});

which didn't work when I var_dumped $_POST it returned empty.

I also tried a $.post function:

$.post('/path/to/stepDos.php', {data: data}, function(ev)
{
    window.location.replace('/path/to/stepDos.php');
});

again no avail - anything I'm missing?

Thanks

Answer 1

As I mentioned in the comment, you don't have to make one single form with all the data inside it.. Instead you can go for 1 form per row in a loop.

This will give you the intended result!

Answer 2

What you're doing is POST-ing data to the page in the background (that's what the jQuery is for in this case), and just redirecting there with no post data afterwards (that's what window.location.replace(...) does). What I'd suggest is just creating a form and submitting that, that way your browser will copy all the post fields and continue like it would.

Answer 3

You could retrive data attributes by calling .data() function, see following snippet:

 $(".row").click(function(){ console.log($(this).data()); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table cellpadding="0" cellspacing="0" class="paperTable searchResultContainer"> <thead> <tr> <th>Name</th> <th>ID</th> <th>Company Reg.</th> <th>Postcode</th> </tr> </thead> <tbody> <tr class="row" data-address1="addr11" data-address2="addr12" data-address3="addr13"> <td>Nome 1</td> <td>ID 1</td> <td>Company 1</td> <td>26027</td> </tr> <tr class="row" data-address1="addr21" data-address2="addr22" data-address3="addr23"> <td>Nome 2</td> <td>ID 2</td> <td>Company 2</td> <td>26900</td> </tr> <tr class="row" data-address1="addr31" data-address2="addr32" data-address3="addr33"> <td>Nome 3</td> <td>ID 3</td> <td>Company 3</td> <td>20151</td> </tr> </tbody> </table> 

Answer 4

You can try using hidden inputs with attribute names with array format like below with row['id'] as key index.

<input type="hidden" name="data[<?php echo $row['id'] ?>]['id']" value="<?php echo $row['id'] ?>">
<input type="hidden" name="data[<?php echo $row['id'] ?>]['name']" value="<?php echo $row['name'] ?>">
<input type="hidden" name="data[<?php echo $row['id'] ?>]['company_reg_no']" value="<?php echo $row['company_reg_no'] ?>">
<input type="hidden" name="data[<?php echo $row['id'] ?>]['postcode']" value="<?php echo $row['postcode'] ?>">