Develop Reference

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 :)

Dynamic links with JavaScript

this is my problem.I have a JSP. I want to create a hyperlink dynamically with Javascript. I want to add the text from an input in HTML and use it to pass it as a parameter in my URL:
<form name="test">
<P>Enter search: <input type="text" name="searchName"><BR><BR>
<input type="Button" Value="" onclick="location.href='search.jsp?typeOfSearch=" + JavaScriptFunction( that returns the String from searchName ) ' " >
</P>
</FORM>
I cant seem to add a JS function to the "onclick" string. I ve tried with HREF from an anchor but I cant make it work. And I ve also tried just putting a JS function like this:
<a href="MyJSfunction( that returns the entire URL ) " > hyperlink</a>
and also it does not work. I ve tried like a million diferent things and I still cant pass dynamic parameters from one JSP to another.
Any help would be very good! ...

No JavaScript required. Just set your form method and action, use a submit button, and rename your input field:
<form name="test" method="GET" action="search.jsp">
<p>
Enter search: <input type="text" name="typeOfSearch" /><br/><br/>
<input type="Submit" Value="Go" />
</p>
</form>
Edit: But, if you are just curious how to do it with JavaScript, form elements all have a form property. Form elements are accessible from the form by name. So, you can use this.form.searchName.value to get the value of the searchName field in the same form as your button:
<input type="Button" Value=""
onclick="location.href='search.jsp?typeOfSearch=' + this.form.searchName.value;" />
Edit: The trouble you are having with your current code may be because you have the quotes wrong. Change the double quote at the end of typeOfSearch=" to a single quote: typeOfSearch='. Remove the single quote following your function call:
<input type="Button" value=""
onclick="location.href='search.jsp?typeOfSearch=' + JavaScriptFunction()" />

If you aren't too concerned about security, a simple HTML form should work.
<form action="Your URL Here">
<input type="text" value="" name="search" />
<input type="submit" value="search" />
</form>
http://jsfiddle.net/harveyramer/VfuT4/

How do I post values obtained from an html form to an URL using javascript?

I'm new to html and JS and I have a form with a few fields that I need posted to a URL.
<form>
<div>
<label style="font-size:16px" for="title">Title:</label>
<input type="text" id="title" maxlength="128"/>
</div>
<div>
<label style="font-size:16px" for="description">Description:</label>
<textarea id="description" maxlength="1999"></textarea>
</div>
<div>
<label style="font-size:16px" for="idnumber">IDNumber:</label>
<input type="number" id="idnumber"/>
</div>
</form>
I need the values entered into this form to be posted to a URL that already knows how to process the input. I'm sure this is easy to do but I'm new and I'm having trouble finding a solution. Apologies for any incorrect terminology. Thanks!

You can use the action attribute:
<form action="some/url" method="post">
<!-- ... -->
<input type="submit" value="Submit" /> <!-- Submit button -->
</form>

You have to add an action to your form tag that points to a server side script.
<form action="myscript.php" method="post">
Alternatively, you can use JavaScript to post it as an AJAX request which submits the request without a page refresh.

I'd say you're on the right track. This would be perfectly easy using basic HTML: Add an action="mySubmitPage.php" to the form element. It sounds like you want to do it without refreshing/changing the page, though (at least, that's how it sounds by "with Javascript")
That will involve an "asynchronous" submit. The fancy term is "AJAX". That part can be a lot easier using some form of Javascript framework, especially if you want to support all browser quirks. Here's an example of doing it using JQuery, for instance:
jQuery - Send a form asynchronously

Javascript injection

I would like to fill out and a submit a form explicitly with JavaScript. First, I thought I had to use window.open but it's certainly wrong because if it gets loaded, the left of my scripts written for example in a html file would be ignored.
Do I have to create a .js file and fire that one?

uhhhh...not exactly sure how this relates to injections...you can do this with jQuery in a handful of lines of code.
say you have the following form:
<form id="theForm" name="testForm" action="whatever.php" method="get">
<input type="text" name="cow" />
<input type="text" name="sheep" />
<input type="text" name="pig" />
<input type="submit" value="Submit" />
</form>
If you have jQuery loaded, all you need to do is this:
function submitForm(){
var cowVal="Cows go moooo!";
var sheepVal="Sheep go baaaaaaah!";
var pigVal="pigs go sooooeeeeeeeh!";
$("#theForm input").eq(0).val(cowVal).next().val(sheepVal).next().val(pigVal).parent().submit();
}
Hope that helps!

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" ... /]