Develop Reference

Send file data to server as multipart form data

I have a file input element outside the form. and on form submit i want to send the file content to server as multipart form data. I can't insert the file element into the form. Is there any other way to do this.
<input type="file" class="file" style="width:117px" name="c2vFile" onchange="onFileChange2(this.value);"/>
<form style="display:none" id="frmActivate" enctype="multipart/form-data">
<input type="hidden" id="act_groupActivationJson" name="groupActivationJson" />
<input type="hidden" id="act_remarks" name="comments" />
<input type="hidden" id="activatee" name="activatee" />
</form>

The file input needs to be inside the form tag. You've mentioned you can't, but why not? You would need to remove the "display:none", which serves no purpose currently, as the inputs are all hidden.

You can send a file outside of form tag using AJAX submission. You can follow the below link will helpful for sending file using ajax.
But you have have to invoke this function on click of submit button. Once the file upload done then form submit should be happen.
jQuery Ajax File Upload

I did a small trick with this and it worked, please review if it is helpful for you
Before submitting the form add listener and append the input field with the form.
document.getElementById('frmActivate').addEventListener("submit", function() {
var fileinput = document.getElementById('filein');//take the file input
var thisel = document.getElementById('frmActivate');// take the form element
var cln = fileinput.cloneNode(true);//clone the file input element
thisel.appendChild(cln);//append the clone in the form element
thisel.submit();
})
<input type="file" id="filein" class="file" style="width: 117px" name="c2vFile" onchange="onFileChange2(this.value);" />
<form style="" id="frmActivate" enctype="multipart/form-data">
<input type="hidden" id="act_groupActivationJson" name="groupActivationJson" />
<input type="hidden" id="act_remarks" name="comments" />
<input type="hidden" id="activatee" name="activatee" />
<input type="submit" value="submit" />
</form>
<?php var_dump($_FILES);//to confirm if file is submitted ?>
You can see this code working in this demo
Hope this works for you.

How can I submit multiple dynamically generated forms with a single submit button using Javascript? [partial progress]

I am having a bit of trouble with some code. I am attempting to submit multiple forms. The first form is immediately visible, and the second can be added to the page when the user clicks an "Add Another Form" button (think of this like a referral system a user can add multiple referrals to).
So far I am able to submit one form and make more than one form appear on the page, however submitting any more than the first visible form is a challenge. Here is my code so far:
The form (all forms are clones):
<form action="www.example.com/submission.php" name="contactform" method="POST" class="biggerForm">
<input id="name" type="text">
<input id="phone_number" type="text">
<input id="addanother" type="button" class="formBtn lrgBtn addanother" value="Add Another Form" >
<input type="hidden" name="retURL" value="https://www.example.com/thank-you/">
<input type="button" value="Submit Now" class="loopStarter multiRefHide formBtn" onclick="submitFormLoop()">
</form>
JavaScript for Form Submissions (SubmitFormLoop function):
var formCounter = 0;
var ellipsesCount = 0;
function submitFormLoop(){
if(typeof document.forms[formCounter]!= 'undefined'){
if($('.error:visible').length>0){
return false;
}
document.forms[formCounter].mySubmit.click()
if($('.error:visible').length>0) return false;
$('#submitting').show();
$('#supportCase').hide();
document.getElementById('submittingText').innerHTML = "Submitting your form(s)."
setInterval(function(){
ellipsesCount++;
var dots = new Array(ellipsesCount % 8).join('.');
document.getElementById('submittingText').innerHTML = "Submitting your form(s)" + dots;
}, 300);
setTimeout(function(){submitFormLoop()},1500)
formCounter++
}else{
window.location = "https://example.com/thank-you";
$('input[type="submit"],.addanother').hide()
formCounter = 0;
}
}
Again I can get the first one to submit, but I can't seem to get the function to loop. Any advice on this matter is very welcome, whether it is a small tweak or a recommendation to scrap my code completely.
Thank you all very much.

You cannot submit multiple form elements from the same page.
But you can get the behavior you desire two ways:
Submit the forms using AJAX (using XMLHttpRequest or a helper library like jQuery).
Reformat your inputs to use a single form element.
To do the latter, PHP programmers1 typically use the syntax:
<form action="www.example.com/submission.php" name="contactform" method="POST" class="biggerForm">
<input name="contacts[0][name]" type="text">
<input name="contacts[0][phone_number]" type="text">
<input name="contacts[1][name]" type="text">
<input name="contacts[1][phone_number]" type="text">
<input name="contacts[2][name]" type="text">
<input name="contacts[2][phone_number]" type="text">
</form>
Notice the [<integer>] in the syntax. In PHP, the $_POST variable will contain data like these as an indexed array.
Your button can then add additional input elements in the same format:
<input name="contacts[3][name]" type="text">
<input name="contacts[3][phone_number]" type="text">
On form submission, you can then retrieve these fields like so:
foreach($_POST['contacts'] as $person){
echo $person['name'];
echo $person['phone_number'];
}
1 I assume you're using PHP since your form's endpoint is submission.php.

Closed - How can I create a new input file when the first input file has a file selected?

Edit:
I'll just use the attribute multiply, my problem is that is not supported in IE9 or earlier, but meh, that's the way it's going to be
Thanks everyone
I'm inserting data to a database, and for every entry I can have an unknown number of photos uploaded (maybe max 4) for that entry.
My question is: When I select a file in this form I want to make another input file appear to upload another file
<form action="" method="post" enctype="multipart/form-data">
<input type="file" name="photos[]"><br>
<!-- ######## more data entries ######## -->
<input type="submit" name="submit">
</form>
I tried using jQuery like this:
<form action="" method="post" enctype="multipart/form-data">
<input type="file" name="fotos[]"><br>
<div id="placeholder"></div>
<script>
$('input[type=file]').change(function(){
$('#placeholder').html('<input type="file" name="fotos[]"><br>');
});
</script>
<input type="submit" name="submit">
</form>
but it only works for the first input
Is there another way to do this? i know there is multiply='multiply' but I'm not sure if it's well supported
Thanks in advance
PS: I don't care much what language to use as I know a little about everything, just go slowly on me :)

HTML: Copy form fields to another form including FILE input field?

I came to see that form file input field value cannot be set with javascript for security reasons.
I just want to copy a FILE input to another form and post it, I searched for a work around and could not find anything, is it possible?
UPDATE: my code:
function prepareUpload( filevalue ){
document.getElementById('logo').value =filevalue;
var mform = document.getElementById('sleeker');
ajaxUpload( mform,'<?php echo base_url(); ?>'); // a methods to upload...
}
<input class="input-file-upload" type="file" size="20" name="logodummy" id="logodummy" onchange="prepareUpload( this.value );" />
<form action="" method="post" name="sleeker" id="sleeker" enctype="multipart/form-data" onbeforesubmit="return false;">
<p><input type="hidden" name="logo" id="logo" /></p>
</form>
Anything other thatn file input are working fine, and I could receive with $_POST, but $_FILES doesn't have values. And this code alone working fine too. I think this coe is enough?

Yes, you can place the <input type="file"> outside your HTML form, and then use the onChange event to fill an <input type="hidden"> within the form that gets posted:
<input type="file"
onchange="document.getElementById('hidden_file').value = this.value;" />
<form method="POST">
<input type="hidden" id="hidden_file" value="" />
<input type="submit" />
</form>
However in modern browsers, you will only be able to access the file name, and not the full path. You may want to check the following Stack Overflow posts for further information on this topic:
Can’t get the complete address while uploading a file
How to get the file path from HTML input form in Firefox 3
UPDATE:
The original question made me think that you only needed to copy the "file name" to another HTML form, and not the whole <input type="file"> representation.
Further to the update, I assume you meant something like this:
<input type="file"
onchange="document.getElementById('hidden_file').value = this.value;" />
<form method="POST">
<input type="file" id="hidden_file" value="" />
<input type="submit" />
</form>
Unfortunately the above does not work. Firefox will return "Security error code: 1000" if you try the above example.
As for some workarounds, you may want to the check David Dorward's suggestions:
Using cloneNode
Moving the input field with appendChild before submitting the form

You could move the file input to the other form (with appendChild or insertBefore), submit the form, and then move it back.

I haven't tested this in depth, but it appears to work in Firefox.
Use cloneNode
var copy = file_input.cloneNode(1);
form2.appendChild(copy);

Very much similar to cloneNode except in jQuery
In an xulrunner browser (like firefox) I have successfully used something like the following:
$('input:file').clone().appendTo($('#mainform'));
This should copy all file input objects into the form with id=mainform.
Avoid using the id attribute in the objects to be cloned. id's should always be unique.

I realised that this might be late to the party, but with HTML5, you can use the "form" attribute to target a form, like [form id="the_form"]...[/form]....[input form="the_form type="file" ... /]

adding inputs to html form, using javascript

I have an html form that I would like to add inputs fields to using javascript. Originally I had the input fields by themselves underneath the 'body', and the following was able to add the fields:
// Create number input field
var phoneInput = document.createElement("INPUT");
phoneInput.id = "phone" + instance;
phoneInput.name = "phone" + instance;
phoneInput.type = "text";
// Insert that stuff
document.body.insertBefore(document.createElement("BR"), element);
document.body.insertBefore(phoneLabel, element);
document.body.insertBefore(phoneInput, element);
I then added a 'form' element around the original inputs in the html file.
<body>
<form action=searchform.php method=GET>
<LABEL for="phone1">Cell #: </LABEL>
<input id="phone1" type="text" name="phone1">
<input type="button" id="btnAdd" value="New text box" onclick="newTextBox(this);" />
</form>
</body>
Now the button doesn't add new text boxes. Have I structured this incorrectly?
Thanks!

This is because you are appending the elements to the body, which means that insertBefore cannot find element (because it's in the <form>, not the <body>), so it never gets inserted.
A quick way to fix this would be to use document.body.firstChild.insertBefore. However, if the form is no longer the first element in the body, this will no longer work.
A cleaner, better way would be to give your form an ID (e.g. <form id="myform">), and then access the form using: document.getElementById("myform").insertBefore. Then you can place your form anywhere, and it will still be accessible using the ID.

Easiest would be to use jQuery. Add an ID to your form, for easier reference:
<form id="myform" action="action" method="GET">
<input type="hidden" name="a" value="1"/>
<input type="hidden" name="b" value="2"/>
</form>
<script type="text/javascript">
$("#myform").append('<input type="hidden" name="c" value="3"/>');
</script>
You can later change the value of your new input, by easily referring to it:
$("#myform input[name='c']").val(7);

Gve the form an id
<form id="myForm" action="searchform.php" method="GET">
Create the JavaScript elements just as you used to, then you can just add the elements like so:
var f = document.getElementById('myForm');
f.appendChild(document.createElement('br'));
f.appendChild(phoneLabel);
f.appendChild(phoneInput);
(insertbefore would work on f as well, although I think this is more readable.)