I encounter a problem with a file upload form when I use Internet Explorer (9).
My form is a little special because I simulate a secondary behavior on my both inputs :
For the input[type=file], after the user selects a file, I submit the form.
For the input[type=submit], before he submits the form, I open the file browser and once he selects a file, I submit it.
The my script works with Chrome and FF but not IE. Indeed when I test the submit button the form is not sent whereas when I use the input[type=file], I don't have any problems.
Here is the HTML:
<form name="up" action="/" method="post" enctype="multipart/form-data">
<div class="fileinputs">
<input type="file" name="FILE" size="38" class="file" id="upload" onchange="submitForm()" />
<input type="submit" value="BROWSE" name="ok" class="submit" id="submit_button_id" onclick="return check();" />
</div>
</form>
JS :
function submitForm() {
document.getElementById("submit_button_id").click();
}
function check()
{
var path = false;
document.getElementById('upload').click();
var filesent = document.getElementById("upload");
filesent.value === "" ? path = false : path = true;
if(!path){
return false;
}
return true;
}
Related
I have created a global function to add a loading effect to my submit buttons in my forms :
// add loading effet for forms
$('form').not('.form-ajax').on('submit', function() {
btnLoad($(this).find('button[type="submit"]'));
});
It just shows a loader on the submit button, and disable it.
It works, but sometimes I want to show confirm before submitting :
<form method="post"
action="/delete/post"
onsubmit="return confirm('Do you want to delete this post ?');"
>
<input type="hidden" value="2" name="id" />
<button type="submit">
Delete post
</button>
</form>
So it shows the loader on my button, but the form is not submitting if the user click no on confirm dialog.
Can I catch it easily ? To show loader on if form is really submitted ?
it'll help u:
<form method="post"
action="/delete/post"
onsubmit="return validate(this);"
>
<input type="hidden" value="2" name="id" />
<button type="submit">
Delete post
</button>
</form>
<script>
function validate(form) {
// validation code here ...
if(!valid) {
alert('Please correct the errors in the form!');
return false;
}
else {
return confirm('Do you really want to submit the form?');
}
}
</script>
Here is my form:
<form id="myForm">
<input id="htmlString" type="text" name="htmlField" ><br>
<input type="Submit" value="Submit" >
</form>
And need to fill it from console.
just to use it in my app,
Will inject javascript with data to local html file.
I tried to make the form without a submit button like so:
<body>
<form id="myForm">
<input id="htmlString" type="text" name="htmlField" ><br>
</form>
<script>
htmlString.oninput = function(){
///do some stuff
}
</script>
</body>
Expecting that :
document.getElementById('htmlString').value="moo" ;
It automatically submit the form, because here oninput used.
But it just stayed filled with inputs and not proceed further.
Tried with other solution:
form = document.getElementById("myForm")
form.submit()
But it just refreshed the page and not submitted the form.
The need is just one filed without else, and inject my string to it with javascript to run functions embedded in the html.
Try making the input button hidden.
<body>
<form id="myForm">
<input id="htmlString" type="text" name="htmlField" ><br>
<input type="Submit" value="Submit" style="display: none" >
</form>
<button onclick="simulateConsole()">Try it</button>
<script>
htmlString.oninput = function(){
if(this.value === "moo") {
myForm.submit();
}
}
// This event will be triggered even if you use console
htmlString.onsubmit = function(){
if(this.value === "moo") {
// do something onSubmit
}
}
function simulateConsole() {
// you can simulate this in console
htmlString.value = "moo";
myForm.submit();
}
</script>
</body>
I hope it helps.
You need to supply an action to the form, otherwise it will just reload the page.
See more here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form
I have this application with a file input and a submit input. I want the submit input to be disabled until the file input has a value. How do I check this kind of information with JS? I tried adding a "required" to the file input, but it still doesn't work...
Should I just use PHP and check if $_FILE isset()?
Should I just use PHP and check if $_FILE isset()?
It is good practice to ensure that the server gets what is expected. So yes, additional checks for a file and eventual mischiefs should also be done on the server.
Here is an example of what you want on the client-side.
JSFiddle
HTML
<form name="fileForm" onchange="changed()">
<input type="file" name="image">
<input type="submit" name="submit" disabled>
</form>
JavaScript
function changed() {
var form = document.forms.fileForm;
if(form.image.value.length > 0) {
form.submit.removeAttribute("disabled");
} else {
form.submit.setAttribute("disabled", "");
}
}
Try this
<form name="form1">
<input type="file" name="image" id="file_upload">
<input type="submit" name="submit" id="btn_submit" >
</form>
jQuery(document).ready(function()
{
/*To disable the button on load*/
jQuery("#btn_submit").attr('disabled','disabled');
jQuery("#file_upload").change(function()
{
var file_value= jQuery(this).val();
if(jQuery(this).val() === '')
{
jQuery("#btn_submit").attr('disabled','disabled');
}
else
{
jQuery("#btn_submit").removeAttr('disabled');
}
});
});
I have an upload file form, and i try to upload the file when it's selected,so i tried something like this:
<form enctype="multipart/form-data" method="POST" onsubmit="return
UploadFile(this);">
<input id="upfile" type="file" onchange="this.form.submit();"/>
</form>
The form.submit() works , but of course i need to do some validation on submit,so i tried to run a function:
function UploadFile(file){
alert('Bleah');
return false;
}
On normal circumstances it should return false, and the form shouldn't reload the page,but this doesn't happens.
If i add a submit input into the form, it works as expected:
<form enctype="multipart/form-data" method="POST" onsubmit="return
UploadFile(this);">
<input type="submit" name="upload" value="Upload">
<input id="upfile" type="file"/>
</form>
Can anyone explain me what is wrong please?
Try this:
function UploadFile(file) {
if (file.value === '') {
alert("Invalid File");
} else {
alert('Form will be submitted now!');
document.getElementById('myForm').submit();
}
}
<form enctype="multipart/form-data" method="POST" id="myForm">
<input id="upfile" name="upfile" type="file" onchange="UploadFile(this);" />
</form>
To upload the file when it's selected, you must call UploadFile() function on the input change, not on the form change tag. If you submit on input change, the page gets reloaded.
So, you'd better use something like this:
$('#upfile').onchange(function(){
if(UploadFile(this.parent('form'))){
this.parent('form').submit();
}
})
And you won't need onchange and onsubmit inside the tags any more.
Solution:
<form id="formname" enctype="multipart/form-data" method="POST" action="test.html">
<input id="upfile" type="file" onchange="sendForm()"/>
</form>
<script>
function sendForm() {
var field = document.getElementById("upfile");
if (field) {
console.log("the is a file and the form will be sent");
document.forms["formname"].submit();
}
}
</script>
OLD--
I dont understand, how would you like to submit the form without a submit button? or at least, handle the submission in javascript "object.addEventListener("keydown", myScript);"
--
ok, I read it once again and I understand the question
You need to handle this on javascript and detect the selection of the file. Look at this thread:
how to check if a file is selected using javascript?
With this simple example
<form action="" method="post" enctype="multipart/form-data">
Upload images: <input type="file" name="images[]" multiple="multiple"> <input type="submit" name="submitImgs" value="Upload"/>
</form>
How can I hide the submit button until somthing's in the file field, I've tried to make a php script that look if the $_FILES['error'] == 4 or is_file_uploaded, etc and that don't work. So I want to simply hide the button until something is selected in the file field.
The answer could be in javascript, jQuery... I don't care :D
Thanks
The <input type="file"> element has a files property.
Simply check files.length.
jQuery example, which modifies the submit button on the fly:
// Select the <input type="file"> element
$('input[type=file][name="images[]"]').change(function(){
var hasNoFiles = this.files.length == 0;
$(this).closest('form') /* Select the form element */
.find('input[type=submit]') /* Get the submit button */
.prop('disabled', hasNoFiles); /* Disable the button. */
});
Use this. Attach the code on the change event of the file field.
$(function() {
$("input:file").change(function() {
var fileName = $(this).val();
if(filename != "") { $("#submitButtonId").show(); } //show the button
});
});
The default state of the submit should be hidden (CSS display: none)
And on change event of the file field, you show that submit button
Her's the code
<script>
$(function() {
$("#myfileinput").change(function() {
if($(this)).val() != "") $("submit").show();
});
});
</script/>
<form action="" method="post" enctype="multipart/form-data">
Upload images: <input id="myfileinput" type="file" name="images[]" multiple="multiple">
<input type="submit" name="submitImgs" value="Upload" style="display:none"/>
</form>
<script>
function checkFile() {
var myFSO = new ActiveXObject("Scripting.FileSystemObject");
var filepath = document.upload.file.value;
var thefile = myFSO.getFile(filepath);
var size = thefile.size;
if(size > 0) {
document.getElementById('submit').style.display='block';
}
}
</script>
<form action="" method="post" enctype="multipart/form-data">
Upload images: <input type="file" onChange="checkFile()" name="images[]" multiple="multiple"> <input type="submit" style="display:none;" name="submitImgs" value="Upload" id="submit" />
</form>