why blur event in the below code is not working and the alert box pop-ups as soon as the document is ready and not wait for blur event. give me suggestion to fix it... Thanks...
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("[type=text]").blur(cc("[type=text]"));
$("[type=email]").blur(cc("[type=email]"));
function cc(s){
alert("Value: " + $(s).val());
}
});
</script>
</head>
<body>
<input type="text" id="test" value="rev"><br>
<input type="email" id="test" value="mail#example.org">
</body>
</html>
blur() function take function as a parameter. In your code you pas result of cc function execution.
You should use anonymous functions:
$(document).ready(function(){
$("[type=text]").blur(function() { cc("[type=text]"); });
$("[type=email]").blur(function() { cc("[type=email]"); });
function cc(s){
alert("Value: " + $(s).val());
}
});
Related
I tried some methods in old questions but it is not working in chrome.
Can please any one suggest me the solution.i'm using php for validation.
if i click submit button twice it through an error so restrict the issue i disable the submit button but it not working in chrome.
<script>
jQuery(document).ready(function () {
jQuery('#submit_button').click(function () {
jQuery('#submit_button').attr('disabled','disabled');
});
});
</script>
You could use prop jquery method, or just set the disabled attribute to true.
$(document).ready(function(){
$('#submit').on('click', function(e){
//$(this).prop('disabled', true);
this.disabled = true;
})
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<button id="submit">submit</button>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</body>
</html>
It could be that there are multiple submit buttons on the page. You can try using this code.
jQuery(document).ready(function () {
jQuery('#submit_button').click(function () {
// It is best practice to use `true` instead of
// any true-y kind of value like non-empty string.
jQuery(this).attr('disabled', true);
});
});
There are different ideas were given but the code seems working properly. Please make sure you imported the jQuery library.
The following code is the tested code.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function () {
jQuery('#button').click(function () {
jQuery('#button').attr('disabled','disabled');
});
});
</script>
</head>
<body>
<input type="submit" id="button" value="If you click on me, I will be disabled."/>
</body>
</html>
Try, using the prop of element and making the attribute true, using
jQuery('selector').prop('disabled',true);
<script>
jQuery(document).ready(function () {
jQuery('#submit_button').click(function () {
jQuery('#submit_button').prop('disabled',true);
});
});
</script>
how i would add disabled:
<script>
$(document).ready(function(){
$('button').click(function () {
$('<input type="button id="submit_button" disabled>').insertBefore(this);
$(this).remove();
});
});
</script>
how i would change the button back to normal:
<script>
$(document).ready(function(){
$('button').click(function () {
$('<input type="button id="submit_button" >').insertBefore(this);
$(this).remove();
});
});
</script>
you can use $('selector').prop('disabled',true);
I have the following code
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<span class='click2' onclick="ClickBack();">Click me </span>
</body>
<script>
$(".click2").click(function (event) {
if(confirm("Sure to continue"))
event.stopImediatePropagation();
});
function ClickBack() {
alert('yes I am click1');
}
</script>
</html>
My requirement is to call ClickBack() only when its being confirmed by , and i cannot make any change in ClickBack function , Its ony one case,
main thing is
I have to add this click2 to a number of elements, and it will basically call the inline events only after confirmation by click2
$(".click2").click(function (event)
I am getting two issue,
ClickBack is being fired firstly,
TypeError: event.stopImediatePropagation is not a function it was type mistake thanks to #manwal its solved
How can I achieve my goal.
I cannot make any change in ClickBack() function
Please advise
Thanks
You have typo issue, use this line there should be double m:
event.stopImmediatePropagation()
instead of
event.stopImediatePropagation()
^
for this ClickBack is being fired firstly, problem the solution is remove onclick="ClickBack();" from
<span class='click2' onclick="ClickBack();">Click me </span>
First of all if you bind inline onclick function it will be trigerred first.
So instead of adding it inline do it in your script like this:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<span class='click2'>Click me </span>FD
<script>
$(".click2").click(function (event) {
if (confirm("Sure to call ClickBack"))
{
ClickBack();
}
});
function ClickBack() {
alert('yes I am click1');
}
</script>
</body>
</html>
Remove onclick event handler from span
<span class='click2'>Click me </span>
and call the ClickBack function in on click event handler for .click2 class as follows,
<script>
$(".click2").click(function (event) {
if(confirm("Sure to call ClickBack"))
ClickBack();
});
function ClickBack() {
alert('yes I am click1');
}
</script>
Try this
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<span class='click2'>Click me </span>FD
<script>
$(".click2").click(function (event) {
if (confirm("Sure to call ClickBack"))
{
ClickBack();
}
});
function ClickBack() {
alert('yes I am click1');
}
</script>
</body>
</html>
When I click a button "click Me" on my page. I want to know that the button is clicked and an alert should pop up saying hi.Here is my code which is not working.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$(this).data('clicked', true);
});
if($('#btn').data('clicked')) {
alert("HI");
}
});
</script>
</head>
<body>
<input id="btn" value="Click Me" type="button"></input>
</body>
</html>
Move the alert to inside the handler:
$("#btn").click(function(){
$(this).data('clicked', true);
if($(this).data('clicked')) {
alert("HI");
}
});
That if statement doesn't automatically run (well it does on page load since it's in your DOM ready event) - it has to be within an event.
You could drop the if statement at all.
It's key to put your alert() call in the click Callback function.
$(document).ready(function(){
$("#btn").click(function(){
alert("HI");
});
});
Consider the HTML :
<html>
<head>
Something...
</head>
<body>
<script>
$('#btnviewdetails').text('Save').button("refresh");
</script>
<button id='btnviewdetails' type='button'>SET</button>
</body>
</html>
When I hit the button , the JS code is not invoked . What am I doing wrong ?
Thanks
You need to bind an event handler on the button. The function will be invoked when the button is pressed.
$('#btnviewdetails').bind('click', function() {
$(this).text('Save');
});
Complete code :
<html>
<head>
<script src="jquery-2.1.0.min.js"></script>
Something...
</head>
<body>
<button id='btnviewdetails' type='button'>SET</button>
<script>
$('#btnviewdetails').bind('click', function() {
$(this).text('Save');
});
</script>
</body>
</html>
hello I try to grab the submit event, and then I try to pop an alert that says "werks" so I know it works. Note that I have double-checked that the jquery.js file is present in the same folder, and it is the newest jquery.min.js from the jquery website.
When I submit the form, it automatically goes into "get" mode and displays this URL in the URL bar in my browser: "http://localhost/test.html?input=" instead of showing me the alert.
I think jquery is trolling me. Full code below:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$('#form').submit(function(event){
event.preventDefault();
alert('werks');
});</script>
</head>
<body>
<form id="form">
<input type="text" name="input">
<input type="submit" value="Send">
</form>
</body>
</html>
Try the following code:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<form id="form">
<input type="text" name="input">
<input type="submit" value="Send">
</form>
</body>
<script type="text/javascript">
$( document ).ready(function() {
$('#form').submit(function(event){
event.preventDefault();
alert('werks');
});
});
</script>
</html>
$('#form') selector returns nothing, since the markup form isn't loaded yet. Move script block after form, or wrap it in $(document).ready(function () { ... }).
You need to put it in a document ready statement:
$( document ).ready(function(){
//Code Here
});
<script type="text/javascript">
$(function(){
$('#form').submit(function(event){
event.preventDefault();
alert('werks');
});
</script>
fire your js code on document ready like this:
$(function() {
$('#form').submit(function(event){
event.preventDefault();
alert('werks');
});
});