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>
Related
I want to auto submit form which flow is like below.
input type = 'file' should not display.
if click on submit button choose file pop up should open.
after selecting a file form should auto submit with validation.
I complete most of this but facing problem while submitting form.
NOTE -> i hide input type = 'file' using css style.
Here is my HTMLfrom
<form method="post" class="form" action="<?php echo base_url('csv/store'); ?>" enctype="multipart/form-data">
<input type="file" id="myfile" name="myfile" accept=".csv" style="display:none">
<br/>
<input type="submit" class="submit btn btn-primary" value="Import csv"/>
</form>
This is my javaScript
<script>
$(document).ready(function(){
function validation() {
//validation here
}
$('.submit').click(function(event) {
event.preventDefault();
$('#myfile').click();
});
});
</script>
Is this what you want?
$(document).ready(function(){
function validation() {
//validation here
alert('in function validation')
$('#myForm').submit();
}
$('.submit').click(function(event) {
event.preventDefault();
$('#myfile').click();
});
$('#myfile').on('change',function(){
validation();
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" class="form" id="myForm" action="<?php echo base_url('csv/store'); ?>" enctype="multipart/form-data">
<input type="file" id="myfile" name="myfile" accept=".csv" style="display:none">
<br/>
<input type="submit" class="submit btn btn-primary" value="Import csv"/>
</form>
Instead of using the submit button, give the hidden input type="file" a <label> element and style that as a button. This will make it look like a submit button, but will instead prompt the file upload.
Then listen for the change event on the hidden file input. This event will be fired every time you upload a file. There you'll want to do validation. If the validation succeeds, manually submit the form with the jQuery .submit() method.
$(document).ready(function() {
function validation(files) {
//validation here, now returns true for demonstration.
return true;
}
$('#myfile').change(function(event) {
// Check if files are valid.
const isValid = validation(event.target.files);
// If the are..
if (isValid) {
// ..submit the form.
$('#myform').submit();
}
});
});
.btn {
display: inline-block;
padding: 0.5rem;
border: 1px solid #d0d0d0;
border-radius: 3px;
background-color: #f0f0f0;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myform" method="post" class="form" action="<?php echo base_url('csv/store'); ?>" enctype="multipart/form-data">
<label for="myfile" class="submit btn btn-primary">Import CSV</label>
<input type="file" id="myfile" name="myfile" accept=".csv" style="display:none">
</form>
I have this code in my html where I'm to upload three files. The submit button for all the corresponding file uploads is disabled unless a file is selected.
$(document).ready(
function() {
$('input:file').change(
function() {
if ($(this).val()) {
$('input:submit').attr('disabled', false);
}
}
);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" method="post">
<input type="file" name="fileInput1" id="fileInput1" />
<input type="submit" value="submit" disabled />
</form>
<form action="#" method="post">
<input type="file" name="fileInput2" id="fileInput2" />
<input type="submit" value="submit" disabled />
</form>
<form action="#" method="post">
<input type="file" name="fileInput3" id="fileInput3" />
<input type="submit" value="submit" disabled />
</form>
My concern is that, if I select a file for the first form, the submit button in the other forms too get enabled.
Option 1:
Regardless of the order of the elements, this will enable the wanted button:
$(document).ready(
function(){
$('form input:file').change(
function(){
if ($(this).val()) {
// Select button of this form
$(this).parent('form')
.children('input:submit')
.attr('disabled',false);
}
}
);
});
see this jsFiddle
Option 2: This will enable it in case Input-submit is always next to Input-File:
$(this).next().attr('disabled',false);
instead of this:
$('input:submit').attr('disabled',false);
see this jsFiddle
You need to use traversing, to find the right button within the right form.
$(document).ready(
function(){
$('input:file').change(
function(){
if ($(this).val()) {
$(this).siblings('input[type=submit]').attr('disabled',false);
}
}
);
});
This will look only for inputs that are siblings of the file input, which means that they are within the same parent element (in your case, the same form).
I want to show my error if 'fileToUpload' is empty (show error with js) and stop reloading page if 'fileToUpload' is empty
<form method="post" enctype="multipart/form-data">
Select image to upload:
<input type="file" name="fileToUpload" id="fileToUpload">
<input class='new_post' type="submit" value="Upload Image" name="submit">
</form>
$('.new_post').click(function() {
var get_photo = $('#fileToUpload').get(0).files.length;
// If 0 file show error
if (get_photo == 0) {
openandclose('.error_box' , 'emptyyyy.', 1700);
$('.error_box').focus();
return false;
}
});
Add an id to your form like this <form method="post" enctype="multipart/form-data" id="myform"> and in your javascript attach the checking function as callback to the form submit event rather than button click event like $('#myform').submit().
$('#myform').submit(function() {
var get_photo = $('#fileToUpload').get(0).files.length;
// If 0 file show error
if (get_photo == 0) {
/*
openandclose('.error_box', 'emptyyyy.', 1700);
$('.error_box').focus();
*/
alert("EMPTY!!");
return false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" enctype="multipart/form-data" id="myform">
Select image to upload:
<input type="file" name="fileToUpload" id="fileToUpload">
<input class='new_post' type="submit" value="Upload Image" name="submit">
</form>
This code might help you out.Upon clicking the button it checks for whether file is selected or not , and return True/False Accordingly.
<form method="post" enctype="multipart/form-data" onsubmit="return funccheck();">
Select image to upload:
<input type="file" name="fileToUpload" id="fileToUpload">
<input class='new_post' type="submit" value="Upload Image" name="submit"> </form>
<script>
function funccheck() {
var get_photo = $('#fileToUpload').get(0).files.length;
// If 0 file show error
if (get_photo == 0) {
openandclose('.error_box' , 'emptyyyy.', 1700);
$('.error_box').focus();
return false; //stops page loading
}
return true; // initiates page loading
});
</script>
Try this:
$('.new_post').click(function(e) { var get_photo = $('#fileToUpload').get(0).files.length; // If 0 file show error if (get_photo == 0) { openandclose('.error_box' , 'emptyyyy.', 1700); $('.error_box').focus();
e.preventDefault();
return false; } });
The variable e is the event, the function preventDefault will stop the form from submitting if there is no file.
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 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;
}