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.
Related
HTML
<div id="test"></div>
<input type="button" value="Go" onclick="test()" />
JavaScript
function test() {
alert("Test!");
}
Fiddle
http://jsfiddle.net/MVBrS/11/
Please look at this one, it is about jsfiddle code frames separation:
Inline event handler not working in JSFiddle
Of course, if you were running the same code embedded on plain HTML it works normally, having the alerted popup appearing.
<!DOCTYPE html>
<html>
<head>
<script>
function test() {
alert("Test!");
}
</script>
</head>
<body>
<div id="test"></div>
<input type="button" value="Go" onclick="test()" />
</body>
</html>
when you do
onclick="test()"
as an attribute of the input element, you are setting the result of the call test() (in your case 'null') as the click event handler
you probably want to do this
onclick="test"
instead, which will set the actual 'test' function as the handler,
or even better, follow the following guidelines: unbtrusive javascript or unobtrusive JS (2),.. you get the point ;)
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 am simply trying to show a message box on screen.
This is the HTML for the button that invokes the message box---
<button onclick="myFunction()">Try it</button>
This is the relevant javascript function code--
function myFunction()
{
alert("Hello World!");
}
The javascript function is stored at js/fetchdetails.js (path relative to the HTML file).
I have included the JS file in the HTML file using the following code in the head section--
<script src="js/fetchdetails.js"></script>
What am I doing wrong here?
There's nothing wrong in the code you've posted; the error is somewhere else.
Either your fetchdetails.js is not being loaded, or some error in javascript not shown here causes your script to stop executing.
Use your browser's inspection tool to look for any error messages, and to verify that the file has loaded correctly (there's usually a "Net" tab for that).
Try this..
<!DOCTYPE html>
<html>
<head>
<title>Page Name</title>
<script type="text/javascript" src="js/fetchdetails.js"> </script>
</head>
<body>
<button onclick="myFunction();">Try it</button>
</body>
</html>
In your javascript file
function myFunction(){alert("Hello World!");}
This works perfect for me
If it doesnt work please provide more details or else try these buttons:
<button onclick="javascript:myFunction();">Try it</button>
<input type="button" onclick="myFunction();" value="Try me"/>
<input type="button" onclick="javascript:myFunction();" value="Try Me"/>
Hope this helps
The following code should pop up an alert box whenever I select a file or make a change to the textbox and click out of it.
I believe the code SHOULD work, but it doesn't. Isolating the code snippets on JSFiddle and running them even works.
Is anything wrong with my code? If not, could something on my computer be preventing this code from working?
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
document.getElementById("file").onchange(function() {
alert($(this).val());
});
$('#text').change(function() {
alert($(this).val());
});
});
</script>
</head>
<body>
<input id="file" type="file" name="file" />
<input id="text" type="text" name="text" />
</body>
</html>
Try wrapping your function in
$(document).ready(function() {
});
jsfiddle does this for you (I think)
Alternatively use:
$(window).ready(function() {
});
if you want to ensure that the entire page has loaded before trying to run your code.
Further reading:
http://docs.jquery.com/Tutorials:Introducing_$(document).ready()
It appears that oncopy and onpaste do not work with iOS devices that support copy and paste now. Is there another means to bind to these events in javascript?
You didn't attached any code with your question, so I can't tell what was the actual issue.
Probably the issue is with your code.
I used the following html code and it is working perfectly. Please check with this:
<html>
<head>
<script type="text/javascript">
function read()
{
var name = document.getElementById('p').value;
alert('Hi: '+name);
}
function copy()
{
alert('Copy');
}
function paste()
{
alert('Paste');
}
</script>
</head>
<body oncopy='copy();' onpaste='paste();'>
<form>
<input type="text" name='m' id='p'/>
<input type="button" value="Submit" onclick='read();'/>
</form>
</body>
</html>