Wordpress TinyMCE Strips OnClick & OnChange (need jQuery) - javascript

Searched a long time to find a solution, but can't find one specific to my needs, so apologies if I've missed something.
On my Wordpress site I have a page with a button, which in order to follow the link of that button a checkbox needs to be checked. This is the code for it...
<form action="#"><input onchange="toggleAccept()" id="agreeCheckbox" type="checkbox" /><label for="agreeCheckbox">I agree to the terms</label></form>
<img src="button.png"/>
There's also some code handling this in the head:
<script type="text/javascript">
function toggleAccept() {
var acceptLink = document.getElementById("accept");
var agreeCheckbox = document.getElementById("agreeCheckbox");
if (agreeCheckbox.checked) {
acceptLink.onclick=function() {
window.location=this.href + "&cbrblaccpt=true";
return false;
}
} else {
acceptLink.onclick=function() {
mustAccept();
return false;
}
}
}
function mustAccept() {
window.alert("Please check the box and agree to the payment terms of this recurring product.");
}
cbrblaccpt
</script>
Basically, if someone tries to click the bottom without checking the box, the above popup appears. Once they check the box, they are taken to the button's link.
The issue I'm having is the TinyMCE is removing the "onchange" and "onclick" parts of the code. I'm guessing because it doesn't like inline Java being there.
After a lot of looking around it seems to me that the ideal solution is to handle this with jQuery in a separate file, but I have absolutely no idea how to do that.
If someone could help in that regard, or perhaps offer another work around then I'm all ears.
Thanks a lot

Well... yes you can handle it with pure jQuery.
I've made an example for you:
REMEMBER to add the jQuery library to your document, just before this <script> and if possible, just before </body> closing HTML tag :D
jQuery:
<script>
$(document).ready(function () {
var agree = $("#accept"); //we cache the element, dont worry
$("#agreeCheckbox").click(function () {
var checked_status = this.checked;
if (checked_status === true) {
agree.removeAttr("disabled");
} else {
agree.attr("disabled", "disabled");
}
});
//we convert the button into an anchor
agree.click(function () {
window.location = $(this).data("href") + "&cbrblaccpt=true";
});
});
</script>
CSS: Because we are using a button instead of an anchor (<a></a>)
#accept {
background: url(http://goo.gl/kCsKU3) center top no-repeat;
color: #FFF;
display: block;
width: 200px;
height: 44px;
border:none;
outline: none;
cursor: pointer;
}
#accept:disabled {
opacity: 0.6;
}
#accept:active {
margin-top:2px;
}
And finally, the HTML: Note we're using data-href attribute for the link instead of a simple hrefbecause this is a button, not an anchor anymore.
<input id="agreeCheckbox" type="checkbox" />
<label for="agreeCheckbox">I agree to the terms</label>
<button data-href="link/?cbur=a" id="accept" disabled="disabled"></button>
JsFiddle: http://jsfiddle.net/n2zej2cg/

Related

Write tag and remove with jQuery Toggle

Good morning all,
I want to create a little bit js code for phpbb forum, I want to create a button, when it's clicking create code [media][/media] the problem is, i can't do Toggle, when button clicking must be create [media][/media] after when again click delete [media][/media] My code:
var textForMedia = "Input your media link";
$('a').click(function() //this will apply to all anchor tags
{
$( ".inner" ).wrapInner( "[media]" + textForMedia + "[/media]");
});
a {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<form action="">
Input video
<textarea style="width:300px;height:200px" placeholder="Media" class="inner"></textarea>
</form>
P.S. and how do array textForMedia disappearing $(textForMedia).fadeToggle('slow', 'linear'); like this?
P.S.S. sorry for my english )
You could do one of many things as follows.
On click of a you add filled class to textarea. On click again check for the filled class and do toggle behavior.
var textForMedia = "Input your media link";
$('a').click(function() //this will apply to all anchor tags
{
if( $(".inner").hasClass("filled"))
{
$(".inner").empty();
$(".inner").removeClass("filled");
}
else{
$(".inner").text("[media]" + textForMedia + "[/media]");
$(".inner").addClass("filled");
}
});
a {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
Input video
<textarea style="width:300px;height:200px" placeholder="Media" class="inner"></textarea>
</form>

Creating form with edit mode

Do you know how to create a form with edit mode? For details: Suppose I've a form with 5 or 6 fields which has button 'Save' and 'Cancel' . If I save the form, it'll show the plain form without text fields and a button named 'Edit' will appear. And When I'll click on 'edit', the form will be editable. Is it possible?
Full example, can handle as many input fileds as you want.(no select,textarea..)
The code is written based on modern browsers in pure javascript and css3.
Tested on Chrome.
hides and shows the buttons with css3,
saves the default values to apply them on cancel,
responds on the enter button.
If any questions .. just ask
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Modern Form</title>
<style>
label{display:block;}
form input{border:none;outline:none;box-sizing:border-box;}
form.invert input{border:1px solid rgba(0,0,0,0.2);outline:none;}
form>button:nth-of-type(1){
color:green;display:none;
}
form>button:nth-of-type(2){
color:red;display:none;
}
form>button:nth-of-type(3){
color:yellow;display:inline-block;
}
form.invert>button:nth-of-type(1){
display:inline-block;
}
form.invert>button:nth-of-type(2){
display:inline-block;
}
form.invert>button:nth-of-type(3){
display:none;
}
</style>
<script>
(function(W){
var D,form,bts,ipt;
function init(){
D=W.document,previous=[];
form=D.getElementsByTagName('form')[0];
bts=form.getElementsByTagName('button');
ipt=form.getElementsByTagName('input');
form.addEventListener('submit',save,false);
bts[1].addEventListener('click',cancel,false);
bts[2].addEventListener('click',edit,false);
}
function save(e){
e.preventDefault();
form.classList.remove('invert');
var l=ipt.length;
while(l--){
ipt[l].readOnly=true;
};
previous=[];
//send your info here
}
function edit(e){
e.preventDefault();
form.classList.add('invert');
var l=ipt.length;
while(l--){
previous[l]=ipt[l].value;
ipt[l].readOnly=false;
}
}
function cancel(e){
form.classList.remove('invert');
e.preventDefault();
var l=ipt.length;
while(l--){
ipt[l].value=previous[l];
ipt[l].readOnly=true;
}
}
W.addEventListener('load',init,false);
})(window)
</script>
</head>
<body>
<form>
<label>A:<input readonly></label>
<label>B:<input readonly></label>
<label>C:<input readonly></label>
<button>Save</button><button>Cancel</button><button>Edit</button>
</form>
</body>
</html>
ps: the handler function could be merged into one bigger function... but i think this way it's easier to understand
The following is a very simplistic sample of how this might be done.
It is just to give you an idea - there are many ways to approach this.
Works in chrome, completely untested in other browsers (for example: assumes 2 pixel border)
What you do will depend on your UX and browser requirements
Sample Fiddle
HTML
<span>Example</span>
<div class="example">
<form>
<label for="ex1fld1">Field 1:</label><input type="text" name="ex1fld1" readonly value="Hello"></input>
<label for="ex1fld2">Field 2:</label><input type="text" name="ex1fld2" readonly></input>
<input type="button" value="Edit"></inpu>
</form>
</div>
CSS
div {
margin-bottom: 20px;
margin-top: 10px;
}
input[type="text"] {
font-size: 14px;
}
input[type="text"][readonly] {
border: 2px solid rgba(0,0,0,0);
}
Script (jQuery used here, but not required for something like this)
var readonly = true;
$('.example input[type="button"]').on('click', function() {
$('.example input[type="text"]').attr('readonly', !readonly);
readonly = !readonly;
$('.example input[type="button"]').val( readonly ? 'Edit' : 'Save' );
return false;
});

Listen to bootstrap checkbox being checked

I am using bootstrap theme called: Core Admin
http://wrapbootstrap.com/preview/WB0135486
This is the code I write:
<div class="span6">
<input type="checkbox" class="icheck" id="Checkbox1" name="userAccessNeeded">
<label for="icheck1">Needed</label>
</div>
And bootstrap generates me this code:
<div class="span6">
<div class="icheckbox_flat-aero" style="position: relative;">
<input type="checkbox" class="icheck" id="Checkbox7" name="userAccessNeeded" style="position: absolute; opacity: 0;">
<ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;"></ins>
</div>
<label for="icheck1" class="">Needed</label>
This is the result:
So basically it makes a pretty checkbox for me. Each time I click on the checkbox, it will add a checked class to the div:
<div class="icheckbox_flat-aero checked" style="position: relative;">
So at first I wanted to listen the input field being changed like this
$('input[type="checkbox"][name="userAccessNeeded"]').change(function () {
if (this.checked) {
}
});
But it doesn't actually change the input field, but rather changes the class of <div> element.
How could I listen to checkbox being checked?
$('input#Checkbox1').change(function () {
if ($('input#Checkbox1').is(':checked')) {
$('input#Checkbox1').addClass('checked');
} else {
$('input#Checkbox1').removeClass('checked');
}
});
i solve it that way.
The template looks to be using https://github.com/fronteed/iCheck/, which has callbacks:
$('input[type="checkbox"][name="userAccessNeeded"]').on('ifChecked', function(event){
alert(event.type + ' callback');
});
Or there is also:
$('input[type="checkbox"][name="userAccessNeeded"]').iCheck('check', function(){
alert('Well done, Sir');
});
Which should work with a whole range of methods:
// change input's state to 'checked'
$('input').iCheck('check');
// remove 'checked' state
$('input').iCheck('uncheck');
// toggle 'checked' state
$('input').iCheck('toggle');
// change input's state to 'disabled'
$('input').iCheck('disable');
// remove 'disabled' state
$('input').iCheck('enable');
// change input's state to 'indeterminate'
$('input').iCheck('indeterminate');
// remove 'indeterminate' state
$('input').iCheck('determinate');
// apply input changes, which were done outside the plugin
$('input').iCheck('update');
// remove all traces of iCheck
$('input').iCheck('destroy');
Link to the Documentation: http://fronteed.com/iCheck/
You need to bind to the ifchecked event via
Use on() method to bind them to inputs:
$('input').on('ifChecked', function(event){
alert(event.type + ' callback');
});
this will change the checked state
$('input').iCheck('check'); — change input's state to checked
This worked for me
jQuery('input.icheck').on('ifChanged', function (event) {
if ($(this).prop('checked')) {
alert('checked');
} else {
alert('unchecked');
}
});
Finally solved it like this, since I am clicking on a div element, then I must listen click event of that, and then check if the div has class and what is the id of checkbox.
$('.iCheck-helper').click(function () {
var parent = $(this).parent().get(0);
var checkboxId = parent .getElementsByTagName('input')[0].id;
alert(checkboxId);
});
Just my five cents, if anyone would have the same problem..
I needed the exact checkbox states. Toggle not worked here. This one has done the required state delivery for me:
$('.iCheck-helper').click(function () {
var checkbox = $(this).parent();
if (checkbox.hasClass('checked')) {
checkbox.first().addClass('checked');
} else {
checkbox.first().removeClass('checked');
}
doWhateverAccordingToChoices();
});
#Srihari got it right except the selector. Indeed the input isn't modified onclick, but the div do :
$('.icheckbox_flat-aero').click(function(){
$(this).find('input:checkbox').toggleClass('checked'); // or .find('.icheck').
});
Hey i hope this logic should work for you
JS CODE:
$('.icheckbox_flat-aero').on('click',function(){
var checkedId=$(this,'input').attr('id');
alert(checkedId);
});
This way a general event is added for all the checkbox`s
Happy Coding :)
Looking at your question and working with bootstrap since the past 1 year, I can definitely say that the checked class being added is not done by bootstrap. Neither is the checked class being added is a property which is built into BS 2.3.*.
Yet for your specific question try the following code.
$('.icheck').click(function(){
$(this).toggleClass('checked');
});
You can get a working example here.
Update 1:
The Checkbox cannot be styled by color using CSS. Hence, the developer is using insert tag to delete the Checkbox and put in his styling code. In effect, the CSS and JS in the specified theme do the styling by putting in the new stylized code.
Instead you can listed to the click event on the div icheckbox_flat-aero.
$('.icheckbox_flat-aero').children().on('click',function(){
alert('checked');
});
Check for the example http://jsfiddle.net/hunkyhari/CVJhe/1/
you could use this:
$('input#Checkbox1').on('ifChanged',function() {
console.log('checked right now');
});

JQuery toggle Q&A: individual Q&As don't operate correctly unless you click on Open All/Close All first

I have a Q&A list with "Open All/Close All" at the top with individual open and close image buttons that toggle when clicked. That works fine.
Then follow individual Q&As, and each has its own open and close image.
If you click on "Open All/Close All" first, as soon as the page loads, and then click on the individual Q&A open/close images, all works fine. But if after page load you click on the individual Q&A open/close images, bypassing "Open All/Close All," they display the inappropriate open or close image.
Here is page code:
<div class="answersee"><span>Open All</span><img src="assets/open.gif" border="0" alt="" /></div>
<div class="answerhide"><span>Close All</span><img src="assets/close.gif" border="0" alt="" /></div>
<div class="qa">
<div><img src="open.gif" border="0" alt="" /><span class="question">Question.</span></div>
<div class="answer"><p>Answer.</p></div>
</div>
Here's the script (also uses Jquery):
$(function () {
$(".qa").click(function () {
$(this).find("div").next().slideToggle("fast");
if ($(this).find("div:eq(0)").find("img").attr("src") == "open.gif") {
$(this).find("div:eq(0)").find("img").attr("src", "close.gif");
}
else {
$(this).find("div:eq(0)").find("img").attr("src", "open.gif");
}
});
$(".answersee").click(function () {
$(".answer").show("fast");
$(".qa > div > img").attr("src", "close.gif");
$(".answerhide").show();
$(".answersee").hide();
})
$(".answerhide").click(function () {
$(".answer").hide("fast");
$(".qa > div > img").attr("src", "open.gif");
$(".answersee").show();
$(".answerhide").hide();
})
});
I don't think it's a CSS problem, or I'd include that code here. Do I need to initialize the script in some way? Or did I make a mistake in the above script?
Here's how I would do it.
Working Demo →
EDIT:
Update the code to have simple open/close link.
Code with comments which explains my approach:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<style>
body
{
font-family: "Verdana";
font-size: 12px;
}
.question
{
background-color: #ccc;
cursor: pointer;
padding: 5px;
margin-bottom: 10px;
border-bottom: 1px solid #000;
}
.answer {
padding: 5px;
}
</style>
<script>
$(document).ready(
function()
{
//Hide all the answers on page load.
$('.answer').hide();
//For all questions, add 'open'/'close' text.
//You can replace it with an image if you like.
//This way, you don't need to specify img tag in your HTML for each question.
$('.question')
.append(' <span>[ open ]</span>');
//Now there are two ways to toggle the visibility of answer.
//Either click on the question OR click on Open All / Close All link.
//To use the same code for both instances, we will create
//a function which will take the 'question' div and toggle the answer for it.
//Advantage of this approach is that the code to toggle the answer is in
//one place.
//By default, this function will try to toggle the status of the answer
//i.e. if it's visible, hide it otherwise show it.
//This function will take a second argument called 'showAnswer'.
//If this argument is passed, it overrides the toggle behavior.
//If 'showAnswer' is true, answer is shown.
//If it's false, answer is hidden.
//This second parameter will be used by the 'openAll', 'closeAll' links.
var toggleAnswer = function toggleAnswer(question, showAnswer)
{
//The way I have structured the HTML, answer DIV is right after
//question DIV.
var $answer = $(question).next('div');
//Animation callback, after the animation is done, we want to
//switch the 'text' to display what could the user do with the question.
//Once again, you can change this code to show open/close image.
var updateText = function()
{
var text = $answer.is(':visible') ? ' [close] ' : ' [open] ';
$(question).find('span').html(text);
}
var method = null;
if(arguments.length > 1)
{
//If the function was called with two arguments, use the second
//argument to decide whether to show or hide.
method = showAnswer === true ? 'show' : 'hide';
}
else
{
//Second argument was not passed, simply toggle the answer.
method = $answer.is(':visible') ? 'hide' : 'show';
}
$answer[method]('fast', updateText);
};
//On each question click, toggle the answer.
//If you have noticed, I didn't enclose both Q&A inside one DIV.
//The way you have done if user clicks on the answer, answer will collapse.
//This may not be desirable as user may want to copy the answer
//and he won't be able to.
$('.question').click(function(){ toggleAnswer(this);});
//We will reuse the same toggleAnswer method in openAll, closeAll
//handling. This way, if you want to change behavior of how the question/answers
//are toggled, you can do it in one place.
$('#openClose').click(
function()
{
var showAnswer = $(this).html().toLowerCase().indexOf('open') != -1 ? true : false;
$('.question').each(function() { toggleAnswer(this, showAnswer); });
$(this).html(showAnswer ? 'Close All' : 'Open All');
return false;
}
);
}
);
</script>
<html>
<head>
<title>simple document</title>
</head>
<body>
<a id='openClose' href='#'>Open All</a>
<br /><br />
<div class='question'>Question 1</div>
<div class='answer'>Answer 1</div>
<div class='question'>Question 2</div>
<div class='answer'>Answer 2</div>
<div class='question'>Question 3</div>
<div class='answer'>Answer 3</div>
</body>
</html>
You need to use the callbacks because your animation will not have finished by the time to check for which image is being shown.
$(".qa").click(function() {
$(this).find("div").next().slideToggle("fast", toggleImage);
}
function toggleImage(){
var $img = $(this).find("img");
$img.attr('src') == "open.gif" ? $img.attr('src', "close.gif") : $img.attr('src', "open.gif");
}
N.B There are better ways to do this but lets get you working first and then see if you want to refactor it some more.
Thank you for taking the time to provide this. I will try this later today and report back. In my version, I toggle the Open All/Close All feature. It's a cleaner look and easier to use, since you don't have to move your mouse.
Redsquare and Solution Yogi:
Thanks. I will reply again later and also post a working demo so you can see the problem more clearly. Sorry, I should have done that before.
Liz

In JavaScript can I make a "click" event fire programmatically for a file input element?

I'd like to make a click event fire on an <input type="file"> tag programmatically.
Just calling click() doesn't seem to do anything or at least it doesn't pop up a file selection dialog.
I've been experimenting with capturing events using listeners and redirecting the event, but I haven't been able to get that to actually perform the event like someone clicked on it.
I have been searching for solution to this whole day. And these are the conclusions that I have made:
For the security reasons Opera and Firefox don't allow to trigger file input.
The only convenient alternative is to create a "hidden" file input (using opacity, not "hidden" or "display: none"!) and afterwards create the button "below" it. In this way the button is seen but on user click it actually activates the file input.
Upload File
You cannot do that in all browsers, supposedly IE does allow it, but Mozilla and Opera do not.
When you compose a message in GMail, the 'attach files' feature is implemented one way for IE and any browser that supports this, and then implemented another way for Firefox and those browsers that do not.
I don't know why you cannot do it, but one thing that is a security risk, and which you are not allowed to do in any browser, is programmatically set the file name on the HTML File element.
You can fire click() on any browser but some browsers need the element to be visible and focused. Here's a jQuery example:
$('#input_element').show();
$('#input_element').focus();
$('#input_element').click();
$('#input_element').hide();
It works with the hide before the click() but I don't know if it works without calling the show method. Never tried this on Opera, I tested on IE/FF/Safari/Chrome and it works. I hope this will help.
THIS IS POSSIBLE:
Under FF4+, Opera ?, Chrome:
but:
inputElement.click() should be called from user action context! (not script execution context)
<input type="file" /> should be visible (inputElement.style.display !== 'none') (you can hide it with visibility or something other, but not "display" property)
just use a label tag, that way you can hide the input, and make it work through its related label
https://developer.mozilla.org/fr/docs/Web/HTML/Element/Label
For those who understand that you have to overlay an invisible form over the link, but are too lazy to write, I wrote it for you. Well, for me, but might as well share. Comments are welcome.
HTML (Somewhere):
<a id="fileLink" href="javascript:fileBrowse();" onmouseover="fileMove();">File Browse</a>
HTML (Somewhere you don't care about):
<div id="uploadForm" style="filter:alpha(opacity=0); opacity: 0.0; width: 300px; cursor: pointer;">
<form method="POST" enctype="multipart/form-data">
<input type="file" name="file" />
</form>
</div>
JavaScript:
function pageY(el) {
var ot = 0;
while (el && el.offsetParent != el) {
ot += el.offsetTop ? el.offsetTop : 0;
el = el.offsetParent;
}
return ot;
}
function pageX(el) {
var ol = 0;
while (el && el.offsetParent != el) {
ol += el.offsetLeft ? el.offsetLeft : 0;
el = el.offsetParent;
}
return ol;
}
function fileMove() {
if (navigator.appName == "Microsoft Internet Explorer") {
return; // Don't need to do this in IE.
}
var link = document.getElementById("fileLink");
var form = document.getElementById("uploadForm");
var x = pageX(link);
var y = pageY(link);
form.style.position = 'absolute';
form.style.left = x + 'px';
form.style.top = y + 'px';
}
function fileBrowse() {
// This works in IE only. Doesn't do jack in FF. :(
var browseField = document.getElementById("uploadForm").file;
browseField.click();
}
Try this solution: http://code.google.com/p/upload-at-click/
If you want the click method to work on Chrome, Firefox, etc, apply the following style to your input file. It will be perfectly hidden, it's like you do a display: none;
#fileInput {
visibility: hidden;
position: absolute;
top: 0;
left: -5000px;
}
It's that simple, I tested it works!
$(document).one('mousemove', function() { $(element).trigger('click') } );
Worked for me when I ran into similar problem, it's a regular eRube Goldberg.
WORKING SOLUTION
Let me add to this old post, a working solution I used to use that works in probably 80% or more of all browsers both new and old.
The solution is complex yet simple. The first step is to make use of CSS and guise the input file type with "under-elements" that show through as it has an opacity of 0. The next step is to use JavaScript to update its label as needed.
HTML The ID's are simply inserted if you wanted a quick way to access a specific element, the classes however, are a must as they relate to the CSS that sets this whole process up
<div class="file-input wrapper">
<input id="inpFile0" type="file" class="file-input control" />
<div class="file-input content">
<label id="inpFileOutput0" for="inpFileButton" class="file-input output">Click Here</label>
<input id="inpFileButton0" type="button" class="file-input button" value="Select File" />
</div>
</div>
CSS Keep in mind, coloring and font-styles and such are totally your preference, if you use this basic CSS, you can always use after-end mark up to style as you please, this is shown in the jsFiddle listed at the end.
.file-test-area {
border: 1px solid;
margin: .5em;
padding: 1em;
}
.file-input {
cursor: pointer !important;
}
.file-input * {
cursor: pointer !important;
display: inline-block;
}
.file-input.wrapper {
display: inline-block;
font-size: 14px;
height: auto;
overflow: hidden;
position: relative;
width: auto;
}
.file-input.control {
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
height: 100%;
position: absolute;
text-align: right;
width: 100%;
z-index: 2;
}
.file-input.content {
position: relative;
top: 0px;
left: 0px;
z-index: 1;
}
.file-input.output {
background-color: #FFC;
font-size: .8em;
padding: .2em .2em .2em .4em;
text-align: center;
width: 10em;
}
.file-input.button {
border: none;
font-weight: bold;
margin-left: .25em;
padding: 0 .25em;
}
JavaScript Pure and true, however, some OLDER (retired) browsers may still have trouble with it (like Netscrape 2!)
var inp = document.getElementsByTagName('input');
for (var i=0;i<inp.length;i++) {
if (inp[i].type != 'file') continue;
inp[i].relatedElement = inp[i].parentNode.getElementsByTagName('label')[0];
inp[i].onchange /*= inp[i].onmouseout*/ = function () {
this.relatedElement.innerHTML = this.value;
};
};
Working jsFiddle Example
It works :
For security reasons on Firefox and Opera, you can't fire the click on file input, but you can simulate with MouseEvents :
<script>
click=function(element){
if(element!=null){
try {element.click();}
catch(e) {
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click",true,true,window,0,0,0,0,0,false,false,false,false,0,null);
element.dispatchEvent(evt);
}
}
};
</script>
<input type="button" value="upload" onclick="click(document.getElementById('inputFile'));"><input type="file" id="inputFile" style="display:none">
I know this is old, and all these solutions are hacks around browser security precautions with real value.
That said, as of today, fileInput.click() works in current Chrome (36.0.1985.125 m) and current Firefox ESR (24.7.0), but not in current IE (11.0.9600.17207). Overlaying a file field with opacity 0 on top of a button works, but I wanted a link element as the visible trigger, and hover underlining doesn't quite work in any browser. It flashes on then disappears, probably the browser thinking through whether hover styling actually applies or not.
But I did find a solution that works in all those browsers. I won't claim to have tested every version of every browser, or that I know it'll continue to work forever, but it appears to meet my needs now.
It's simple: Position the file input field offscreen (position: absolute; top: -5000px), put a label element around it, and trigger the click on the label, instead of the file field itself.
Note that the link does need to be scripted to call the click method of the label, it doesn't do that automatically, like when you click on text inside a label element. Apparently the link element captures the click, and it doesn't make it through to the label.
Note also that this doesn't provide a way to show the currently selected file, since the field is offscreen. I wanted to submit immediately when a file was selected, so that's not a problem for me, but you'll need a somewhat different approach if your situation is different.
JS Fiddle: http://jsfiddle.net/eyedean/1bw357kw/
popFileSelector = function() {
var el = document.getElementById("fileElem");
if (el) {
el.click();
}
};
window.popRightAway = function() {
document.getElementById('log').innerHTML += 'I am right away!<br />';
popFileSelector();
};
window.popWithDelay = function() {
document.getElementById('log').innerHTML += 'I am gonna delay!<br />';
window.setTimeout(function() {
document.getElementById('log').innerHTML += 'I was delayed!<br />';
popFileSelector();
}, 1000);
};
<body>
<form>
<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)" />
</form>
<a onclick="popRightAway()" href="#">Pop Now</a>
<br />
<a onclick="popWithDelay()" href="#">Pop With 1 Second Delay</a>
<div id="log">Log: <br /></div>
</body>
Here is pure JavaScript solution to this problem. Works well across all browsers
<script>
function upload_image_init(){
var elem = document.getElementById('file');
if(elem && document.createEvent) {
var evt = document.createEvent("MouseEvents");
evt.initEvent("click", true, false);
elem.dispatchEvent(evt);
}
}
</script>
This code works for me. Is this what you are trying to do?
<input type="file" style="position:absolute;left:-999px;" id="fileinput" />
<button id="addfiles" >Add files</button>
<script language="javascript" type="text/javascript">
$("#addfiles").click(function(){
$("#fileinput").click();
});
</script>
My solution for Safari with jQuery and jQuery-ui:
$("<input type='file' class='ui-helper-hidden-accessible' />").appendTo("body").focus().trigger('click');
There are ways to redirect events to the control but don't expect to be able to easily fire events to the fire control yourself as the browsers will try to block that for (good) security reasons.
If you only need the file dialog to show up when a user clicks something, let's say because you want better looking file upload buttons, then you might want to take a look at what Shaun Inman came up with.
I've been able to achieve keyboard triggering with creative shifting of focus in and out of the control between keydown, keypress & keyup events. YMMV.
My sincere advice is to leave this the alone, because this is a world of browser-incompatibility-pain. Minor browser updates may also block tricks without warning and you may have to keep reinventing hacks to keep it working.
I was researching this a while ago because I wanted to create a custom button that would open the file dialog and start the upload immediately. I just noticed something that might make this possible - firefox seems to open the dialog when you click anywhere on the upload. So the following might do it:
Create a file upload and a separate element containing an image that you want to use as the button
Arrange them to overlap and make the file element backgroud and border transparent so the button is the only thing visible
Add the javascript to make IE open the dialog when the button/file input is clicked
Use an onchange event to submit the form when a file is selected
This is only theoretical since I already used another method to solve the problem but it just might work.
I had a <input type="button"> tag hidden from view. What I did was attaching the "onClick" event to any visible component of any type such as a label. This was done using either Google Chrome's Developer Tools or Mozilla Firefox's Firebug using the right-click "edit HTML" command. In this event specify the following script or something similar:
If you have JQuery:
$('#id_of_component').click();
if not:
document.getElementById('id_of_component').click();
Thanks.
Hey this solution works.
for download we should be using MSBLOB
$scope.getSingleInvoicePDF = function(invoiceNumberEntity) {
var fileName = invoiceNumberEntity + ".pdf";
var pdfDownload = document.createElement("a");
document.body.appendChild(pdfDownload);
AngularWebService.getFileWithSuffix("ezbillpdfget",invoiceNumberEntity,"pdf" ).then(function(returnedJSON) {
var fileBlob = new Blob([returnedJSON.data], {type: 'application/pdf'});
if (navigator.appVersion.toString().indexOf('.NET') > 0) { // for IE browser
window.navigator.msSaveBlob(fileBlob, fileName);
} else { // for other browsers
var fileURL = window.URL.createObjectURL(fileBlob);
pdfDownload.href = fileURL;
pdfDownload.download = fileName;
pdfDownload.click();
}
});
};
For AngularJS or even for normal javascript.
This will now be possible in Firefox 4, with the caveat that it counts as a pop-up window and will therefore be blocked whenever a pop-up window would have been.
Here is solution that work for me:
CSS:
#uploadtruefield {
left: 225px;
opacity: 0;
position: absolute;
right: 0;
top: 266px;
opacity:0;
-moz-opacity:0;
filter:alpha(opacity:0);
width: 270px;
z-index: 2;
}
.uploadmask {
background:url(../img/browse.gif) no-repeat 100% 50%;
}
#uploadmaskfield{
width:132px;
}
HTML with "small" JQuery help:
<div class="uploadmask">
<input id="uploadmaskfield" type="text" name="uploadmaskfield">
</div>
<input id="uploadtruefield" type="file" onchange="$('#uploadmaskfield').val(this.value)" >
Just be sure that maskfied is covered compeltly by true upload field.
You can do this as per answer from Open File Dialog box on <a> tag
<input type="file" id="upload" name="upload" style="visibility: hidden; width: 1px; height: 1px" multiple />
Upload
I found that if input(file) is outside form, then firing click event invokes file dialog.
Hopefully this helps someone - I spent 2 hours banging my head against it:
In IE8 or IE9, if you trigger opening a file input with javascript in any way at all (believe me I've tried them all), it won't let you submit the form using javascript, it will just silently fail.
Submitting the form via a regular submit button may work but calling form.submit(); will silently fail.
I had to resort to overlaying my select file button with a transparent file input which works.
This worked for me:
<script>
function sel_file() {
$("input[name=userfile]").trigger('click');
}
</script>
<input type="file" name="userfile" id="userfile" />
Click
it's not impossible:
var evObj = document.createEvent('MouseEvents');
evObj.initMouseEvent('click', true, true, window);
setTimeout(function(){ document.getElementById('input_field_id').dispatchEvent(evObj); },100);
But somehow it works only if this is in a function which was called via a click-event.
So you might have following setup:
html:
<div onclick="openFileChooser()" class="some_fancy_stuff">Click here to open image chooser</div>
<input type="file" id="input_img">
JavaScript:
function openFileChooser() {
var evObj = document.createEvent('MouseEvents');
evObj.initMouseEvent('click', true, true, window);
setTimeout(function()
{
document.getElementById('input_img').dispatchEvent(evObj);
},100);
}
You can use
<button id="file">select file</button>
<input type="file" name="file" id="file_input" style="display:none;">
<script>
$('#file').click(function() {
$('#file_input').focus().trigger('click');
});
</script>
To do so you can click an invisible, pass-through element over the file input :
function simulateFileClick() {
const div = document.createElement("div")
div.style.visibility = "hidden"
div.style.position = "absolute"
div.style.width = "100%"
div.style.height = "100%"
div.style.pointerEvents = "none"
const fileInput = document.getElementById("fileInput") // or whatever selector you like
fileInput.style.position = "relative"
fileInput.appendChild(div)
const mouseEvent = new MouseEvent("click")
div.dispatchEvent(mouseEvent)
}

Categories

Resources