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!

Your HTML code is invalid, you can not have form as a child element of table – form has to either go around the whole table, or be placed entirely inside a td element. — C3roe
– C3roe, Commented Mar 31, 2014 at 11:37
When I access embeddedauctions.php directly, the form works with <form> inside <table> — Koala
– Koala, Commented Mar 31, 2014 at 11:40
It is simply incorrect, and you can not know what DOM the browser will make of it – so fix it. — C3roe
– C3roe, Commented Mar 31, 2014 at 11:45
Ok, I have changed it, however the problem still persists. I will use form outside of tables from now on though, thanks. — Koala
– Koala, Commented Mar 31, 2014 at 11:48
Why use a form with no input text ? Why not make it a button and attach an ajax request to the click event of that button ? — Ahmad Essam
– Ahmad Essam, Commented Mar 31, 2014 at 11:56

Fisherman · Accepted Answer · 2014-03-31 12:03:54Z

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!";
    }
    ?>

answered Mar 31, 2014 at 12:03

Fisherman

6,1311 gold badge33 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

blue · Accepted Answer · 2014-03-31 11:52:16Z

0

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

Edit:

Remove the slash at the beginning of the URL.

edited Mar 31, 2014 at 11:52

answered Mar 31, 2014 at 11:35

blue

1,9471 gold badge11 silver badges8 bronze badges

2 Comments

Gaurav Pandey Over a year ago

There is a div with ID "auctions"

Koala Over a year ago

as @gaurav said there is an auctions ID, I added exit; but the form does not even submit to begin with, however it all works when I access embeddedauctions.php directly but It needs to be accessed by auctions.php to update everytime a new entry or update is made to the database.

Koala · Accepted Answer · 2014-03-31 11:55:02Z

0

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>

answered Mar 31, 2014 at 11:55

Koala

5,5634 gold badges27 silver badges34 bronze badges

Collectives™ on Stack Overflow

php form submission when using Ajax/jQuery

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related