How To Send FormData object?

Question

get Form with id
create formdata with Form ID
send Data with $.ajax

My code:

<form id="company">
    <input type="text" name="name" />
    <input type="tel" name="tel" />
    <input type="button" id="send" name="send" value="send" />
</form>


 <script>
        ##get Form id an create form data##
        var testForm = document.getElementById('send');
        testForm.onclick = function(event) {
            var formData = new FormData(document.getElementById('company'));
        ##this is Ajax Method##
                $.ajax({
                    url : './json/company.php',
                    method : 'POST',
                    data : formData,
                    timeout : 10,
                    dataType :'json',
                    success: function(data)
                    {
                        alert("Success");
                    }
                });
        }
    </script>

Error : TypeError: Argument 1 of FormData.constructor is not an object

This is already discussed at http://stackoverflow.com/questions/6974684/how-to-send-formdata-objects-with-ajax-requests-in-jquery — RAHUL ROY, Oct 25 '16 at 08:05
Depends on what you're sending, if you intend to send files or other binary data, `formData` is the way to go, if you're just sending text, you could serialize the form, but `formData` would still be fine *(unless you have to support old browsers)* — adeneo, Oct 25 '16 at 08:06
@RAHULROY this form doesn't have a input type file so he doesn't need a formData object — madalinivascu, Oct 25 '16 at 08:07
means if Form have File Input must user formData else must do another way? — ali, Oct 25 '16 at 08:24

score 0 · Answer 1 · answered Oct 25 '16 at 07:53

0

Try this

data : JSON.stringify(formData)

answered Oct 25 '16 at 07:53

Aleksandar Matic

789
1
9
21

madalinivascu · Accepted Answer · 2016-10-25T09:27:38.393

0

Since your form doesn't have a input type file you should use the serialize function instead

$(testForm).click(function(event) {
                event.preventDefault();//don't forget to prevent the default click event from redirecting you from the page
                $.ajax({
                    url : './json/company.php',
                    method : 'POST',
                    data : $('#company').serialize(),
                    timeout : 10,
                    dataType :'json',
                    success: function(data)
                    {
                        alert("Success");
                    }
                });
        });

edited Oct 25 '16 at 09:27

answered Oct 25 '16 at 08:03

madalinivascu

32,064
4
39
55

tnx,i do it but Not Send parameters ,Fire Fox NetWork Mode Say "No Parameters for this request" – ali Oct 25 '16 at 08:20
can you post a screenshot of that message? – madalinivascu Oct 25 '16 at 08:23
are you sure that the id of the form is `#company` and is unique? – madalinivascu Oct 25 '16 at 08:56
Yes i'm sure, a quest if my form with diffrent name in another form with diffrent name have problem? – ali Oct 25 '16 at 09:23
you have a form in a form? how will you submit the inner form ?? the submit button will trigger the outer form – madalinivascu Oct 25 '16 at 09:26
1

ooops understand , so tnx for help – ali Oct 25 '16 at 09:30

score 0 · Answer 3 · answered Oct 25 '16 at 08:03

You're missing crucial options, and jQuery is trying to process the formData, which it can't.
You have to add the processData: false option, and you should avoid sending a contentType as well

var testForm = document.getElementById('send');
testForm.onclick = function(event) {
    var formData = new FormData(document.getElementById('company'));
    $.ajax({
        url: './json/company.php',
        method: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        timeout: 10,
        dataType: 'json',
        success: function(data) {
            alert("Success");
        }
    });
}

score 0 · Answer 4 · answered Oct 25 '16 at 08:09

In order to use formdata with jquery you have to set the correct options

var testForm = document.getElementById('send');
testForm.onclick = function(event) {
    var formData = new FormData(document.getElementById('company'));
    $.ajax({
        url : './json/company.php',
        type: "POST",
        data : formData,
        processData: false,
        contentType: false,
        success: function(data)
        {
          alert("Success");
        },
        error: function(jqXHR, textStatus, errorThrown){
            //if fails     
        }
    });
}

How To Send FormData object?

4 Answers4