execute ajax php after successful previous ajax

Question

I'm putting together an HTML form where a user fills out their info and uploads an image of themselves. I've written two separate ajax functions to do this: 1) upload image, 2) submit the form (after it has been properly validated) and insert it into a sql database.

I've got each of the functions working individually, but I cannot get them to work together. What I mean, is that I only want to insert data into the SQL DB if the image is properly uploaded; the image upload fails for various reasons including too large a file size and filetype.

Script that does the uploading:

// upload the image
    $(document).ready(function (e){
        $("#uploadForm").on('submit',(function(e){
            document.getElementById("submit").disabled = true; // disable submit button so user doesn't press it again
            e.preventDefault();
            $.ajax({
                url: "upload.php?" + rand,
                type: "POST",
                data:  new FormData(this),
                contentType: false,
                cache: false,
                processData:false,
                success: function(d) {
                    console.log("image properly uploaded");
                },
                complete: function(data){
                }
            });
        }));
    });

script that does the form validation and inserting of data into SQL

// submit the form data
        $(function() {
            $(".form-horizontal").find("input,textarea,select").jqBootstrapValidation({
                preventSubmit: true,
                submitError: function($form, event, errors) { // if error
                    console.log("submit error")
                },
                submitSuccess: function($form, event) { // if success
                    if($('#form input').val() == '') { // if honeypot div is empty when submit is pressed, then this is a human
                        console.log("form is filled out properly")

                        var genderSelect = document.getElementById("gender");
                        var raceSelect = document.getElementById("race");
                        var gender = genderSelect.options[genderSelect.selectedIndex].value;
                        var race = raceSelect.options[raceSelect.selectedIndex].value;
                        var email = $("input#email").val();
                        var phone = $("input#phone").val();
                        var dob = $("input#dob").val();
                        var skill = $("input#skill").val();
                        var fn = $("input#fn").val();
                        var ln = $("input#ln").val();
                        var photo = document.getElementById('photo').value.split(/(\\|\/)/g).pop();

                        // execute PHP script that runs bash script
                        $.ajax({
                            url: "insertSQL.php",
                            type: "GET",
                            cache: false,
                            data: {fn: fn, ln: ln, email: email, phone: phone, sex: gender, ethnicity: race, dob: dob, skill: skill, photo: photo},
                            success: function(data) {
                                $("#success").html("Your data was successfully submitted, thank you.")
                                $("#success").css('display','block') // show the download div
                                console.log("data successfuly inserted into DB")
                            }
                        });
                        event.preventDefault();
                    } else {
                        console.log("bot")
                    }
                },
                filter: function() {
                    return $(this).is(":visible");
                }
            });
        });

I've tried multiple approaches including putting one function in the success: section of the other, by putting it into the complete: part as well as async: false but couldn't get them to play together nicely (only one function would run properly). What am I doing wrong?

EDIT: I've taken your advice and updated the code to the following:

// upload the image
        $(document).ready(function (e){
            $("#uploadForm").on('submit',(function(e){
                document.getElementById("submit").disabled = true; // disable submit button so user doesn't press it again
                e.preventDefault();
                $.ajax({
                    url: "upload.php?" + rand,
                    type: "POST",
                    data:  new FormData(this),
                    contentType: false,
                    cache: false,
                    processData:false,
                    success: function(d) {
                        console.log("image properly uploaded");
                        submitSQL();
                    },
                    complete: function(data){
                    }
                });
            }));
        });

        function submitSQL() {
            console.log("submitting form");

            // submit the form data
            $(function() {
                $(".form-horizontal").find("input,textarea,select").jqBootstrapValidation({
                    preventSubmit: true,
                    submitError: function($form, event, errors) { // if error
                        console.log("submit error")
                    },
                    submitSuccess: function($form, event) { // if success
                        if($('#form input').val() == '') { // if honeypot div is empty when submit is pressed, then this is a human
                            console.log("form is filled out properly")

                            var genderSelect = document.getElementById("gender");
                            var raceSelect = document.getElementById("race");
                            var gender = genderSelect.options[genderSelect.selectedIndex].value;
                            var race = raceSelect.options[raceSelect.selectedIndex].value;
                            var email = $("input#email").val();
                            var phone = $("input#phone").val();
                            var dob = $("input#dob").val();
                            var skill = $("input#skill").val();
                            var fn = $("input#fn").val();
                            var ln = $("input#ln").val();
                            var photo = document.getElementById('photo').value.split(/(\\|\/)/g).pop();

                            // execute PHP script that runs bash script
                            $.ajax({
                                url: "insertSQL.php",
                                type: "GET",
                                cache: false,
                                data: {fn: fn, ln: ln, email: email, phone: phone, sex: gender, ethnicity: race, dob: dob, skill: skill, photo: photo},
                                success: function(data) {
                                    $("#success").html("Your data was successfully submitted, thank you.")
                                    $("#success").css('display','block') // show the download div
                                    console.log("data successfuly inserted into DB")
                                }
                            });
                            event.preventDefault();
                        } else {
                            console.log("bot")
                        }
                    },
                    filter: function() {
                        return $(this).is(":visible");
                    }
                });
            });
        }

It looks like the submitQSL function is being called since I see the 'submitting form' message in console, however nothing else happens after that. Could it be something with the bootstrapvalidation script?

Answer 1

Use named functions.

function Ajax1() {
   /* your ajax stuff */
}

function Ajax2() {
   /* second ajax stuff */
}

then you can call Ajax2 from Ajax1's success section.

Answer 2

You can call a submitForm() method within the success: of the uploadImage ajax.

    $(document).ready(function (e){
    $("#uploadForm").on('submit',(function(e){
        document.getElementById("submit").disabled = true; // disable submit button so user doesn't press it again
        e.preventDefault();
        $.ajax({
            url: "upload.php?" + rand,
            type: "POST",
            data:  new FormData(this),
            contentType: false,
            cache: false,
            processData:false,
            success: function(d) {
                console.log("image properly uploaded");
                submitForm();
            },
            complete: function(data){
            }
        });
    }));
});

function submitForm(){
 //Your code here

}

Answer 3

Solved it with the following, not sure what I was doing wrong previously:

 <script>

        var rand = Math.floor(Math.random() * 1000);



        // submit the form data
        $(function() {
            $(".form-horizontal").find("input,textarea,select").jqBootstrapValidation({
                preventSubmit: true,
                submitError: function($form, event, errors) { // if error
                    console.log("submit error")
                },
                submitSuccess: function($form, event) { // if success
                    if($('#form input').val() == '') { // if honeypot div is empty when submit is pressed, then this is a human
                        document.getElementById("submit").disabled = true; // disable submit button so user doesn't press it again
                        console.log("form is filled out properly, uploading file...")

                        //disable the default form submission
                        event.preventDefault();

                        // get all our vars
                        var genderSelect = document.getElementById("gender");
                        var raceSelect = document.getElementById("race");
                        var gender = genderSelect.options[genderSelect.selectedIndex].value;
                        var race = raceSelect.options[raceSelect.selectedIndex].value;
                        var email = $("input#email").val();
                        var phone = $("input#phone").val();
                        var dob = $("input#dob").val();
                        var skill = $("input#skill").val();
                        var fn = $("input#fn").val();
                        var ln = $("input#ln").val();
                        var photo = document.getElementById('photo').value.split(/(\\|\/)/g).pop();


                        //grab all form data
                        var formData = new FormData($("form#uploadForm")[0]);

                        // upload file
                        $.ajax({
                            url: 'upload.php?' + rand,
                            type: 'POST',
                            data: formData,
                            cache: false,
                            contentType: false,
                            processData: false,
                            success: function (returndata) {
                                console.log(returndata);

                                // if file uploaded properly, submit data to DB
                                $.ajax({
                                    url: "insertSQL.php",
                                    type: "GET",
                                    cache: false,
                                    data: {fn: fn, ln: ln, email: email, phone: phone, sex: gender, ethnicity: race, dob: dob, skill: skill, photo: photo},
                                    success: function(data) {
                                        $("#success").html("Your data was successfully submitted, thank you.")
                                        $("#success").css('display','block') // show the download div
                                        console.log("data successfuly inserted into DB")
                                    }
                                });


                            }
                        });

                    } else {
                        console.log("bot")
                    }
                },
                filter: function() {
                    return $(this).is(":visible");
                }
            });
        });



    </script>