I have this HTML which looks like this:
<input type="submit" name="savebutton" class="first button" />
<input type="submit" name="savebutton" class="second button" />
and JS:
jQuery("input.second").click(function(){
// trigger second button ?
return false;
});
So how can I trigger the click event from the 2nd button by clicking on the first one?
Note that I don't have any control over the 2nd button, neither on the html or the click event on it...
Add id's to both inputs, id="first" and id="second"
//trigger second button
$("#second").click()
Well, you just fire the desired click event:
$(".first").click(function(){
$(".second").click();
return false;
});
jQuery("input.first").click(function(){
jQuery("input.second").trigger("click");
return false;
});
You mean this:
jQuery("input.first").click(function(){
jQuery("input.second").trigger('click');
return false;
});
By using JavaScript: document.getElementById("myBtn").click();
this works fine, but file name does not display anymore.
$(document).ready(function(){ $("img.attach2").click(function(){ $("input.attach1").click(); return false; }); });
If it does not work by using the click() method like suggested in the accepted answer, then you can try this:
//trigger second button
$("#second").mousedown();
$("#second").mouseup();
Related
I have a script that enables the disabled text box when clicking on a button. But, I just don't know how to re-disable the text box again.
The coding is below.
HTML:
<div class="input-group">
<label for="some-tbox" class="input-group-addon">Label:</label>
<input id="some-tbox" type="text" class="input-box" value="some value" disabled>
<span class="input-group-btn">
<button class="enable" type="button">button</button>
</span>
</div>
JS:
$(".enable").click(function(){
$(this).parent().parent().children(".input-box").removeAttr("disabled");
$(this).toggleClass("disable");
$(this).toggleClass("enable");
});
$(".disable").click(function(){
$(this).toggleClass("enable");
$(this).toggleClass("disable");
$(this).parent().parent().children(".input-box").attr("disabled", "disabled");
});
And I have made a fiddle out of it. But, It's not working. Here is the link.
Instead of messing with adding and removing classes, just toggle the disabled property with:
$(".enable").click(function() {
$(this).closest('.input-group').find('input').prop('disabled', !$(this).closest('.input-group').find('input').prop('disabled'))
});
jsFiddle example
The problem is this line $(".disable").click(function(){ ...})
You are binding a click event handler to a class named disabled which was not available initially during page load, it appears dynamically later.
You need to delegate the event handler to some parent which always exist and then handle the event there, in this case you can do this:
$(".input-group").on('click', '.disable', function(){
$(this).toggleClass("enable");
$(this).toggleClass("disable");
$(this).parent().parent().children(".input-box").attr("disabled", "disabled");
});
jQuery's on function
You cann't bind an element ".disable" that don't exist , In that case you can rebind it when you changed it's class. Code behind may help you:
$(".enable").on("click",enabledClick)
function enabledClick (argument) {
$(".enable").parent().parent().children(".input-box").removeAttr("disabled");
$(".enable").toggleClass("disable");
$(".enable").toggleClass("enable");
$(".disable").on("click",disabledClick)
}
function disabledClick (argument) {
$(".disable").parent().parent().children(".input-box").attr("disabled", "");
$(".disable").toggleClass("enable");
$(".disable").toggleClass("disable");
$(".enable").on("click",enabledClick)
}
I am very new to jQuery and HTML. I am trying to create a button in html that uses jQuery to make the button to prompt alert message when clicked (rather than using onclick in html). In other words, I would like to use the jquery to call up the click function for the button and then return a pop up message.
I have my input type as "button" and my value as "Check" for my button in html.
Here's my code in javascript
$(document).ready(function(){
$("button").click(function(){
alert("Pop Out");
});
but nothing is showing up
Here's a fiddle to my code
http://jsfiddle.net/0ynbv233/8/
I have my input type as "button"
Like this?
<input type="button" />
In that case, this won't work:
$("button")
That selector is looking for button elements, not input elements. You can change the element:
<button />
or you can change the selector:
$('input[type="button"]')
I did what you have done and it worked for me.
Here is what my code was.
$(function(){
$("button").click(function () {
alert("Pop Out");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button>Click Me</button>
Hope you figure out what you are doing wrong.
Brand new to jQuery.
I was trying to set up an event listener for the following control on my page which when clicked would display an alert:
<input type="button" id="filter" name="filter" value="Filter" />
But it didn't work.
$("#filter").button().click(function(){...});
How do you create an event listener for a input button control with jQuery?
First thing first, button() is a jQuery ui function to create a button widget which has nothing to do with jQuery core, it just styles the button.
So if you want to use the widget add jQuery ui's javascript and CSS files or alternatively remove it, like this:
$("#filter").click(function(){
alert('clicked!');
});
Another thing that might have caused you the problem is if you didn't wait for the input to be rendered and wrote the code before the input. jQuery has the ready function, or it's alias $(func) which execute the callback once the DOM is ready.
Usage:
$(function(){
$("#filter").click(function(){
alert('clicked!');
});
});
So even if the order is this it will work:
$(function(){
$("#filter").click(function(){
alert('clicked!');
});
});
<input type="button" id="filter" name="filter" value="Filter" />
DEMO
$("#filter").click(function(){
//Put your code here
});
More on gdoron's answer, it can also be done this way:
$(window).on("click", "#filter", function() {
alert('clicked!');
});
without the need to place them all into $(function(){...})
I'm doing a simple jQuery form checker for a website. I have two forms on the website: a login form and a signup form. My code is as followed:
$('.btn').click(function(e) {
e.preventDefault();
// DOES SOME ERROR CHECKING HERE
if { hasError $('div.error').fadeIn() }
else { $(this).parents('form').submit() }
});
So my question is, both the login button and the signup button has a class called btn, how can I have the them check and submit their own form instead of checking all the forms on the page since $(this).parents('form') will get both the signup and login form?
Thank you!
no $(this) will get that form whose respective btn u have clicked. "this" keyword pass object of an ellement so don't worry this code will run fine.
There is something really wrong with your html markup if $(this).parents('form') returns more than one element. Also, consider to shorten your code to just
$('.btn').click(function(e) {
// DO SOME ERROR CHECKING HERE
if (hasError) {
e.preventDefault();
$('div.error').fadeIn();
}
});
give them id, and take it like this.
$('#btn1).click(....
$('#btn2).click(....
Change your HTML form structure so that when when you click either button, you are able to select the corresponding form.
<form action="get">
<input type="text" value="1" />
<input type="button" class="btn" />
</form>
<form action="get">
<input type="text" value="1" />
<input type="button" class="btn" />
</form>
And jQuery:
$(function(){
$(".btn").click(function(){
$(this).closest("form").submit();
});
});
EDIT
A better selector for your error handling
$(this).closest('form').find('.required').each(function(){
});
http://jsfiddle.net/c9GXZ/6/
If you want to go ahead with your code then you can go just take look on .parent() and .parents() method of jQuery.
The .parents() and .parent() methods are similar, except that the latter only travels a single level up the DOM tree.
Try, to use $(this).closest('form').submit() instead of $(this).parents('form').submit(). I am not user but I think you have included form inside a form(check or share your HTML as well.)
$('.btn').click(function(e) {
e.preventDefault();
// DOES SOME ERROR CHECKING HERE
if (hasError) { $('div.error').fadeIn(); } //some syntax change
else { $(this).closest('form').submit() } ///will get the nearest form element and stop there and will submit it as per your code...
});
UPDATE
replace this
$('.btn').click(function(e) {
with this
$('.btn').on('click',function(e){
This got it working in your jsfiddle url...
I need to get an .click() event and prevent form from behaving as it was initially designed and make my own changes and submit. How is it possible?
EDIT: Form input actually has an onclick defined behavior. I need to redefine it somehow.
EDIT: Some code
<form action='link' method='get'>
<input type="image" name="name" id="id" class="class" onclick="this.form.action='some_link'" title="Title" value="" src="image.gif">
</form>
If you don't want it to submit the form, return false at the end of your click function. If you want to submit the form, use the form element and call the submit function on it:
$('#myFormID').submit();
$('#form').submit(function(e) {
// Some code
});
I think it's enough.
You could use something like this (haven't tested it but it should work)
form = $("#yourform");
button = $("#yoursubmit");
button.click(function(){
dosomething();
form.submit();
return false;});