jQuery ajax file value not receiving file value

Question

I am submitting form with jQuery Ajax but I am not getting file value from ajax.

HTML Form:

<form method="post" action="" id="newCustomerForm" enctype="multipart/form-data">
    <div>
        <label for="username">Username</label>
        <input name="username" id="username" type="text" />
    </div>
    <br />
    <div>
        <label for="email">Email</label>
        <input name="email" id="email" type="text" />
    </div>
    <br />
    <div>
        <label for="message">Message</label>
        <input name="message" id="message" type="text" />
    </div>
    <br />
    <div>
        <label for="file">File</label>
        <input name="file" id="file" type="file" />
    </div>
    <br />
    <input type="hidden" name="action" value="addCustomer"/>
    <input type="submit" name="submit" value="Submit">
</form>

Ajax Code:

<script type="text/javascript">
    jQuery('#newCustomerForm').submit(ajaxSubmit);
   
    function ajaxSubmit(){
           
        var newCustomerForm = jQuery(this).serialize();
        alert(newCustomerForm);
           
        jQuery.ajax({
            type:"POST",
            url: "http://localhost/sitename/wp-admin/admin-ajax.php",
            data: newCustomerForm,
            success:function(data){
                jQuery("#feedback").html(data);
            },
            error: function(errorThrown){
                //alert(errorThrown);
            }  
        });
           
        return false;
    }
</script>

I have alert newCustomerForm to check what I am getting from my fields but file value not getting.

Check this screenshot:

Any Idea? Why I am not getting.

Thanks.

Answer 1

Because you only have set a listener to the submit event. But the form action will also be executed. That means, that the form action is called right after the submit event was fired.

The simpliest to prevent submitting the form to the default form action is to change the submit button into a normal button. And then you just need to register a click event on it and submit your form via ajax.

Edit (more detailled explanation): As I said above, if you click on a submit button (or just hit {ENTER}) in a form, the form will be sent to the site defined in the form action attribute. No matter, what you do in your javascript code. It will always be submitted to the form action url. And it also doesn´t matter, if you leave the action attribute blank. If you do so, then same site will be called with an POST or GET request including the form data. You actually just catch the event that is fired, when the user has clicked on a submit button inside your form. But you don´t prevent the browser from sending the form. This submit handler is just for some late changing, but it doesn´t prevent from sending the form as specified in action. So, actually, your jQuery ajax call would be sent to the server, but after this handler, the browser will redirect you to the form action. So, your jQuery ajax call is useless in this context. But it´s possible to prevent the browser from sending it. You just need to cancel the event. But this is very browser dependend, what will be happened. I would advice you to use an input button instead, which will always cause the same action, no matter which browser you might use.

So, for example it could look like this (as explained above):

The HTML:

<form method="post" action="" id="newCustomerForm" enctype="multipart/form-data">
    <div>
        <label for="username">Username</label>
        <input name="username" id="username" type="text" />
    </div>
    <br />
    <div>
        <label for="email">Email</label>
        <input name="email" id="email" type="text" />
    </div>
    <br />
    <div>
        <label for="message">Message</label>
        <input name="message" id="message" type="text" />
    </div>
    <br />
    <div>
        <label for="file">File</label>
        <input name="file" id="file" type="file" />
    </div>
    <br />
    <input type="hidden" name="action" id="action" value="addCustomer"/>
    <input type="button" name="submit" id="submit" value="Submit">
</form>

The JavaScript (the document should be ready before this code below would be executed):

$("#submit").click(function(event)
                   {
                       var formStr = $("#newCustomerForm").serialize();

                       // send the form string to the server e. g. via $.post(url, formStr, callback) or via $.ajax(...)
                       // and handle the callback here
                       // for more information, please see the jQuery API Doc about .get and/or .ajax
                   });