Jquery .Click Function is Not Working Properly - javascript

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.

Related

How to click button with id=submit in iframe website

I've got something like this in my index.html
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="jquery-3.2.1.min.js"></script>
<script src="jquery.js"></script>
<iframe id="main" src="https://forexample.com"></iframe>
jQuery.js code is:
$(document).ready(function(){
$('#main').load(function(){
$('submit').click();
});
});
I want automatically click submit button while window page is loading.
Could you help me or give me some tips?
Best regards
Tom
Try something like
$(document).ready(function(){
$('#main').load(function(){
$(this).find('input#Submit').click();
});
});
I've used jQuery find method to get the id=submit
Assumption <input name="Submit" id="Submit" value="Sign in" class="cui-field-submit cui-field-align-right" data-action="" data-confirmation="" type="submit">
Hope this will help you.
Try this:
$(document).ready(function(){
$('#main').load(function(){
var document = $(this).contents(); // To fetch contents within iframe
document.find('#submit').click();
});
});

DOM element doesn't display

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 thought I defined my jQuery function, but I keep getting an "is not defined" error. Why is this?

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.

triggering input file click in IE9

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>

jQuery click function doesnt work

So I have a very simple code with form and one button
with jQuery I want to bind some actions when user clicks on that button, but some reason it's not working
Here is the code
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
</head>
<body>
<script>
$('#jallerysubmit').bind('click', function() {
alert('asd');
})
</script>
<form>
<input type="checkbox" name="box1">box1<br>
<input type="checkbox" name="box1">box2<br>
<input type="button" id="jallerysubmit" value="Proved">
</form>
</body>
</html>
please suggest what's wrong with this code as it does not work, even it does not produce any error
You need to wrap it in a document ready handler.
<script>
$(function() {
$('#jallerysubmit').bind('click', function() {
alert('asd');
});
});
</script>
Docs: http://api.jquery.com/ready/
The JavaScript code will be executed before the DOM is loaded, so the element with ID jallerysubmit cannot be found (it does not exists yet).
#sje397 described a very common way (at least when using jQuery) how to solve this. Another way is to put the script at the end of the document:
<html>
<head>
<script src="jquery.js"></script>
</head>
<body>
<form>
<input type="checkbox" name="box1">box1<br>
<input type="checkbox" name="box1">box2<br>
<input type="button" id="jallerysubmit" value="Proved">
</form>
<script>
$('#jallerysubmit').bind('click', function() {
alert('asd');
});
</script>
</body>
</html>
Your code attaching the handler is being executed before the element exists in the DOM, therefore the selector returns nothing and the handler is not applied. Put the code inside a document ready handler and it should work. You could also simplify by using the click shortcut.
<script>
$(function() {
$('#jallerysubmit').click(function() {
alert('asd');
});
});
</script>
Include an alert("hello"); right after to make sure the jQuery is working right. Then add a return false to the end of your submit handle to make sure your page doesnt reload when the button is clicked, also use document.ready. See code below
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
alert("hello");
$('#jallerysubmit').bind('click', function() {
alert('asd');
return false;
});
});
</script>
<form>
<input type="checkbox" name="box1">box1<br>
<input type="checkbox" name="box1">box2<br>
<input type="button" id="jallerysubmit" value="Proved">
</form>
</body>
</html>
Best practice is using an external .js file, example script.js:
$(document).ready(function() {
yourFunction();
});
function yourFunction() {
$('#jallerysubmit').click(function() {
alert('asd');
});
}
and import it in your html file in the tag head:
<script type="text/javascript" src="script.js"></script>
Always use jquery function within
(document).ready(function(){//ur jquery codes});
or
$().ready(function(){//ur jquery codes});
or
$.noConflict();
jQuery(document).ready(function($){//ur codes});
Once DOM of page is loaded above ready function is initiated. so i recommend jquery lovers to write their magic codes always within this code

Categories

Resources