Sending data to database query using AJAX

Question

I want to send the content of the form from my HTML page to the PHP page using AJAX. It seems like the AJAX form is working, at can I see that it reacts when the button is pushed. However, the PHP page doesn't not receive the content of the form, because not happens to the query. Can you please tell me what I'm doing wrong? Is it in the PHP page or is it the AJAX code?

HTML page: jQuery-ajax.html

Form:

<form action='AjaxDifferentBids.php' method='post' id="form1">
    <input type='text' id="name" name='name'/><br>
    <input type='text' id="email" name='email'/><br>
    <input type='button' name='submit' value='Submit' id="submit" />
</form>

AJAX code:

$(function(){
    $('#submit').click(function(){
     $.ajax({
        type:'POST', 
        url: 'AjaxDifferentBids.php', 
        data: $('#form1').serialize(),
        success: function(response) {
      $('.MyJobsResultsRight').hide();
      $('.MyJobsResultsRightOtherBid').show();
            $('.MyJobsResultsRightOtherBid').find('.form_result').html(response);
        }
    });         
  });
});

PHP page: AjaxDifferentBids.php

<?php
//set connection variables
$host = "";
$username = "";
$password = "";
$db_name = ""; //database name


$mysqli = new mysqli($host, $username, $password, $db_name);

//check if any connection error was encountered
if(mysqli_connect_errno()) {
echo "Error: Could not connect to database.";
exit;
}


if(isset($_POST['Submit'])){ //the the user submitted the form

//include database connection
include 'Connection.php';



$query = "SELECT * FROM firms WHERE email = '".$_POST['email']."'";

//execute the query
if( $mysqli ->query($query) ) {
//if saving success
echo "Succes";
}else{
//if unable to create new record
echo "Database Error: Unable to create record.";
}
//close database connection
$mysqli->close();
} ?>

Thank you very much!!

Removing the action will set the action to the current URL. Don't remove it. Make sure its URL points to a sane fallback for when the JS fails. — Quentin, Dec 17 '14 at 16:27
**Danger**: You are **vulnerable to [SQL injection attacks](http://bobby-tables.com/)** that you need to [defend](http://stackoverflow.com/questions/60174/best-way-to-prevent-sql-injection-in-php) yourself from. — Quentin, Dec 17 '14 at 16:28
are you including your js file(if in a different file) or is the ajax code in your html file? — Jim, Dec 17 '14 at 16:32
I suppose it should be `input type = string` in the form for both the fields. — Prerak Sola, Dec 17 '14 at 16:34
You need to not capture `$('#submit').click()` and you need to capture `$('#form1').submit(function(){` and add `return false;` before the closing `});` — Ohgodwhy, Dec 17 '14 at 16:45
Add error reporting to the top of your file(s) right after your opening ` — Jay Blanchard, Dec 17 '14 at 16:51
Why do you need to include connection.php in thefile if you're setting up the connection in the file. Or are these 2 separate files? You also have a space in `if($mysqli ->query($query) )` right after `$mysqli` that shouldn't be there. — Jay Blanchard, Dec 17 '14 at 16:52
@Ohgodwhy Adding these it would not even register when i'm clicking the button? — user1825067, Dec 17 '14 at 16:53
@JayBlanchard I removed the connection.php inclusion and corrected the space, but no changes? — user1825067, Dec 17 '14 at 16:56

Collierre · Accepted Answer · 2014-12-17T17:02:59.397

3

If the PHP is not receiving the form content this will be confirmed in the JS error console. In chrome it will say something like :

POST http://yourdomain.tld/AjaxDifferentBids.php 404 (Not Found)

If this is the case check the PHP is in the same directory as the HTML, and that you are loading the HTML with a web server, not just opening it with the file:/// protocol.

If the PHP is receiving the ajax call - shown by something like:

XHR finished loading: POST "http://yourdomain.tld/AjaxDifferentBids.php"

Then the first problem in your PHP is:

if(isset($_POST['Submit'])){

$_POST['Submit'] does not exist because you have not really submitted the form by posting the HTML page, you have used ajax. The $_POST array actually looks like this:

array (
  'name' => 'thisname',
  'email' => 'thisemail',
)

So if you check for one of these values instead of 'Submit' you should then be able to perform your mysql query.

Finally, you will find it much easier to debug the PHP if you use error logging.

edited Dec 17 '14 at 17:02

answered Dec 17 '14 at 16:54

Collierre

946
8
16

It helped to set the isset to: `if(isset($_POST['email']))` Thank you very much! :-) – user1825067 Dec 17 '14 at 17:13
What if I change the input type of button to `` ? – user1825067 Dec 17 '14 at 20:06
`` is specifically for submitting a form via POST request. Because your code uses ajax to send the data, you are completely bypassing the form submission process, so `` is useless here. It's fine to just use a normal button 'or any element at all' to register the click evetn and ajax function to. If you were using `` as intended you would not be using ajax. – Collierre Dec 17 '14 at 20:14
Okay. The code above does register and post the data correct. But if I put the form into a do while loop, then the second button does not work. It would not even register when I'm clicking it while the first button is still working? – user1825067 Dec 17 '14 at 20:22
Why put the form in a do while loop? What are you trying to achieve? – Collierre Dec 17 '14 at 20:31
I want to create a menu of different bids for a specific product, where the user can click on each bid to see information on the bid and the product. But the number of bids is dynamic. There can be one bid on a product or there can be multiple. Do you understand or should I elaborate? – user1825067 Dec 17 '14 at 20:37
Ok and which code are you putting in the do while loop? – Collierre Dec 17 '14 at 20:51
The following code: `

` The loop then creates a button for each bid there is on the product. But it is only the first button that works? – user1825067 Dec 17 '14 at 20:53
Oh I see. If you're using the same javascript code as above, `$('#submit')` will only find the first submit button, because it uses a CSS id selector, of which there can only be one per page. To get all the submit buttons, use a CSS class selector. So your buttons will look like `` and your jquery selector will be `$('.submit')` – Collierre Dec 17 '14 at 20:59
Aha yes, that makes sense. Now it posts when click on each button, but it is the same variables that it sends no matter what button you click. Each button should send the specific bids ID, but all buttons sends the ID of the first button? – user1825067 Dec 17 '14 at 21:06
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/67162/discussion-between-collierre-and-user1825067). – Collierre Dec 17 '14 at 21:08

Logan Murphy · Answer 2 · 2014-12-17T17:27:34.747

3

jQuery's serialize function does not capture submit buttons so you need to append the value yourself

"Submit=Submit&" + $("#form1").serialize()

edited Dec 17 '14 at 17:27

answered Dec 17 '14 at 17:08

Logan Murphy

6,120
3
24
42

Sending data to database query using AJAX

2 Answers2