How do I send additional form data in ajax

Question

Is there another way of sending form data that I could use with the script I'm using, I have tried appending form data but I can't figure out how to get the paired values in the post data, so I added the data within the URL, problem with this is the progress bar and data then stops working on my page.

<script>
function _(el){
    return document.getElementById(el);
}
function uploadFile(){
    var file = _("video").files[0];
    var vidName = $("#vidName").val();
    var videoDescription = $("#videoDescription").val();
    var albumName1 = $("#choosevidCat").val();
    var vidFile =$("#video").val();
    var otherData = $('vidUpload').serializeArray()
//       alert(file.name+" | "+file.size+" | "+file.type);
    var formdata = new FormData();
    formdata.append("video", file);
//  formdata.append("video", vidName);
    var ajax = new XMLHttpRequest();
    ajax.upload.addEventListener("progress", progressHandler, false);
    ajax.addEventListener("load", completeHandler, false);
    ajax.addEventListener("error", errorHandler, false);
    ajax.addEventListener("abort", abortHandler, false);
    ajax.open("POST", "includes/vid_upload.inc.php?vidName=" +vidName+"&videoDescription=" +videoDescription+"&albumName1=" 
    +albumName1, false);
    ajax.send(formdata);
}
function progressHandler(event){
    _("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total;
    var percent = (event.loaded / event.total) * 100;
    _("progressBar").value = Math.round(percent);
    _("status").innerHTML = Math.round(percent)+"% uploaded... please wait";
}
function completeHandler(event){
    _("status").innerHTML = event.target.responseText;
    _("progressBar").value = 0;
}
function errorHandler(event){
    _("status").innerHTML = "Upload Failed";
}
function abortHandler(event){
    _("status").innerHTML = "Upload Aborted";
}
</script>

I tried adding

formdata.append("video", vidName);

as you can see I have commented it out on in the script as webconsole showed although it was sending the vidName variable it didnt have an identifying tag like this: Content-Disposition: form-data; name="video"

testing ogg creation 2

Could anyone help please

@Said Kholov Im not sure I added it in the right place, I put in before the closing script tag, it reported back as undefined and that related to that bit of code — Tiny, Apr 27 '15 at 02:42

score 3 · Accepted Answer · edited May 23 '17 at 12:07

3

ajax.send("video=" + vidName + "&other=" + other_value);

if want to send many values you can use the keyword "&" to separate name and value pare

like video=vidName, other=othervalue1, other2=otherevalue2

to send it to the post request do

"video=vidname&other=othervalue1&other2=othervalue2"

and in PHP you can get those post data

$_POST['video'];
$_POST['other'];
$_POST['other2'];

Here is a link Sending POST data with a XMLHttpRequest

edited May 23 '17 at 12:07

Community

1
1

answered Apr 27 '15 at 02:25

Oli Soproni B.

2,938
3
19
45

I just tried that but it stops the file im uploading from attatching to the upload function – Tiny Apr 27 '15 at 02:37
@ Oli Soproni B. 5 mins ago The _ is defining use of the first function in the script, it saves having to repeatably type the "$" charachter and no it doesnt create an error – Tiny Apr 27 '15 at 02:50
1

I have solved it, by using the ajax.open as I was, adding the form data much the way you said in the ajax.send but removing the false has now allowed me to send the data and have my progress bar work – Tiny Apr 27 '15 at 02:58
if found my answer helpful then can accept it as an answer – Oli Soproni B. Apr 27 '15 at 03:02

How do I send additional form data in ajax

1 Answers1