jQuery / AJAX数据没有发布

Question

I am trying to create a very basic auction page on a site I am working on. I'm sort of working it out as I go along but I am now a bit stuck.

Data is stored in a MySQL table, this data has the image link, the ID, and the current bid.

I then retrieve the data in PHP/HTML, example here: $result = mysqli_query($con,"SELECT * From auction WHERE category = 'Bathroom' ORDER BY ID DESC");

while($row = mysqli_fetch_array($result))
  {
    echo "<form name='auction' id='auction'><div class='auction-thumb'>
                <div class='auction-name'>" . $row['Item'] . "</div>";
            echo "<img class='auction' src='" . $row['ImagePath'] . "' />";
            echo "<div class='auction-bid'>Current Bid: £" . $row['CurrentBid'] . "</div>";
            echo "<div class='auction-bid'>Your Name: <input type='text' class='bidder' name='bidname'/></div>";
            echo "<div class='auction-bid'>Your Bid: <input type='text' class='auction-text' name='bid'/></div>";
            echo "<div class='auction-bid'><button name='submit' id='submit' value='" . $row['ID'] . "' type='submit'>Place Bid!</button></div>";
    echo "</div></form>";
  }
echo "</table>";

This code pulls through the items absolutely fine. Along with a textbox for a name and a bid (I am not doing anything with the name at the moment).

My jQuery then looks like this:

$(document).ready(function(){
        $('#auction').submit(function(){
            var id = $('#submit').val();
            var bidname = $('input[name=bidname]').val();
            var bid = $('input[name=bid]').val();


            $.ajax({
            type: "POST",
            url: "auction-handler.php",
            dataType: "json",
            data: {bidname: bidname, bid: bid, id: id},
            success: function(){
            }
        });
        return true;

        }); 
    });

Again this is very basic and I am not concerned about validation just yet.

And finally here is a snippet of my PHP code:

$bidname = $_POST['bidname'];
$bid = $_POST['bid'];
$id = $_POST['id'];

$query = "UPDATE auction SET CurrentBid = '$bid' WHERE ID = '$id'";

mysqli_query($con, $query) or die(mysqli_error());


mysqli_close($con);

My problem is that when I click submit, nothing really happens. All the variable names and values get put into the browser address bar, and the page just seems to refresh.

The data does not get posted and when I debug with Firebug, I just get a red cross and it doesn't give me any errors.

I know from just looking at my code that best practices aren't followed, but I just want to get something working and then tidy it up later.

If anyone could point me in the right direction that would be a big help.

Thank you, and if you need anymore information please just let me know.

Answer 1

First of all: You need to rewrite your form element every element should have an unique id to differentiate the respective element.

<?php while($row = mysqli_fetch_array($result)){ ?>
     <form name='auction' id='auction<?php echo $row['ID'] ?>'>
        <input type='hidden' name='id' value='<?php echo $row['ID'] ?>'>
        <div class='auction-thumb'>
            <div class='auction-name'><?php echo $row['Item'] ?></div>
            <img class='auction' src='<?php echo $row['ImagePath'] ?>' />            
            <div class='auction-bid'>Current Bid: £<?php echo row['CurrentBid'] ?></div>
            <div class='auction-bid'>Your Name: <input type='text' class='bidder' name='bidname'/></div>
            <div class='auction-bid'>Your Bid: <input type='text' class='auction-text' name='bid'/></div>
            <div class='auction-bid'>
                <input type='submit' name='submit' value='Place Bid!'>
            </div>
        </div>
    </form>

and replace your jquery code to

$(document).ready(function(){
    $('form[name="auction"]').submit(function(){
        var id = $(this).find('input[name="id"]').val();
        var bidname = $(this).find('input[name="bidname"]').val();
        var bid = $(this).('input[name="bid"]').val();

        $.ajax({
           type: "POST",
           url: "auction-handler.php",
           dataType: "json",
           data: {bidname: bidname, bid: bid, id: id},
           success: function(){
           }
        });
        return false;
    }); 
});