I can't seem to trigger the click event of input file in IE and i don't know what is the problem
<input type="file" class="ruFileInput" />
<button id="clickMe" value="ClickMe" ></button>
<script type="text/javascript">
$(document).ready(function(){
$("#clickMe").click(function(){
$('input[type=file]').trigger('click');
});
});
it's working fine on firfox and chrome but not in IE9
Add the closing quotes to the class of the first input and add some text to the button to show properly
Here is a fiddle that worked
Also make sure you are grabbing the jquery files as well in your html
Just tested the below and it worked fine. You had missed the closing " at the end of class="ruFileInput
I have tested on IE9 and works fine.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#clickMe").click(function(){
$('input[type=file]').trigger('click');
});
});
</script>
</head>
<body>
<input type="file" class="ruFileInput" />
<button id="clickMe" value="ClickMe" ></button>
</body>
</html>
Related
I am new in Javascript and I am trying to test following code
<html>
<head>
<script src="jquery/jquery.min.js">
</head>
<body>
<input type="button" value="Click button">
<script type="text/javascript">
$(function(){
$('input')[0].on('click',function(){
alert('button clicked');
});
});
</script>
</body>
</html>
but when i open this html file in browser the button doesn't display
Script tags require a closing tag, which you've omitted:
<script src="jquery/jquery.min.js"></script>
^ close
By leaving it open, the browser is treating everything after the script tag as the script content.
Also your $('input')[0] isn't right. That is getting the DOM element of the input, which has no jQuery wrapper and no .on() function. If you are trying to match just the first input then:
$('input').first().on('click',function(){
Problems
Script block must be closed which you missed.
Use $('input') instead of $('input')[0], When you use $('input')[0] you get DOM element which doesn't have click method.
Use
<html>
<head>
<script src="jquery/jquery.min.js"></script>
</head>
<body>
<input type="button" value="Click button">
<script type="text/javascript">
$(function(){
$('input').on('click',function(){
alert('button clicked');
});
});
</script>
</body>
</html>
To avoid these kind of confusions, try to separate like below,
In HTML:
<html>
<head>
<script src="jquery/jquery.min.js"></script>
<script src="main.js"></script>
</head>
<body>
<input type="button" value="Click button">
</body>
</html>
In main.js
$(function(){
$('input').on('click',function(){
alert('button clicked');
});
});
For Demo
Adding the <!DOCTYPE html> is better when you continue developing.
I tried to open file dialog by 'oncontextmenu' event, but it didn't work! I can do this by other event, but only 'oncontextmenu' didn't work.
<html>
<head>
<script type="text/javascript">
function wrapper(ev)
{
ev.preventDefault();
document.getElementById('file').click();
return false;
}
</script>
</head>
<body>
<input id="button" type="button" oncontextmenu="wrapper(event)">
<input id="file" type="file">
</body>
</html>
I want to know solution or why it doesn't work.
Thanks for reading.
It doesn't work because some browsers disallow triggering file input programatically. See this question for numerous attempts of this with questionable success.
My HTML file:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" />
<script src="script.js" type="text/javascript"></script>
</head>
<body>
<form name="someForm">
<input type="button" value="Click me" onClick="myFunction()" />
</form>
<div id="result"></div>
</body>
</html>
My script.js file:
function myFunction(){
$("#result").html("BUTTON WORKS");
}
I have Firebug, and whenever I click the button, Firebug throws me this error:
ReferenceError: myFunction is not defined
What am I doing wrong?
script can't be a self closing tag in HTML (it works on some browsers, depending on the doctype, but it's not correct). You must add a closing tag.
Replace
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" />
with
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
The script element pointing to your script probably isn't parsed correctly due to this error.
From the norm :
A script element must have both a start tag and an end tag.
Blockquote
Might be due to file reference issue.
It is a better practice to attach the event in the js file instead of HTML.
<form name="someForm">
<input type="button" id="btn" value="Click me" />
</form>
$('#btn').on('click', function(){
$("#result").html("BUTTON WORKS");
});
Do you open that file locally (you have file:// in address bar) or from some server (http:// protocol in address bar)? Because if you open file locally, you actually try to load jquery from address:
file://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
which is incorrect. It happens, because you use //ajax.googleapis.com/... as adress, which refers the same protocol as currently opened page.
Either change it to:
http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
of upload your file to some server (or even install one locally) and test it through full http request.
I solved the problem by combining answers from #Susbanth, #MBO, and #dystroy.
Here's my new HTML file:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="script.js" type="text/javascript"></script>
</head>
<body>
<form name="someForm">
<input type="button" value="Click me" />
</form>
<div id="result"></div>
</body>
</html>
I added "http" to the jQuery source, closed the tag, and removed the 'onClick' from inside the HTML.
Here's the updated script.js file:
$(document).ready(function(){
$("input[type=button]").on("click",function(){
$("div#result").html("BUTTON WORK");
});
});
I made the onClick event a jQuery event.
I'm working on a K-Mapping application for Electrical Engineering. However, I'm stuck on a single click function.
if(jQuery)
$(document).ready(function(){
$('a').click(function(){
alert("Evaluate Click Works");
var match = $(mintermIndexes).compare(ArrayOfEight);
if(match){
alert("All squares have been checked");
}
return false;
});
});
This is HTML,
<div id="body">
<input id="Clear" value="Clear Form" type="submit" />
<a id="Evaluate" href="#" >Evaluate</a>
</div>
I really could use some help, I did share the only code that I think there is a problem. Please share your thoughts on how to fix this issue. Thanks.
p.s : I tried almost every possible selector, but still nothing. There is no respond when i hit the link.
EDIT: Changing the referencing order in the head tag worked, i.e i changed the order of my jquery app and jquery reference order. Thanks for the help anyway.
Works fine:
http://jsfiddle.net/wCRLE/
Try removing the if (jQuery)
Also, have you correctly referenced the jQuery scripts?
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
I always encounter this problem.
My solution is to put the script below the tag I want to manage.
like this:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
</head>
<body>
<input id="Clear" value="Clear Form" type="submit" />
<a id="Evaluate" href="#" >Evaluate</a>
<script type="text/javascript">
$('a').click(function(){
alert("Evaluate Click Works");
var match = $(mintermIndexes).compare(ArrayOfEight);
if(match){
alert("All squares have been checked");
}
});
</script>
</body>
</html>
explanation:
you need to make sure that the "tag" is loaded first
Try this:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('a').click(function(){
alert("Evaluate Click Works");
var match = $(mintermIndexes).compare(ArrayOfEight);
if(match){
alert("All squares have been checked");
}
return false;
});
});
</script>
</head>
<body>
<div id="body">
<input id="Clear" value="Clear Form" type="submit" />
<a id="Evaluate" href="#" >Evaluate</a>
</div>
</body>
</html>
No problem here:
http://jsfiddle.net/5Yttd/
Try getting rid of the if(JQuery)
Also, make sure you are loading JQuery before you load your content scripts. If you don't, nothing will happen.
I am using IE Tester and this code is not working in IE5, IE7 and IE8,
Please give me a solution
<html>
<head>
<title>IE Tester</title>
<script type="text/javascript">
function functions(data){
alert(data);
}
</script>
</head>
<body>
<input type="button" value="btn1" onclick="javascript:functions('<?php echo "add_new";?>');"/>
<input type="button" value="btn2" onclick="javascript:functions('a');"/>
<input type="button" value="btn3" onclick="functions('a');"/>
</body>
</html>
I just tested the following PHP output in IE8 and it works fine. I'd say you may have found a bug in IETester. But, you might want to remove the "javascript:" part just to see if that helps. Edit: This forum might help as well, it looks like the bug has been reported before.
<html>
<head>
<title>IE Tester</title>
<script type="text/javascript">
function functions(data){
alert(data);
}
</script>
</head>
<body>
<input type="button" value="btn1" onclick="javascript:functions('add_new');"/>
<input type="button" value="btn2" onclick="javascript:functions('a');"/>
<input type="button" value="btn3" onclick="functions('a');"/>
</body>
</html
FYI... I used CodePad to generate the PHP output, then tested with jsFiddle
The javascript is correct, so if none of the buttons are working then the likely reason is that you have de-activated javascript in your browser.
Make sure you escape the quotations in the input onclick event using backslash \"
<input type="button" value="btn1" onclick="javascript:functions('<?php echo \"add_new\";?>');"/>