how to hide a button when there is only one input - javascript

i have created a input type file for uploading site. also i created two button , one of them is for appending the input type file and another is for removing them, but i wanna to hide the delete button when i have only one input type file, these are my codes :
JavaScript:
$(document).ready(function (e) {
$('.add').click(function (e) {
$('.addon').append('<div class="choose"><input type="file" name="userFile" /></div>');
});
$('.delete').click(function (e) {
$('.addon > .choose').last().remove();
if ($('<div class="choose"><input type="file" name="userFile" /></div>').length == 1) {
$('.delete').css('display', 'none');
} else {
$('.delete').css('display', 'block');
}
});
});
and the html
<div class="addon">
<div class="choose">
<input type="file" name="userFile" />
</div>
</div>
but it doesn't work, can you please help me?

You should give the input a class
<input type="file" name="userFile" class="file" />
and then change your if statement to
if($('.file').length == 1){....

It's hard to tell exactly what you are asking, but it seems to me like you want the check for length to be triggered by the onChange event for your input element.

Have your if condition as
$('.delete').length > 1
Thats what you seem to be asking. And the HTML seems incomplete for this question

Related

How to clear HTML multiple file upload without page refresh

I am trying to count how many files have been uploaded, if over 10 images are uploaded then clear the input field but keep everything else in the form.
Everything works great, used the answer from here to clear input and made a function to count files.
The issue is if there are more than 10 images uploaded it clears all input fields because the script refreshes the page and all input information is reset. I'm looking to only clear the multiple upload input field and not have the page refresh when that happens.
Heres what it looks like so far.
<div class="form-group">
<label for="post_gallery_img">Gallery Images</label>
<input id="galleryImgs" type="file" multiple="multiple" name="files[]"><button style="display: none;" onclick="reset2($('#galleryImgs'));event.preventDefault()"></button>
</div>
And the Jquery:
<script>
$("#galleryImgs").on("change", function() {
if($("#galleryImgs")[0].files.length < 11) {
window.reset2 = function (e) {
e.wrap('<form>').closest('form').get(0).reset();
e.unwrap();
}
} else {
$("#addPostsForm").submit();
}
});
</script>
I am thinking I am going to have to use AJAX, but quite new to it.
Any help is appreciated.
You may try something like:
HTML:
<form id="addPostsForm">
<div class="form-group">
<label for="post_gallery_img">Gallery Images</label>
<input id="galleryImgs" type="file" multiple="multiple" name="files[]"><button style="display: none;" onclick="reset2($('#galleryImgs'));event.preventDefault()"></button>
</div>
<br>
<!--<input type="reset" value="Reset">-->
</form>
JS:
$("#galleryImgs").on("change", function() {
if($("#galleryImgs")[0].files.length < 11) {
alert("Now reset file input");
//This code line resets the file input
$('#galleryImgs').val("");
alert("The file input has now been reset");
} else {
$("#addPostsForm").submit();
}
});

Bind file input to a button using Vue.js

I'm trying to bind a input file to a button using Vue.js
Having the following:
<input type="file hidden>
<button>Choose</button>
In JQuery would be somthing like:
$('button').click(function() {
$('input[type=file]').click();
});
So, what this is doing is binding the click event on the button to the input file, this way I have complete control on the look of the button, it can even be a anchor or a image or any element to trigger the event to the input.
My question is: How can I accomplish this using Vue.js?
Thank you!
You can do this:
HTML:
<input id="fileUpload" type="file" hidden>
<button #click="chooseFiles()">Choose</button>
Vue.js:
methods: {
chooseFiles: function() {
document.getElementById("fileUpload").click()
},
...
EDIT - Update syntax:
methods: {
chooseFiles() {
document.getElementById("fileUpload").click()
},
...
Add a ref="file" to your <input> element and later use $refs.file to access it.
<input ref="file" type="file">
<div #click="selectFile()">click to select a file</div>
methods:{
selectFile(){
let fileInputElement = this.$refs.file;
fileInputElement.click();
// Do something with chosen file
}
}
👌 Demo: https://codepen.io/Jossef/pen/QWEbNGv
Simplest way to do this is to stylize a label element like a button, HTML only.
you can use the label html tag for doing this like below
<label for="upload-file" class="css-class">
<input type="file" id="upload-file" hidden #change="choosFile"/>
</label>
in this way you didn't need the button any more and you can customize the label with css as the way you like it
In Vue:
How code below works:
Open file explorer on button (label) click;
Select a file, continue;
#onChange will detect new file:
<label>
<button/> //this can be an icon, link,...
<input #change="doSomething" type="file" ref="file" accept="image/gif,
image/jpeg, image/png" hidden/>
</label>
Handle the file
doSomething(e: any) {
const file = e.target.files[0]
}
There is a much simpler way of way doing this using Vue 3
<input type="file" id="upload-file" name="upload-file" hidden>
<label for="upload-file" refs="upload-file" class="file-btn">Choose a file</label>
Using this you can add classes and styling to the label field.
This might help someone who is using coreui <CInputFile> tag.
for <CInputFile>, this.$refs.file.click() and this.$refs.file.$el.click() both doesn't work.
Because <CInputFile> wraps <div> around <input type="file">. so $el is actually a div element here, you need to go find the <input type="file"> tag and trigger the click() event on the <input type="file"> tag like this
this.$refs.file.$el.getElementsByTagName('input')[0].click().
<input ref="refName" type="file">
<div #click="selectFile()">Select file</div>
export default: {
methods:{
selectFile(){
// refs return list of objects with name 'refName' or if only one object
const r = this.$refs.refName[0] || this.$refs.refName;
r.click();
}
}
}

Jquery input type file as trigger doesnt work

I have multiple input type files. On default they are hidden and only first one is shown. When user selects file with the first input file the funcion below shows the next input type file by id. The problem is that it works only for first 2 change events and than it stops without errors.. How can I make it work for every next input file. Here is the function:
//first we hide all inputs
$('.imagediv').hide();
$('.imagediv:first').show();
var nextupload=$('.imagediv:first').attr('data');
nextupload=(parseInt(nextupload) + 1);
//this is the event
$(function() {
$("input:file").change(function (){
var nextf = $(this).attr('data');
$('#input'+(nextupload)+'').show();
alert('#input'+(nextupload)+'');
});
});
here is how html looks like:
<div class="imagediv" id="input2" data="2">
<input type="file" name="gallery_upload_2" data="gallery_upload_3" id="gallery_upload_2" />
</div>
and so on with the next input..
How to make it work for every next input change? Thanks
I made jsfiddle here: http://jsfiddle.net/Lbu3ksjh/1/
You were missing the +1 part in the change-function:
$('input:file').change(function (){
var nextupload = $(this).parent('.imagediv').attr('data');
nextupload = (parseInt(nextupload) + 1);
$('#input'+(nextupload)+'').show();
alert('#input'+(nextupload)+'');
});
I updated your fiddle:
Demo
Here's another solution. It works on a variable number of file inputs and doesn't require a lot of code nor markup.
DEMO
js
$(function() {
var $fileInputs = $(':file[name*="gallery_"]'), // could be whatever
next = 0;
$fileInputs.not(':first').hide();
$fileInputs.change(function (){
$fileInputs.eq(++next).show();
});
});
html
<input type="file" name="gallery_upload_1" />
<input type="file" name="gallery_upload_2" />
<input type="file" name="gallery_upload_3" />
<input type="text" name="random_text_input" />
<!-- notice it only reveals file inputs -->
<input type="file" name="gallery_upload_4" />

How do I check if a file has been selected in a <input type="file"> element?

I have multiple checkboxes and a file upload input. I would like to re-enable a button if one or more checkbox's are checked AND if the input value is not null.
Here is a link to bootply
Here my html
<div class="upload-block">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="file" id="InputFile">
<button id="upload-btn" type="button blue-button"
class="btn blue-button" disabled>Submit</button>
</div>
Here is my javascript starting point:
Updated via Karl
Bind a change event on all input and then use some condition:
$('.upload-block input').change(function() {
$('#upload-btn').prop(
'disabled',
!($('.upload-block :checked').length && $('#InputFile').val()));
});
Example
This works for all the checkboxes and #InputFile has a value other than none. i.e. where a file has been chosen. However this does not work in IE9
How can I update this to work in IE9?
Bind a change event on all input and then use some condition:
$('.upload-block input').change(function() {
$('#upload-btn').prop(
'disabled',
!($('.upload-block :checked').length && $('#InputFile').val()));
});
Example
Like this:
if($('#InputFile').val().length){
//do your stuff
}
You can better use by using $.trim() method not to allow (trim) spaces:
if($.trim($('#InputFile').val()).length){
//do your stuff
}
Pure JS:
<input type="file" id="InputFile">
<button onclick="buttonSubmitClicked(event)">Submit</button>
<script>
function buttonSubmitClicked(event) {
if (!document.getElementById("InputFile").value) {
event.preventDefault();
alert("Please choose a file!");
} else {
alert("File've been chosen");
}
}
</script>
jsfiddle: check it out
$('.upload-block input').change(function() {
if ($('.upload-block :checked').length && $('#InputFile').val() ) {
$('#upload-btn').prop('disabled',false);
}
else {
$('#upload-btn').prop('disabled',true);
}
});
No need of separate selectors for checkbox and input file .upload-block input is enough to catch catch both the checkbox and file value change
I would apply the validation to all elements involved. This way changing either the checkboxes or the input will update disabled
$('#InputFile, .upload-block :checkbox').change(function(){
var isValid= $('.upload-block :checkbox:checked').length && $('#InputFile').val();
$('#upload-btn').prop('disabled',isValid);
});

How to remove a link?

I have a one file upload button.And i write a jquery validation in upload button.If i don't choose any image error message is displayed but if i click a error message it do file upload functionality?
This is my input type file format:
<input type="file" name="userfile1" id="userfile1" class="span5" ></input>
This is my jquery validation:
$(this).rules("add", {
required: true,
messages: {
required: "Must Select Image To Upload"
}
});
add is button name. if i click "Must Select Image To Upload" this message it do file upload functionality.
How to i remove this link.
Kindly give a solution...
I think you asking about, when user click on the file upload element, hide the error message.
HTML
<input type="file" name="userfile1" id="userfile1" class="span5" ></input>
<div id="errorDiv">Must Select Image To Upload</div>
JS
$("#userfile1").focus(function () {
$('#errorDiv').fadeOut(2000); //replace '#errorDiv' to your error message id.
});
SEE THIS FIDDLE DEMO
UPDATE : Check if the element value is empty or not in #add button click() function. If the value is empty then show the #errorDiv. Write your hiding error div function in on focus of input element.
HTML
<input type="file" name="userfile1" id="userfile1" class="span5"></input>
<div id="errorDiv">Must Select Image To Upload</div>
<input type="button" id="add" value="ADD" />
JS
$('#errorDiv').hide();
$('#add').click(function () {
if ($("#userfile1").val() === '') $('#errorDiv').fadeIn(1000);
});
$("#userfile1").focus(function () {
$('#errorDiv').fadeOut(1000);
});
SEE THIS FIDDLE DEMO
<div id="errorDiv"></div>
<input type="file" name="userfile1" id="userfile1" class="span5" ></input>
$('.span5').each(function() {
if($.trim($(this).val()).length == 0)
{
$("#errorDiv").html("Must Select Image To Upload ");
}
});

Categories

Resources