Ajax Request Hit or Miss with PHP SQL Submit

Question

I have a form, that after validation, it executes two Ajax requests and then submits the form to create an entry in a MySQL database. The two Ajax requests return URLs (links) to Google Documents which are created by upload.php.

However, the Ajax request for "agenda" comes across an error when the form is filled with data that meets certain unknown criteria.

When the same GET URL is accessed manually, a URL (link) of the Google Document is returned.

So the ultimate problem is when the Ajax request comes across the error, I cannot successfully submit the form.

---

After form validation, Ajax requests are sent to upload.php and then the form is submitted via POST to create.php .

The responses from the Ajax are assigned to hidden values so that they can be stored along with the form submit.

form-validation.js

submitHandler: function(form) {
$('#submitButton').button('loading');
console.log('Loading Button');

$("#cancelButton").prop("disabled", true);
console.log('Disable Button');


success1.show();
error1.hide();
var eName = $('#create_event').find('input[name="eventName"]').val();
var eDate = $('#create_event').find('input[name="eventDate"]').val();
var eType = $('#create_event').find('select[name="eventType"]').val();
var separator = "&";
var agendaURL = "http://xxxx.xxx/libraries/upload.php?fType=agnd" + separator + "eName=" + eName + separator + "eDate=" + eDate + separator + "eType=" + eType;
var minURL = "http://xxxx.xxx/libraries/upload.php?fType=min" + separator + "eName=" + eName + separator + "eDate=" + eDate + separator + "eType=" + eType;
var agendaReturn = getAgenda(agendaURL);
console.log('Called getAgenda');

agendaReturn.success(function(data) {
    $('input[name="agendaURL"]').val(data);
    console.log('Assigned agendaURL hidden');

});

var minReturn = getMin(minURL);
console.log('Called getMin');

minReturn.success(function(data) {
    $('input[name="minURL"]').val(data);
    console.log('Assigned minURL hidden');

    submitForm();
    console.log('Form submit called');

});


function submitForm() {
    console.log('Form submitting');

    $('#create_event').unbind().submit();
}

function getAgenda(agendaURL) {
    return $.ajax({
        url: agendaURL,
        type: 'get',
        dataType: 'text',
        async: true,
    });

}

function getMin(minURL) {
    return $.ajax({
        url: minURL,
        type: 'get',
        dataType: 'text',
        async: true,
    });

    }

}

create.php

include '../../libraries/library.php';
session_start();

if((!empty($_POST)) && $_POST['agendaURL'] != null) {
/**
 * Create the event in main database
 */
 $query_paramsCE  = array(
     ':eventID' => getRandom(),
     ':cCode' => getChapCode(),
     ':name' => $_POST['eventName'],
     ':date' => $_POST['eventDate'],
     ':timeStart' => $_POST['eventStart'],
     ':timeEnd' => $_POST['eventEnd'],
     ':location' => $_POST['eventLoc'],
     ':type' => $_POST['eventType'],
     ':rank' => setEventRank($_POST['eventType']),
     ':description' => $_POST['eventDescription'],
     ':agendaLink' => $_POST['agendaURL'],
     ':minutesLink' => $_POST['minURL'],
     ':creator' => getFirstLast(),
     ':creatorTimestamp' => timestamp()


 );
 $queryCE                  = " 
             INSERT INTO `events` ( 
                   eventID,
                   cCode,
                   name, 
                   date,
                   timeStart,
                   timeEnd,
                   type,
                   rank,
                   location,
                   description,
                   agendaLink,
                   minutesLink,
                   creator,
                   creatorTimestamp

             ) VALUES ( 
                   :eventID,
                   :cCode,
                   :name, 
                   :date,
                   :timeStart,
                   :timeEnd,
                   :type,
                   :rank,
                   :location,
                   :description,
                   :agendaLink,
                   :minutesLink,
                   :creator,
                   :creatorTimestamp                    
             ) 

                 ON DUPLICATE KEY UPDATE 
                    eventID = :eventID

         ";
 $createEvent = dbSubmit($createEvent, $queryCE, $query_paramsCE);

 redirect('http://xxxx.xxx/leadership/attendance/events');

}
else {
    echo "Error. Please contact an adminstrator.";
}

I've attached a screenshot of the console and the webpage:

The following screenshot is the form data that fails the Ajax request:

Answer 1

It is not entirely clear what your question is, but a problem that could cause your agenda request to fail, is that you are not encoding your values for use in a url.

So the first thing to do, is encode all values correctly:

var agendaURL = "http://xxxx.xxx/libraries/upload.php?fType=agnd" + separator + "eName=" + encodeURIComponent(eName) + separator + ... // etc.
                                                                                           ^^^^^^^^^^^^^^^^^^^^^^^^^ here

You can also have jQuery do that automatically by sending a data value that consists of key - value pairs where the key is the name that you want to send.

There is also no need to make synchronous ajax calls: You can start both at the same time asynchronously and submit the form when both are done:

$.when(agendaReturn, minReturn).then(function(data1, data2) {
  // assign your values
  ...

  // submit your form
  ...
});

Lastly, you seem to be making simple GET requests before you submit your form. Are these really necessary? I can imagine that it would be a lot faster if you submitted the form and had the server fetch those urls when you handle the submission.

Then you would need to use urlencode() in php to encode your values by the way.