CODEWITHSUNDEEP
javascriptphpjqueryajax
treyBake
treyBake

Reputation: 6560

passing data to new page $_POST with jquery

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

Upvotes: 0

Views: 83

Answers (4)

Tirthraj Barot
Tirthraj Barot

Reputation: 2679

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!

Upvotes: 1

Ashok
Ashok

Reputation: 128

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'] ?>">

Upvotes: 0

Alessandro
Alessandro

Reputation: 4472

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>

Upvotes: 0

Thoby
Thoby

Reputation: 336

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.

Upvotes: 0

Related Questions