More than one contact form on a page With and without upload ajax

Question

I have 3 contact forms on a page (2 modals and one on the page) 1 of the forms has a file upload.

The two contact forms work fine but the contact form with the upload wont upload the file. Help needed to find what i am doing wrong.

JS

$(function () {


//Hide image on page load
$('#loader').hide(); 

    $('.form-submit').click(function (e) {
        e.preventDefault();

        $(this).prop('disabled', true);

        // Show image before making ajax call
        $('#loader').show(); 

        var form = $(this).closest('form');


        // Get the messages div.
        var formMessages = $('.form-messages');

        $(this).prop('disabled', false);

        $.ajax({
            type: 'post',
             url: form.attr('action'),
            data: new FormData(form[0]),
            cache: false,
            contentType: false,
            processData: false
        })

        .done(function (response) {
            $('#loader').hide();

            $(formMessages).removeClass('error');

            $(formMessages).addClass('success');

            $(formMessages).text(response);

            setTimeout(function(){
                $(formMessages).text('');
                $(formMessages).removeClass('success')
            }, 3000);

            form[0].reset();

        })
        .fail(function (data) {
            $('#loader').hide();

            $(formMessages).removeClass('success');

            $(formMessages).addClass('error');

            if (data.responseText !== '') {
                $(formMessages).text(data.responseText);
            } else {
                $(formMessages).text('Oops! An error occured and your message could not be sent.');
            }

            //Remove message after x seconds
            setTimeout(function(){
                $(formMessages).text('');
                $(formMessages).removeClass('error')
            }, 7000);
        })
    })

});

HTML Form with upload

<form action="php/upload.php" method="POST" enctype="multipart/form-data">
  <p><input class="w3-input w3-border" type="text" placeholder="Full Name" required name="name"></p>
  <p><input class="w3-input w3-border" type="text" placeholder="Email Address" required name="email"></p>
  <p><input class="w3-input w3-border" type="number" placeholder="Telephone Number" required name="number"></p>
  <p><input type="file" name="userfile"  /></p>
  <button type="submit" id="uplaod-button"class="w3-btn-block w3-padding-large w3-gold w3-margin-bottom form-submit">Submit</button>
        <div class="form-messages"></div>
</form>   

HTML Form without upload

<form id="ajax-enquires" method="POST" action="php/enquires.php">
  <p><input class="w3-input w3-border" type="text" placeholder="Full Name" required name="name"></p>
<p><input class="w3-input w3-border" type="text" placeholder="Email Address" required name="email"></p>
  <p><input class="w3-input w3-border" type="number" placeholder="Telephone Number" required name="number"></p>
<p><textarea class="w3-input w3-border" placeholder="Message" required name="message"></textarea></p>
  <button type="submit" class="w3-btn-block w3-padding-large w3-gold w3-margin-bottom form-submit">Send</button>
        <div class="form-messages"></div>
  </form> 

Answer 1

Issue is with below tag in your upload form :

<input type="file" name="file_attach[]" />

Why this element has [] in it's name?

When I changed it to below, submit button was working fine :

<input type="file" name="file_attach" />

You also need to change below line in your JS :

$(this.elements['file_attach[]'].files)

to

$(this.elements['file_attach'].files)

Answer 2

I figured it out i was missing datatype: "json" added that and it worked

$(function () {


//Hide image on page load
$('#loader').hide(); 

    $('.form-submit').click(function (e) {
        e.preventDefault();

        $(this).prop('disabled', true);

        // Show image before making ajax call
        $('#loader').show(); 

        var form = $(this).closest('form');


        // Get the messages div.
        var formMessages = $('.form-messages');

        $(this).prop('disabled', false);

        $.ajax({
            type: 'post',
             url: form.attr('action'),
            data: new FormData(form[0]),
            dataType : "json",
            cache: false,
            contentType: false,
            processData: false
        })

        .done(function (response) {
            $('#loader').hide();

            $(formMessages).removeClass('error');

            $(formMessages).addClass('success');

            $(formMessages).text(response);

            setTimeout(function(){
                $(formMessages).text('');
                $(formMessages).removeClass('success')
            }, 3000);

            form[0].reset();

        })
        .fail(function (data) {
            $('#loader').hide();

            $(formMessages).removeClass('success');

            $(formMessages).addClass('error');

            if (data.responseText !== '') {
                $(formMessages).text(data.responseText);
            } else {
                $(formMessages).text('Oops! An error occured and your message could not be sent.');
            }

            //Remove message after x seconds
            setTimeout(function(){
                $(formMessages).text('');
                $(formMessages).removeClass('error')
            }, 7000);
        })
    })

});