I've been trying to figure out how to customize the appearance of a file input in an HTML form so that the button will match with the rest of the buttons on my site. Looking around here I found a solution that I would expect to work, but it's having some strange behavior.
I took my file input and set display:none, and created a new text input and button within the form.
<form method="post" action="../Entry/Create" enctype="multipart/form-data" onsubmit="return aentryValidate()">
<input type="text" id="EntryTitle" name="EntryTitle" maxlength="50" />
<div id="invalidTitle" class="invalidData"></div>
<p id="char-remaining">(50 characters remaining)</p>
<input type="file" id="ImageFile" name="ImageFile" style="display:none;" />
<input type="text" id="ImageFileMask" name="ImageFileMask" disabled="true" />
<button type="button" onclick="HandleFileButtonClick()" id="ImageFileButton" style="margin-left:10px;padding-bottom:0px;height:20px;width:100px;font-size:14px;">browse...</button>
<div id="invalidImage" class="invalidData"></div>
<p id="file-desc">(image to represent your entry, jpg, png, or gif)</p>
<textarea id="EntryDesc" name="EntryDesc"></textarea>
<div id="invalidDesc" class="invalidData"></div>
<br />
<input type="checkbox" id="isPrivate" name="isPrivate" value="true" />
<input type="hidden" name="isPrivate" value="false" />
Make my entry private.
<button id="new-entry-save">save</button>
</form>
Then my javascript to handle the ImageFileButton button being clicked:
function HandleFileButtonClick() {
document.getElementById("ImageFile").click();
document.getElementById("ImageFileMask").value = document.getElementById("ImageFile").value;
}
It appears to work fine. I click the button, the window pops up for me to select a file. When I select a file, it appears in the text box.
The weird behavior comes when I hit the save button on the form. I noticed that it has to be clicked twice to actually submit for some reason now. And, when it submits it is no longer posting the file.
So I made the file input visible again to see what was happening. If I use the ImageFileButton button to select a file, the file shows up in the file input. But when save is clicked, the file input clears and the form doesn't submit. You then have to click again to submit, and of course now there is no file.
Anybody know what is happening here?
No, its not possible. File inputs are generally browser dependant. You might have to use JavaScript replacement or Flash replacement like uploadify.
Article: Input File
Of all form fields, the file upload field is by far the worst when it comes to styling. Explorer Windows offers some (but not many) style possibilities, Mozilla slightly less, and the other browsers none at all. The "Browse" button, especially, is completely inaccessible to CSS manipulation.
Related
I am using following html5 form.
<form>
<input type="text" name="orderno" />
<input name="picture" id="img" type="file" accept="image/*" capture="camera" />
<input class="btn-success" type="submit" name="submit" value="Upload" />
</form>
When I open this page in my mobile phone, I want that When I fill first input text, there should be a button called "NEXT" in my keyboard but currently it shows "GO" button directly. Any Help please?
javascript function document.getElementById('img').focus(); is not opening camera automatically.
I want the facility to launch camera on phone automatically when clicked "NEXT" or "GO" in keyboard.
For Security concerns, most browsers do not allow direct access to file uploader or image capture trigger. User has to click on the corresponding field to upload file or capture photograph. you can define focus after each has been addressed.
In first input have tabindex='1' in second input have tabindex='2' and so on.
I'm writing a cms page for my site. part of it is writing a preview component for my blog. I have a form, and a preview button, that activates a Javascript, which places the html typed in the text-area in a div element to test it. Everything works fine but the problem is that it only works once for each pageload. So I can't test something, add some code and retest it. Any ideas how to make multiple testing possible ?
Code Form:
<form>
<textarea rows="30"cols="30" name="blogpost" style="width:500px;resize:none;" autofocus placeholder="Enter your new blogpost here!"></textarea>
</br>
<input type = "submit" value="post">
<input type = "button" id="testknop" value="previeuw" onclick="previeuwpost(this.form, this.form.blogpost);">
<input type="reset" />
</form>
Javascript Code:
function previeuwpost(form, text){
$("#previeuwbox").replaceWith(text.value);
}
Thanks a lot folks
replaceWith means replaced.
Therefore, after you click, the $("#previeuwbox") is gone.
Please use :
$("#previeuwbox").html(text.value);
I need to retype a bunch of names written on a paper and make a digital copy of it to a computer (a txt file). Then copy/paste each name and submit it again into a website one by one. Type one name then submit, wait until the page reloads, then repeat again. I saved the html file of the website but I don't have access to website's server. I was thinking I could modify the html file I saved so I'll just copy/paste once then click submit once. I'm not sure if it's possible to copy the names from the text file and embed it in the html code or maybe make a code to read the names from the txt file.
Honestly, I don't mind copy and pasting the names one by one into the website. What slows me down is the page reload time and the website only has one input field. It takes a few seconds to reload after submitting one name. So I want to be able to copy paste all then submit it once. I saved a local copy of the html file of the website and added action="website.com/xxxx" so it submits it to the website even if the html file is saved on my computer. The code below is a part of the website's html code:
<form method="post" action="website.com/xxxx">
<input type="text" name="t" style="width:250px">
<button type="submit"><p>Submit<img src="submit.png" style="width:32px;vertical-align:middle"></p></button>
</form>
I was thinking if I could modify it like this:
<form method="post" action="website.com/xxxx">
<input type="text" name="t" style="width:250px" value="jane">
<input type="text" name="t" style="width:250px" value="jenny">
<input type="text" name="t" style="width:250px" value="mark">
<input type="text" name="t" style="width:250px" value="ben">
<input type="text" name="t" style="width:250px" value="cathy">
<button type="submit"><p>Submit<img src="submit.png" style="width:32px;vertical-align:middle"></p></button>
</form>
If you have PHP with HttpRequest installed, you can try something like this
<?php
$url = 'http://website.com/xxxx'; // url of the form action, not the form itself
$names = file('names.txt');
for($names as $name){
$request = new HttpRequest($url, HTTP_METH_POST);
$request->addPostFields(array('t' => trim($name)));
$request->send();
}
If you have PHP but no HttpRequets, you can use cURL, but I have absolutely no idea how it is working.
Other languages should have similar possibilities.
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" ... /]
I'm trying to achieve the following behaviour in html: user is presented with a form involving several text fields. The fields are populated with default values, but in many cases the user will wish to enter their own. When the page loads, the value in the first field is selected, so the user can either replace it by simply starting to type and tabbing out to the next field, or simply leave it and tab out. Here's a pared down example of what I have:
<html>
<body onload="document.getElementById('helloField').select()">
<form>
<input id="helloField" value="hello"/><br/>
<input value="goodbye"/><br/>
<input type="submit" value="Submit"/>
</form>
</body>
</html>
This works in Chrome (and Firefox I believe, but I don't have it here). In IE, the field is selected as intended, but when the user hits tab, the browser tabs out to its address bar rather than to the goodbye field. If I replace the select with a simple focus, like
<body onload="document.getElementById('helloField').focus()">
the tabbing is okay in all browsers, but this isn't what I want. I want the user to be able to start typing right away to replace the default value.
Anyone have any ideas?
Thanks.
Focus, then select.
Also consider putting the code in a script block directly after the input in question. If you have a bunch of images on the page, document.onload can fire quite a lot later, and the last thing you want is to be typing away in an input box when onload fires and hijacks your focus (making you delete the contents of the box).
<input id="helloField" value="hello"/><br/>
<script type="text/javascript">
var hello= document.getElementById('helloField');
hello.focus();
hello.select();
</script>
Try setting the tab order of the fields using tabindex:
<html>
<body onload="document.getElementById('helloField').select()">
<form>
<input id="helloField" value="hello" tabindex="1" /><br/>
<input value="goodbye" tabindex="2" /><br/>
<input type="submit" value="Submit" tabindex="3" />
</form>
</body>
</html>