Send POST data in Javascript

Question

I am uploading files, in such a way the user does not need to hit the button 'Upload' after selecting the file. It works fine but I also need to send an extra parameter and, since I'm not into Javascript at all, I can not figure out how to send it.
The html:

<form enctype="multipart/form-data" target="_blank" name="send_img" id="send_img" method="post" action="img_upload.php">
    <input type="hidden" id="group_id" name="group_id" value="2" />
    <input type="file" class="hide" id="uploaded_file" name="uploaded_file" onChange="Handlechange();"/>
    <button type="submit" id="btn">Subir fotos!</button>
</form>

<div onclick="HandleBrowseClick();" id="fakeBrowse" >Load a picture</div>

The script:

<script language="JavaScript" type="text/javascript">
function HandleBrowseClick()
{
    var fileinput = document.getElementById("uploaded_file");
    fileinput.click();
}

function Handlechange()
{
    var fileinput = document.getElementById("uploaded_file");
    var textinput = document.getElementById("filename");
    textinput.value = fileinput.value;
}
</script>

I have no clue how to send the group_id variable (which I have in a php variable, so it can be echoed anywhere, even in the script). I tried many ways with no luck. So how can that variable to be passed and gotten in img_upload.php? I thought that:

var group_id = document.getElementById("group_id").value;

would make it but I was wrong :-/

What I also find interesting is that if I modify the form tag to action="img_upload.php?group_id=2", I can not get the parameter later in that file by doing $_GET['group_id'];

In img_upload.php I am taking this other variable and inserting it into a database. So it would be really cool if I can get that variable in such a way I can get it into a php variable (I tried to be as clear as possible in this last line).
I would also add what I get in Chrome Developer Tool:

Request Payload
------WebKitFormBoundarydOdbB5IQ8RbA8CRR
Content-Disposition: form-data; name="uploaded_file[]"; filename="photo-5.JPG"
Content-Type: image/jpeg


------WebKitFormBoundarydOdbB5IQ8RbA8CRR--

That's what makes me think the problem is in the data sending script

Both methods should work. Show us the exact code of what you tried, please. Did you wait for DOMready before getting the group_id from the hidden input? — Bergi
– Bergi, Commented Dec 23, 2012 at 21:04
Since it's doing what it is supposed to do, I thought that's all I needed. What you see is pretty much what I have in the file. That said... No, I didn't wait for the DOMready. I'm going to work on that now! — Claudio
– Claudio, Commented Dec 23, 2012 at 21:06

asgoth · Accepted Answer · 2012-12-23 21:53:01Z

1

When you click 'submit' all input fields will be submitted to the server using a HTTP POST.

On the server you can interpret the request with something like (java)

request.getAttribute('uploaded_file');

In PHP this would be something like:

$myFile = $_REQUEST['uploaded_file'];

See PHP manual.

Edit: your input tag is invalid (remove the "/"):

<input type="hidden" id="group_id" name="group_id" value="2">

Edit2:

Add the following (as a test):

<script type="text/javascript">
var el = document.getElementById('send_img');

el.addEventListener('submit', function(){
alert(document.getElementById("group_id").value);
return true;
}, false);
</script>

edited Dec 23, 2012 at 21:53

answered Dec 23, 2012 at 21:06

asgoth

35.8k12 gold badges91 silver badges98 bronze badges

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

9 Comments

Claudio Over a year ago

That's correct, but I need to get the variable into php so it can be easily inserted in a database. (I'm adding that detail)

Claudio Over a year ago

I have that part. I just need to get the variable group_id. Thanks for taking the time to help me!!!

asgoth Over a year ago

That would be $myGroupId = $_REQUEST['group_id']; But i don't really have experience with PHP.

Claudio Over a year ago

As I added above, the problem is not in the receiving file but in the sending one, where the javascript part is. You can see that the parameter group_id is not passed.

asgoth Over a year ago

Edited me answer. An valid input tag is like <input>, not <input/>

|

Collectives™ on Stack Overflow

Send POST data in Javascript

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related