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: