Sending multiple data through jquery ajax

Question

I am building a form to process text input, multiple check boxes and 4 images. currently I am to process the check boxes using the each function to put all the values of the checkboxes in an array before sending it through ajax. Now the problem is that I can't send the images with ajax too. And also I can't access the images too.

Code:

 $(document).ready(function () {
    //alert("this page works");
    $('#uploadProperty').on('submit',function  (e){
        e.preventDefault();

        var hname    = $('#hname').val();
        var location = $('#location').val();
        var htype    = $('#htype').val();
        var rooms    = $('#rooms').val();
        var price    = $('#price').val();
        var hdetails = $('#hdetails').val();
        var feature  = [];
        $('.feature').each(function() {
            if($(this).is(":checked")){
                feature.push($(this).val());
            }
        });
        // if (feature.length == 0)
        //  alert("Select atleast 1 Feature");
        // else{
        //  feature = feature.toString();
        //  alert(feature);
        // }
        var file1 = $('#file4').val();
        //alert(file1);
        $.ajax({
            url     : 'core/upload.php',
            type    : 'POST',
            data    : new FormData(),
            contentType : false,
            processData : false,
            success : function (ep){
                alert(ep);
            }
        });

    });
});

CatalinB · Accepted Answer · 2016-09-05 19:29:12Z

1

You need to upload images first via ajax ( ex: http://hayageek.com/docs/jquery-upload-file.php ) and after make another ajax for the form fields. But you need an ID link between Property and images. you cand add an empty record and remember the mysql_insert_id to make update with the form fields and insert images or update ( depend how is your table structure )

answered Sep 5, 2016 at 19:29

CatalinB

5814 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dapo Michaels Over a year ago

love this answer too, but wont using double ajax requests complicate matters? just asking ?

Alexey Chuhrov · Accepted Answer · 2018-05-03 13:33:51Z

0

So if i got it right, you want to fill the FormData object. Because currently it's empty. You can use append method:

    var formData = new FormData();
    var $myField = $('#myField');
    formData.append('myField', $myField.val());

To append file:

    var $fileField = $('#fileField');
    var myFile = $fileField.get(0).files[0];
    formData.append('myFile', myFile);

To append multiplie files you should set the name properly:

    formData.append('myFile[]', myFileFirst);
    formData.append('myFile[]', myFileSecond);

Check it here: Uploading multiple files using formData()

Also, you can grab the whole form data through constructor:

    var form = $('form').get(0);
    var formData = new FormData(form);

edited May 3, 2018 at 13:33

answered Sep 5, 2016 at 19:45

Alexey Chuhrov

1,79712 silver badges25 bronze badges

3 Comments

Dapo Michaels Over a year ago

thanks for this answer but if i go with any of your suggestions how do i get each unique field in php so i can insert them into specific fields in my database table?

Alexey Chuhrov Over a year ago

The same as usual. Using $_POST and $_FILES superglobals. Here's in the end Example #3, how to handle multiplie file uploading using foreach php.net/manual/en/features.file-upload.post-method.php

Dapo Michaels Over a year ago

its finally working... thanks guys.. i can now send all the data i need through appending method.

Collectives™ on Stack Overflow

Sending multiple data through jquery ajax

2 Answers 2

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related