AJAX doesn't seem to be working

Question

When i click on the button to submit my form using the ajax code below, nothing happens, none of the alerts are triggered to tell me if there is an error or a success and so i am not sure how to know what is happening, no matter what i try i can not get the alerts to trigger.

I have put the direct url in to the form and bypassed the ajax and so i know that the php page is working correctly, it just doesn't seem to get the data when it is passed via the AJAX code

Is there any way to see what data is being passed to the php page?

$(document).ready(function() {
  $('form.submit').submit(function() {
    var name = $(this).find('.name').attr('value');
    var address = $(this).find('.address').attr('value');
    var number = $(this).find('.number').attr('value');
    var price = $(this).find('.price').attr('value');
    var deposit = $(this).find('.deposit').attr('value');
    var product = $(this).find('.product').attr('value');
    var payment_type = $(this).find('.payment_type').attr('value');
    var deal_date = $(this).find('.deal_date').attr('value');
    var install_date = $(this).find('.install_date').attr('value');
    var installed = $(this).find('.installed').attr('value');
    var notes = $(this).find('.notes').attr('value');
    var contract_received = $(this).find('.contract_received').attr('value');
    var id = $(this).find('.id').attr('value');

    // ...

    $.ajax({
      type: "POST",
      url: "http://www.thinkecosolutions.co.uk/test/services/update.php",
      data: $('form.submit').serialize(), // or just: data: $(this).serialize(),
      success: function() {
        alert('success');
      },
      error: function() {
        alert('failure');
      }
    });
    return false;
  });
});

OK so having used the developer tools, it has become apparent that the code is not getting to the php page and so it must be the way that i have the js page constructed and the form is not seeing the ajax section maybe? below is my js page.

$('#detailsPage1').live('pageshow', function(event) {
var id = getUrlVars()["id"];
$.getJSON(serviceURL + 'getemployee.php?id='+id, displayEmployee1);
});

function displayEmployee1(data) {
var employee = data.item;
console.log(employee);
$('#fullName').html('<form action=""  id="submit" class="submit"><label>Name</label><br><input name="name" class="form-control" type="text" placeholder="Name" value="' + employee.name + '"/><br><label>Number</label><br><input name="number" class="form-control" type="text" placeholder="Number" value="' + employee.number + '"/><br><label>Address</label><br><input name="address" class="form-control" type="text" placeholder="Address" value="' + employee.address + '"/><br><label>Price</label><br><input name="price" class="form-control" type="text" placeholder="Price" value="' + employee.price + '"/><br><label>Deposit</label><br><input name="deposit" class="form-control" type="text" placeholder="Deposit" value="' + employee.deposit + '"/><br><label>Payment Type</label><br><input name="payment_type" class="form-control" type="text" placeholder="Payment type" value="' + employee.payment_type + '"/><br><label>Deal Date</label><br><input name="deal_date" class="form-control" type="text" placeholder="Deal Date" value="' + employee.deal_date + '"/><br><label>Install Date</label><br><input name="install_date" class="form-control" type="text" placeholder="Install Date" value="' + employee.install_date + '"/><br><label>Installed</label><br><input name="installed" class="form-control" type="text" placeholder="Installed" value="' + employee.installed + '"/><br><label>Notes</label><br><input name="notes" class="form-control" type="text" placeholder="Notes" value="' + employee.notes+ '"/><br><input name="id" id="id" type="hidden" value="' + employee.id + '" /><br><label>Contract Received</label><br><input name="contract_received" class="form-control" type="text" placeholder="Contract Received" value="' + employee.contract_recieved + '"/><br><br><input type="submit" name="button" id="button" value="Update" /></form>');

$(document).ready(function(){
$('form.submit').submit(function () {
var name = $(this).find('.name').attr('value');
var address = $(this).find('.address').attr('value');
var number = $(this).find('.number').attr('value');
var price = $(this).find('.price').attr('value');
var deposit = $(this).find('.deposit').attr('value');
var product = $(this).find('.product').attr('value');
var payment_type = $(this).find('.payment_type').attr('value');
var deal_date = $(this).find('.deal_date').attr('value');
var install_date = $(this).find('.install_date').attr('value');
var installed = $(this).find('.installed').attr('value');
var notes = $(this).find('.notes').attr('value');
var contract_received = $(this).find('.contract_received').attr('value');
var id = $(this).find('.id').attr('value');
// ...
    $.ajax({
type: "POST",
url: "http://www.thinkecosolutions.co.uk/test/services/update.php",
data: $('form.submit').serialize(),    // or just: data: $(this).serialize(),
success: function(){
alert('success');
 },
error: function(){
alert('failure');
 }
 });
return false;
});
});

console.log(employee.telephone);
if (employee.notes) {}


  }

function getUrlVars() {
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
    hash = hashes[i].split('=');
    vars.push(hash[0]);
    vars[hash[0]] = hash[1];
}
return vars;
}

Have you tried your browser's inspector? Firefox and Chrome (I prefer Chrome) both have really nice web inspectors. They both have a section called "network" that shows you what was sent and received. Right click on part of the webpage and choose "inspect" (or similar) to bring up the inspector. This will also let you see the console where the error messages are displayed. — LinuxDisciple, Oct 28 '16 at 22:10
You are likely submitting the actual form (which refreshes the page) before your ajax gets called, try `$('form.submit').submit(function(e) { e.preventDefault();` — Wesley Smith, Oct 28 '16 at 22:34

Jorge Cordero · Accepted Answer · 2016-10-28T22:49:27.417

0

I would suggest you to do this (I do this every time):

//This line prepares your form to be submited
$('#YOUR_FORM_ID').on('submit', function (event ) {

    //Then you prevent your form to be submited by default
    event.preventDefault();

    var form = $('#YOUR_FORM_ID').serialize();

    $.ajax({
        method: "POST",
        url: "YOUR_URL",
        data: form,
        success: function( msg ) {
           //Any action after success 
        },
        error: function(){
            alert( "Error")
        }
    });
});

Any doubt just let me know

In comments, I explained step by step how to check what is being sent to an specific php file

edited Oct 28 '16 at 22:49

answered Oct 28 '16 at 22:34

Jorge Cordero

96
1
1
8

"Is there any way to see what data is being passed to the php page?". This doesn't show him any data passed though. I'd `console.log(msg)` to see what is sent. – justDan Oct 28 '16 at 22:40
Sure, I will explain step by step in Chrome: 1. Open Developer Tools 2. Go to Network and refresh the page for Network Tab to record any change. 3. Submit the form, and in Net tab you will see the php page. 4. Click on that php file in Net Tab, go to Headers 5. At the bottom of header, you will see the data sent to php – Jorge Cordero Oct 28 '16 at 22:46

AJAX doesn't seem to be working

1 Answers1