Javascript Ajax FormData

Question

i have this code in it how to send form value to php file .

 <form role="form" id="upload_form" method="post" enctype="multipart/form-data">

     <div class="form-group">
     <label for="formlabel">Title</label>
     <input class="form-control" name="title" id="title" placeholder="Enter Software Name" type="text" value="<?php if(isset($title)){echo $title;}?>" required>
     </div>

    <div class="form-group">
    <label>Short Meta Description atleast 155 words</label>
    <textarea class="form-control" name="shortdec" id="shortdec" rows="3" required><?php if(isset($shortdec)){echo $shortdec;}?></textarea>
</div>


    <div class="form-group">
    <label>File input</label>
    <input name="softpost" id="softpost" type="file" required>
</div>


     <input type="button" value="Upload File" onclick="uploadFile()">
      <progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
      <h3 id="status"></h3>

in javascript file work file data fine but i want to send also title and shortdec id value also please tell me how to do it

var formdata = new FormData();
    formdata.append("softpost", file);

Possible duplicate of [Sending multipart/formdata with jQuery.ajax](http://stackoverflow.com/questions/5392344/sending-multipart-formdata-with-jquery-ajax) — Md. Khairul Hasan, Oct 06 '16 at 07:49

score 1 · Answer 1 · answered Oct 06 '16 at 07:47

1

If I understand you right, you want to send "normal" stuff with files.

Well, it's super easy:

formdata = new Formdata();
formdata.append('softpost', file)
formdata.append('name', 'My super file')

That's it!

Matt

answered Oct 06 '16 at 07:47

math2001

4,167
24
35

how to get name value from html input field – Saad Awan Oct 06 '16 at 08:05
with jquery $('#inputid').val() – math2001 Oct 06 '16 at 08:08
we need about javascript – Saad Awan Oct 06 '16 at 08:20
document.getElementById('inputid').value does the same – math2001 Oct 06 '16 at 08:21

Runcorn · Answer 2 · 2016-10-06T08:23:10.560

1

You can do this with,

Jquery

$("form#upload_form").submit(function(){
    //Fetch Form Data i.e it will include all the form elements including file and other form inputs
    var formData = new FormData($(this)[0]);
    .........AJAX CALL...........
    return false;
});

JavaScript

var form = document.getElementById("upload_form");
var formData = new FormData(form);

Just use new FormData($(this)[0]); to get the form fields and proceed with the normal AJAX call.You can now fetch the title, file and description element on your backend php code.

edited Oct 06 '16 at 08:23

answered Oct 06 '16 at 07:47

Runcorn

5,144
5
34
52

we need javscript like we above mentioned – Saad Awan Oct 06 '16 at 08:05

Javascript Ajax FormData

2 Answers2