How can i post data and file by using ajax on event onclick

Question

HTML here.

<form id="myForm">
  <input type="text" name="name">
  <input type="file" name="userImage">
  <button onclick="post('./example.php')" type="button">Save</button>
</form>

Now i want to post it by using post() function

Java-script:

Function post(url){
   $.ajax({
        url:url,
        type: 'POST',
        data: $("#myform").serialize(),
        success: function (data) {
           alert("successfully posted.");
        }
    });
}

But not serialized file

And what is your problem? Please define the actual problem in your question and update it. — Ataur Rahman Munna, Dec 14 '16 at 07:59
you must define url in your function when you call `post('http://exmple.com')` — nimour pristou, Dec 14 '16 at 08:05

score 0 · Answer 1 · answered Dec 14 '16 at 08:17

My advice is: try to have apart html and js defining the event callback on "attacheventlistener" function or "on" jquery's function (this way is easier).

Your problem is that you are passing the string "url" when you need pass a valid url, so write the url directly on ajax url field or define a data attribute on your form tag, e.g. data-url="http://whatever", and catch this value from the event.

If you use jquery's "on" function is extremly easy, you could to get it data's value via jquery's "data" function over "this" var.

Something like ...

$("#myForm").on("click", 
      function() {
            post(this.data("url"));
});

But probably you do not need url being a var.

score 0 · Answer 2 · edited May 23 '17 at 10:29

0

If I understand correctly, the problem is that nothing is being posted. The thing is is that you are trying to do a file upload via ajax, this is not wrong but it needs to be done differently shown here:
jQuery Ajax File Upload

edited May 23 '17 at 10:29

Community

1
1

answered Dec 14 '16 at 08:57

Rick Jelier

363
3
12

score 0 · Answer 3 · edited Oct 07 '21 at 13:39

First of all i need to say that, if you want to upload file, i mean if your form have file input then add the form attribute enctype="multipart/form-data" according to RFC-7578. you can also see the uses http://www.w3schools.com/tags/att_form_enctype.asp.

Then move to the html part again. Suppose you have a form input like

<form action="some_domain/example.php" method="post" enctype="multipart/form-data">
    <input type="file" name="file" id="fileId"/>
    <input type="text" name="firstName" id="name">
    <button onclick="post('some_domain/example.php')" type="button">Save</button>
</form>

Now post the file data using ajax:

function post(url){
   $.ajax({
        url:url,
        type: 'POST',
        processData:false,
        contentType:false,
        data: $('#fileId')[0].files[0],
        success: function (data) {
           alert("successfully posted.");
        }
    });
}

I think this should be worked fine.

UPDATE: if you want to post text data as well then you should use FormData object.

function post(url){
var formData = new FormData();
   var files = document.getElementById("fileId").files;
   for (var i = 0; i < files.length; i++) {
       var file = files[i];
       formData.append('files[]', file, file.name);
}
formData.append('firstName',$('#name').val());
$.ajax({
        url:url,
        type: 'POST',
        processData:false,
        contentType:false,
        data: formData,
        success: function (data) {
           alert("successfully posted.");
        }
    });
}

I want to post Both Text field data and file, With without Reload — Apon Ahmed, Dec 14 '16 at 10:22
its so difficult `formData.append('firstName',$('#name').val());` — Apon Ahmed, Dec 22 '16 at 08:48
You can iterate all of the text node by `var nodes = document.getElementsByTagName('input');` and iterate with that `nodes`. — Ataur Rahman Munna, Dec 22 '16 at 16:03

score 0 · Answer 4 · answered Dec 14 '16 at 14:16

You can add extra data with form data

use serializeArray and add the additional data:

var data = $('#myForm').serializeArray();
data.push({name: 'tienn2t', value: 'love'});
$.ajax({
type: "POST",
url: "your url.php",
data: data,
dataType: "json",
    success: function(data) {
         //var obj = jQuery.parseJSON(data); if the dataType is not specified as json uncomment this
        // do what ever you want with the server response
    },
    error: function() {
        alert('error handing here');
   });

How can i post data and file by using ajax on event onclick

4 Answers4