Using jquery to trigger a file input/fake button - javascript

So I got this button:
<button class="upload-button" type="button">Upload File</button>
which I'm using to cover this default input/browse button:
<input type="file" id="fileinput" name="uploads[]" multiple="multiple">
however when I'm using this script:
$('.upload-button').on('click', function (){
$('#upload-input').click();
});
It does not seem to work, what i want to do is trigger the browse file after the fake button is clicked, i found another post on here where they said that this is because of the visibility of the file input is set to hidden, but when i tried to set it to default, it still did not work. What can the problem be here?

Use trigger :
$('#upload-input').trigger( "click" );

Try to hit the DOM object instead :
$('#upload-input')[0].click();
NOTE : make sure that you've the id upload-input (looks like you need #fileinput instead).
Hope this helps.
$('.upload-button').on('click', function (){
$('#fileinput')[0].click();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="upload-button" type="button">Upload File</button>
<input type="file" id="fileinput" name="uploads[]" multiple="multiple">

Related

Issue: OnChange event does not fire for Input if it is same file is selected twice

I need to listen to file select event whenever user selects a file (on repeated clicks of the browse
button).
However, if the user selects the same file as previously, the change event does not fire. Is there some other event I could listen to, or other solution to this problem?
(function() {
$('.file_upload').on('change', function() {
console.log('Changed!');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="btn btn-primary">File #1 <input name="file1" id="file1" class="file_upload a1" type="file" /></label>
After you have done your logic for your file upload or whatever you are doing, you can reset the value property.
See this post
var $f1 = $("#container .f1");
function FChange() {
alert("f1 changed");
$(this).prop("value", "");
}
$f1.change(FChange);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<input type="file" class="f1">
</div>
Another thing mentioned was that you can actually remove and re add the file input element on change.

how to select the button after adding by using html()?

I add some button by using html(), and I want to write a click funtion for them. however, it does not work. and I don't know what is wrong with it.
the html code after using html():
<input type="button" id="save_1" value="a1" />
<input type="button" id="save_2" value="a2" />
<input type="button" id="save_3" value="a3" />
and my selector is:
$('input[id^=save_]').click(function() {...});
$('input').on('click', 'id^=save_', function() {...});
they all don't work.
could you help me? thank you.
start from document, input also isn't there when dom is created:
$(document).on('click', 'input[id^=save_]', function(){
alert('hi');
});
jsfiddle LINK
You have to bind the click event after your .html() function else it won't work.
Because if you bind click event before .html() function it did not get any of the input element (created dynamically) on which you want to bind the click event
Try below snippet: :-)
$(document).ready(function(){
$('input[id^=save_]').on('click',function() {
alert("Event Fired");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="button" id="save_1" value="a1" />
<input type="button" id="save_2" value="a2" />
<input type="button" id="save_3" value="a3" />
If you want to perform some operation on click event of all button then add one common class for e.g: class="btn" in all input type button on which you want to perform click event, then use following JS code::
$(".btn").on("click",function(){
$(this).attr("id");
// your operation
});
$(this) will be the button which you have clicked. Make sure this code is written inside document ready function.

Cannot click input element within button element

Take a look at the below markup & fiddle:
http://jsfiddle.net/minlare/oh1mg7j6/
<button id="button" type="button">
<span id="test" style="background:pink;">test element</span>
Add File
<input type="file" name="file" multiple="multiple" id="upload">
</button>
In Chrome, each element within the button can be selected through the developer console and js click events are delegated.
In Firefox/IE you cannot select the child elements or pickup js click events.
Is there a way around this in Firefox/IE?
It is not suggested to use elements inside button and so you can use "div" instead of "button" which will make it working both in mozilla and chrome. Check below
<div id="button" type="button">
<span id="test" style="background:pink;">test element</span>
Add File
<input type="file" name="file" multiple="multiple" id="upload">
</div>
http://jsfiddle.net/oh1mg7j6/8/
It's not a good style.Even I can say that this way is not right.you can set "click" event on your button to click the input.so if you want to hide input[file] element,but leave it clickable you can do like I said.Here is a very good link for events docs and examples.
http://www.w3docs.com/learn-javascript/javascript-events.html

Can't run function from button onClick

I'm trying to run a function from a button onClick event and for some really strange reason, it doesn't want to work.
I want to get the function to run from the button with the onClick attribute of "all()" however it doesn't work but when I changed it to an anchor with a href attribute of "javascript:all()" it worked?
Html:
<div id="content">
<input id="heroes" type="text" class="form-control" id="tokenfield-typeahead" />
<button id="all" onClick="all()">Select/Deselect All</button>
<button id="random" onClick="random()">Random</button>
<!-- Example Link to Prove Point -->
Example: Select/Deselect All
</div>
jsfiddle: http://jsfiddle.net/spedwards/2T9TA/
Can anyone tell me why this isn't working? If need be, I'll make a javascript click event instead but I'd rather not.
Not sure why its not working, but I tried changing you all name function to allt and it worked:
<a onclick="allt()">Example: Select/Deselect All</a>
function allt() {
//your code
}
I believe you will need a type attribute in your tag. So, try this:
<button id="all" type="button" onClick="all()">Select/Deselect All</button>

lock all submit button before page fully rendered

may i know how to use jquery to lock all the <input type="submit/button" .. and only allow submit when page is fully rendered?
Because of the use case, I might approach it differently. Instead of actually disabling the buttons, I would just not allow the submit action to work until the page is loaded. This doesn't require any changes to the existing HTML to work, and your pages won't be rendered useless when JS is disabled:
<script>
// Keep all submit buttons from working by returning false from onclick handlers
$('input:submit').live('click', function () {
return false;
});
// After everything loads, remove the the "live" restriction via "die"
$(window).load(function(){
$('input:submit').die();
});
</script>
Update: Forgot to mention to put both this and the script tag to load the jQuery library in your <head> if you want this solution to work. (Thanks for reminding me Mike Sherov).
By default, you have your submit buttons have the disabled attribute set to true:
<input type="submit" disabled="disabled" />
Then, once the page loads, you can do:
$('input').removeAttr('disabled');
jQuery
$(document).ready(function(){
$(":button,:submit").removeAttr("disabled");
});
HTML
<input type="button" id="button1" value="Button 1" disabled="disabled">
<input type="button" id="button2" value="Button 2" disabled="disabled">
<input type="button" id="button3" value="Button 3" disabled="disabled">
<input type="submit" id="submit" value="Submit" disabled="disabled">
<input id="form-submit" type="submit" disabled="disabled" value="Submit" />
$(document).ready(function() {
$("#form-submit").removeAttr('disabled');
});
Couldn't you do something like
window.onsubmit=function(){return false;}
window.onload=function(){window.onsubmit='';}
I am not sure how the event bubbling would work with an onsubmit. I'd have to test it. Also, I don't know jquery so I'm not sure how to integrate it.

Categories

Resources