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

You need to re-write this a bit: ID's have to be unique and when you loop through your items you assign the same IDs over and over to elements in different forms.

So when you try to get the values in your submit handler, jQuery does not know which value to get (it probably gets the value of the first element with that ID).

You should start with changing the IDs to for example classes and then serialize (for example...) the submitted form - $(this) in your submit handler - to get the correct data.

Answer 2

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;
    }); 
});

Answer 3

Add following keys in ajax to trace the errors.

  $.ajax({
    url: "auction-handler.php",
    type: "POST",
    dataType: "json",
    data: {bidname: bidname, bid: bid, id: id},
    crossDomain:true,
    success: function(result){ console.log(result);   }
    error: function(httpReq,status,exception){
        alert("error - " +status+" "+exception);
    }
});