AJAX form won't post form values, when inside a php while loop

Question

I'm having a problem with my code. the html form wont post the values with AJAX, when pressing the "indsend feedback" button. The jquery code works fine when only including a button with a value inside the form, but when i try to include multiple elements, it no longer works and starts posting an empty array.

The code works fine, when used standalone outside the project.

HTML CODE HERE FOR THE FORM and WHILE LOOP.

        <tbody>
        <?php
 $query = "SELECT * FROM psv2_orders_lines, psv2_orders WHERE psv2_orders_lines.order_id = '$orderid' AND psv2_orders.id = '$orderid'";
 $result = mysqli_query($dbCon, $query) or die(mysqli_error($dbCon));
 while ($row = mysqli_fetch_array($result, MYSQLI_ASSOC)) {
 ?>
        <tr>
            <td class="text-center">
                <!-- // Der laves en echo, hvor der udskrives ordrebilledernes destinationer.. -->
                <span class='zoom ex2'>
                    <img src="img/ordrer/<?php echo $orderid,"-", $rowcompany['company'], " ", $row['product'],"/", $row['style_1'],"1",".jpg";?>"
                        alt="..." class="img-fluid imgsize">
                </span>
                <span class='zoom ex2'>
                    <img src="img/ordrer/<?php echo $orderid,"-", $rowcompany['company'], " ", $row['product'],"/", $row['style_1'],"2",".jpg";?>"
                        alt="..." class="img-fluid imgsize">
                </span>
            </td>
            <td class="text-center"><?php echo $row['line'];?></td>
            <td>
                <ul class="list-group">
                    <li class="list-group-item">
                        <h5>Style 1</h5>
                        <?php echo $row['style_1'];?>
                    </li>
                    <li class="list-group-item">
                        <h5>Style 2</h5>
                        <?php echo $row['style_2']; ?>
                    </li>
                    <li class="list-group-item">
                        <h5>Style 3</h5>
                        <?php echo $row['style_3']; ?>
                    </li>
                    <li class="list-group-item">
                        <h5>Style 4</h5>
                        <?php echo $row['style_4']; ?>
                    </li>
                </ul>
            </td>
            <form method="post" action="feedback.php" class="feedbackknap">
                <td class="text-center">
                    <div class="container">
                        <div class="form-group">
                            <textarea class="form-control" rows="10" cols="50" placeholder="Skriv problemet her..."
                                name="orderrejectcomment"></textarea>                 
                        </div>
                    </div>
                </td>
                <td class="text-center">
                    <button type="submit" name="style1" value="hej" class="btn btn-dark">Indsend
                        feedback</button>
                </td>
                </form>
        </tr>
        <?php
 }
 ?>

    </tbody>

Here is the jQuery code:

$(document).ready(function() {
$('.feedbackknap').on('submit', function(){
    var that = $(this),
    url = that.attr('action'),
    type = that.attr('method'),
    data = {};

    that.find('[name]').each(function(index, value) {
        var that = $(this),
        name = that.attr('name'),
        value = that.val();
        data[name] = value; 
    });

    $.ajax({
        url: url,
        type: type,
        data: data,
        success: function(response) {
            console.log(response);
        }
    });

return false;
});});

PHP action folder:

<?php print_r($_POST); ?>

It is a very bad idea to use `die(mysqli_error($$conn));` in your code, because it could potentially leak sensitive information. See this post for more explanation: [mysqli or die, does it have to die?](https://stackoverflow.com/a/15320411/1839439) — Dharman, Dec 11 '20 at 14:04
No, that function would corrupt the data. Don't use such functions. — Dharman, Dec 11 '20 at 14:20
So in theory i should delete all or die statements in my code? And find a way to secure my inputs, so that i dont recieve corrupt data? — fachze, Dec 11 '20 at 14:26
Yes. Enable proper error reporting and use prepared statements. — Dharman, Dec 11 '20 at 14:27

score 0 · Accepted Answer · answered Dec 11 '20 at 13:46

0

Maybe you should use serializeArray() to serialize in array your entire form like this.

 $.ajax({
        url: url,
        type: type,
        data: $(this).serializeArray(),
        success: function(response) {
            console.log(response);
        }
    });

answered Dec 11 '20 at 13:46

Alexandre Painchaud

462
3
7

It's posting the textarea value now, but seems it still wont post the value from the button. Thank you for your time! – fachze Dec 11 '20 at 13:50
try to change it to an input type="submit" **EDIT** do not forget `preventDefault` to prevent the real submit ! – Alexandre Painchaud Dec 11 '20 at 13:51
Seems like the $(this).serializeArray() makes the button value invalid? Have you experienced this before? – fachze Dec 11 '20 at 14:04
look at my previous comment, i think button is not a real form component. – Alexandre Painchaud Dec 11 '20 at 14:10
Thanks, i understand now! It all works, made an invisible input element, with a value in it. It's posting the values correctly now. Have a nice day!! – fachze Dec 11 '20 at 14:12

AJAX form won't post form values, when inside a php while loop

1 Answers1