I would have thought this would be super easy to find an answer to on the interwebs but apparently not.
On an HTML page, I wish to allow a user to select multiple files and upload them to my server. Specific context is that the user needs to choose a resume file and a cover page to apply for a job.
Important considerations:
I'm not interested in an HTML5 or flash or tricky solution - just the basic question, is it possible with plain old HTML in a plain old browser.
I am okay with having multiple upload fields and multiple buttons to choose each file.
A single submit button needs to submit them both.
Needs to support IE6.
Is this possible? It seems very hard to find a straight answer.
For example would something like this work? (I grabbed it from somewhere on the net sorry if I have not credited the source)
<form action="/py/uploadfile" method="post" enctype="multipart/form-data" name="form1" id="form1">
<label>upload file<input type="file" name="file[]" id="file1" /></label>
<label>upload file<input type="file" name="file[]" id="file2" /></label>
<label>upload file<input type="file" name="file[]" id="file3" /></label>
<label><input type="submit" name="button" id="button" value="Submit" /></label>
</form>
thanks
Just add another input[type="file"], and make sure it has a different name:
<form action="...">
...other fields...
<input type="file" name="coverLetter" />
<input type="file" name="resume" />
...other fields...
<input type="submit" value="send" />
</form>
Related
So, I have a custom newtab page where I show some options for reverse image searching when I drag something over the page.
Here is my not working code for TinEye:
<form
action="https://tineye.com/search"
method="POST"
enctype="multipart/form-data"
target="_blank"
>
TinEye
<input type="file" name="url" />
<input type="submit" />
</form>
And here is my working code for google:
<form
action="https://images.google.de/searchbyimage/upload"
method="POST"
enctype="multipart/form-data"
target="_blank"
>
Google Images
<input type="file" name="encoded_image" />
<input type="submit" />
</form>
I looked in the code from TinEye (They have public sourcemaps, pretty cool!) and think the search/upload logic works completely through JavaScript and does not work with a form submit like mine, but if someone of you has a solution that works somehow, without me needing to upload the image first to a server, please tell me.
Thanks in advance
I found the solution by myself and it looks like this:
<form
action="https://tineye.com/search/upload"
method="POST"
enctype="multipart/form-data"
target="_blank"
>
TinEye
<input type="file" name="image" />
<input type="submit" hidden />
</form>
I just tried a bit of random stuff, added the "upload" to the url like it needs to be for google and did take the parameter name ("image") from the input at the TinEye start page.
I'm working on making client side validation for inputs.
I had had been using PHP to do it all.
Needless to say things got cluttered very quickly.
So I looked in to JS and HTML5 and want to move in to that system for validation.
The messages I want to show are like this:
I know that these are done with the the <input type="email"> tag.
After some help, I was pointed to this page html5rocks.
However I cant seem to get anything to popup.
I copied code straight from there site and nothing.
<input id="foo" type="number" max="2" value="1" />
<input id="bar" type="number" max="2" value="3" />
<script>
document.getElementById('foo').validity.rangeOverflow; //false
document.getElementById('bar').validity.rangeOverflow; //true
</script>
What am I missing to make the notification appear?
That popup is a new implementation in HTML5. Just create an input field like this:
<input type="email">
The popup appears automatically when the form is submitted if the input isn't an email-address.
More about the new input fields in HTML5 is at W3Schools.
Form must be submitted before validation kicks in.
So you have to add a button with the type of submit so like so:
<input type="submit" value="blah">
And then you have to enclose all the fields/inputs in a <form> and </form> tag.
here is the working code:
<form>
<input id="foo" type="number" max="2" value="1" />
<input id="bar" type="number" max="2" value="3" />
<input type="submit" value="blah">
</form>
<script>
document.getElementById('foo').validity.rangeOverflow; //false
document.getElementById('bar').validity.rangeOverflow; //true
</script>
As the title states, I'm trying to incorporate many searches into one search bar. More specifically, Google and Amazon. I have setup a radio option to set which site to search when one is selected.
This is the code I currently have:
<form method="get" action="http://www.google.com/search">
<div align="center" style="font-size:75%">
<input type="text" name="q" size="25" maxlength="255" value="" />
<input type="submit" value="Google or Amazon Search" /></br>
<input type="radio" name="sitesearch" value="" />The Web
<input type="radio" name="sitesearch" value="yoursite.com" checked />This Site
</div>
</form>
I have this form for Amazon, but I'm just unsure how to code it into the one search bar.
<form action="http://amazon.com/s/ref=nb_sb_noss" method="get" target="_blank">
<input type="text" id="twotabsearchtextbox" name="field-keywords">
<input type="submit" value="Search" class="nav-submit-input">
</form>
Use JavaScript to change the actual form action in page's DOM (and other parameters, if needed), depending on the user selection (use onclick event on radio to montior for change for example). Simple as that. You won't be able to do that in pure HTML without using some kind of proxy server to redirect the requests and return the results appropriately.
document.your-form.action = (google_selected) ? "http://www.google.com/search" : "http://amazon.com/s/ref=nb_sb_noss";
etc.
I am beginner to HTML. I found there is something like form which is used to pass data to server. I know what is the basic usage.
Last time I cut children of my initial form between two HTML files (some reorganization to include later in JSP). Personally I don't like to start tag <form> in one file, and close the </form> in other file. And I know I could do something like this (I will use this probably):
<form>
// include file1
// include file2
</form>
But now I am just thinking... Is it possible to do something totally different? like this:
// first file
<form name="input" action="index.html" method="get">
<label for="iduser">User:</label><input id="iduser" type="text" name="user">
</form>
// second file
<form name="input">
<label for="iddata">Data:</label><input id="iddata" type="text" name="data">
<input type="submit" value="Submit">
</form>
I want to submit both inputs with button inside second form. I know above doesn't work even if I set the same name attribute. But maybe I missed something?
if you need to break the form in 2 separate files, you can't have nested form elements so what you need to do is this
// first file
User: <input type="text" name="user">
// second file
Data: <input type="text" name="data">
<input type="submit" value="Submit">
There is no need to break it into seperate forms..
Keep it as the one form they will both be poosted to the same location..
// only File
<form name="input" action="index.html" method="post">
<label>User:</label> <input type="text" name="user">
<label>Data:</label> <input type="text" name="data">
<input type="submit" value="Submit">
</form>
if you wanted to carry on to the second page with the first page post values you could use something like php
<?php
$value1FromPrevious = $_POST['user'];
$value2FromPrevious = $_POST['data'];
;?>
More HTML Code forms here
You will just need to change the form ACTION to your new php page..
For example, would like 5 checks boxes to have their own submit button and the other 5 to have their own submit. Should be independednt of each other but they are not grouped together in the html page.
Do I nest the other form? Do I put them under the same name and if so how do I distinct the submit? Submit seems to submit the form name element, not the elements names within the form. (Using HTML and JS)
Thanks.
Your clarification doesn't make too much sense from a user standpoint. Perhaps you want something like this:
<form action="/cgi-bin/Lib.exe" method="post" name="checks" id="Form1">
<input type="checkbox" name="user" value="'$NAME'" id="Checkbox1" />
<input type="checkbox" name="user" value="'$NAME'" id="Checkbox2" />
<input type="submit" value="DELETE" id="Submit1" name="Submit1" />
</form>
<form action="/cgi-bin/Lib.exe" method="post" name="checks" id="Form2">
<input type="checkbox" name="guest" value="'$NAME'" id="Checkbox1" />
<input type="checkbox" name="guest" value="'$NAME'" id="Checkbox2" />
<input type="submit" value="DELETE" id="Submit2" name="Submit2" />
</form>
I'd use the button element. Try this link: http://particletree.com/features/rediscovering-the-button-element/
Basically you use them as your submits. Firefox correctly sends the value attribute but IE sends the innerHTML. But they all come across as name=value/innerHTML.
So for example, using PHP, you could use
if (isset($_POST['nameOfButtonElement'])) {
echo 'user clicked this button';
}
EDIT: IE6 (surprise surprise) doesn't handle this correctly at all. See this question: IE 6 and the multiple button elements all sending their name & values
Maybe something like that (this way you can control it):
function ava_aken_hp()
{
// I use blank form with hidden fields to populate it with values from POST.
document.blank.action="https://www.mypage.com";
document.blank.elements["CHECK"].value=....;
...
document.blank.submit();
}
// In your form:
<input type="submit" value="Submit1" onclick="ava_aken_hp();">