php form submission when using Ajax/jQuery

Question

I am trying to create something similar to a live auction, I am using Ajax/jQuery to basically refresh a embedded page to show any database changes (such as a new bid), this all works however, when trying to add a form to create a bid the form does not submit, how can I create a form that corresponds with the embedded page and updates the database accordingly.

What i've tried to far:

auctions.php:

<?php
if(isset($_POST['100k'])) {
echo "Bidded!";
}
?>
<div id="auctions">Loading Auctions, please wait...</div>

<script type="text/javascript">

setInterval(function()
{
   $.ajax({url:"/embeddedauctions.php", type:"GET", async:true, cache:false, success:function(result)
{
     $("#auctions").html(result);

}});

},1000);
</script>

embeddedauctions.php

    <?php
    if(isset($_POST['100k'])) {
    echo "Bidded!";
    }
    ?>

<table class="table table-bordered">
      <thead>
        <tr>
          <th>Name</th>
          <th>Start Price</th>
          <th>Buy Now</th>
          <th>Current Bid</th>
          <th>Bid</th>
        </tr>
      </thead>
      <tbody>

<?php
          $query = $db->query('SELECT * FROM auctions WHERE active = 1 ORDER BY endTime ASC') or die(mysqli_error($db));
          $num = $query->num_rows;
          if($num > 0) {

          foreach($query as $row) {
              $name = $row['name'];
          $startPrice = $row['startPrice'];
          $buyNow = $row['buyNow'];
          $currentBid = $row['currentBid'];

          echo '

          <form action="/auctions.php" method="post">
          <div id = "container">
                  <tr>
          <td>'.$name.'</td>
          <td>'.$startPrice.'</td>
          <td>'.$buyNow.'</td>
         <td>'.$currentBid.'</td>
          <td><input type="submit" class="btn btn-xs btn-success" name="100k" value="Bid +&pound;100k"></td>
          </tr>
          </form>
          ';

          }
          }
?>
      </tbody>
    </table>

Is there any way to submit the form successfully while on auctions.php, currently it does nothing when I click the submit button, thanks!

Answer 1

auctions.php:

<?php
    if(isset($_POST['field_name']) && ($_POST['field_name']==100K) ) {
    echo "Bidded!";
    }
    ?>
    <div id="auctions">Loading Auctions, please wait...</div>

    <script type="text/javascript">

    setInterval(function()
    {
       $.ajax({
           url:"/embeddedauctions.php", 
           type:"post",
           async:true,
           dataType:'html',
           data:'field_name=100k' 
           cache:false,
           success:function(result)
    {
         $("#auctions").html(result);

    }});

    },1000);
    </script>

and the server page( embeddedauctions.php ) change the first few lines two this

  <?php
    if(isset($_POST['field_name']) && ($_POST['field_name']==100K) ) {
    echo "Bidded!";
    }
    ?>

Answer 2

1. An HTML element with ID of "auctions" is missing from the exposed code, so nowhere to echo the result.
2. You'd probably need to add an exit; after you've echoed "Bidded!".
3. Add an error function and check result and status.

Edit :

Remove the slash at the beginning of the URL.

Answer 3

I found removing from embeddedauctions.php and adding the form tags around fixed the problem.

<form action="/auctions.php" method="POST">
<div id="auctions">Loading Auctions, please wait...</div>

<script type="text/javascript">

setInterval(function()
{
   $.ajax({url:"/embeddedauctions.php", type:"GET", async:true, cache:false, success:function(result)
{
     $("#auctions").html(result);

}});

},1000);
</script>
</form>