Search code examples
jqueryajaxjqxhr

AJAX doesn't seem to be working


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

Solution

  • 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

    enter image description here