Develop Reference

How to re-disable (disable) the text box on clicking a button or a link?

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)
}

how to click a button using jQuery?

Here is the DOM :
<div class="form-actions">
<button class="btn btn-primary" type="submit">Save device</button>
</div>
I want to use Jquery to select the button and click on it?
I tried using : jQuery(".btn btn-primary").click()
which is not working

You are trying to select an element with both classes, therefore your selector should be .btn.btn-primary.
$('.btn.btn-primary').click();
You were trying to select a element with class .btn-primary that was a descendant of a .btn element.

Your selector is incorrect; because both classes are on the same element you need to separate them by . with no spaces:
jQuery(".btn.btn-primary").click()

You could use the jQuery trigger() method to trigger the behaviour of an existing event handler.
https://api.jquery.com/trigger/
example:
<button id='testButton'>Test</button>
<script>
$(function(){
$('#testButton').on('click' , function(){
alert("I've been clicked!");
});
//now on another event, in this case window resize, you could trigger
//the behaviour of clicking the testButton?
$( window ).resize(function() {
$('#testButton').trigger( "click" );
});
});
</script>

See the following:
https://api.jquery.com/trigger/
Use $(".btn-primary").trigger("click");
Hope that helps

Just incase you did not learn yet, you can always define an Id for the button and use it this way:
<div class="form-actions">
<button id="mybutton" class="btn btn-primary" type="submit">Save device</button>
</div>
$('#mybutton').click(function(){
//your code goes here
});

$( window ).load(function() {
$(".btn-primary").trigger('click');
});

JQuery assign events to buttons

I have 50 dynamically generated HTML buttons as follows:
<input type="button" id="btn1" name="myButton" value="Click Me" />
<input type="button" id="btn2" name="myButton" value="Click Me" />
:
:
:
<input type="button" id="btn50" name="myButton" value="Click Me" />
Which is the best way to assign click event to all buttons using jQuery?
By using id or by using name attribute ?

Event listeners cost memory. You have to think carefully about how you should implement the listeners.
1. The straightforward way:
Do not use this
If the behaviour for each button is the same, use a class:
$(".btn").click(function() {
// Do something
});
If behaviour for each button is different, assign events to different #IDs
$("#btn1").click(function {
// Do something
});
2. Use .on():
jQuery 1.7 introduced .on() method that wraps all listeners to 1 method.
$("button").on("click", function() {
// Do something
});
However, we are still binding many listeners on the page.
3. Use a wrapper (use this!):
Wrap your buttons with a div and create one listener for it.
$("#wrapper").on("click", "button", function() {
// Do something
});
Useful resources:
Performance comparison
.on()

Best way would be to delegate to the surrounding container, that way you only have one listener rather than 50. Use .on()
https://api.jquery.com/on/
If you must assign to each button, figure out a way to write only one selector, like this:
$('button').click(function(){});
Note your selector may need to be more specific to target just these 50 buttons, as #Drewness points out in the comments.

if you have all the buttons inside of a container and you want the same function for all add the click handler to the container
DEMO
$("#container").on("click", function(e){
if(e.target.type =="button")
{
alert(e.target.id);
}
});
<div id="container">
<input type="button" id="test1" value="button1"/>
<input type="button" id="test2" value="button2"/>
<input type="button" id="test3" value="button3"/>
<input type="button" id="test4" value="button4"/>
<input type="button" id="test5" value="button5"/>
<input type="button" id="test6" value="button6"/>
something
<input type="text"/>
</div>

This would be an easy way to wrap it all up into one 'on' event and do something based on the button id;
<button id='button1'>button 1</button>
<button id='button2'>button 2</button>
<button id='button3'>button 3</button>
var mybuttons = $('#button1');
for(i=1;i<3;i++){
mybuttons = mybuttons.add($('#button'+i));
}
console.log(mybuttons);
mybuttons.on('click', function(){
var myid = $(this).attr("id");
console.log(myid);
//use a switch or do whatever you want with the button based on the id;
});
here's a fiddle http://jsfiddle.net/gisheri/CW474/1/

I would apply it to the parent element of the buttons. So if all of the buttons were in <div id="myButtons">:
$('#myButtons').on('click', 'button' function () {
// Do stuff...
});
The key is to be specific enough that you do not have to specify each selector but not too lose as there may be other buttons, etc. on the page that you do not want to include.
Updated code to include delegation.

I think it will be better if you use a common class name for all and handle click event by that class name.
$('.classname').click(function(){
//`enter code here`
});
Or you can handle event by tag name:
$('button').click(function(){
//'enter code here'
});
This method might effect the function of other buttons which are not included in the group of 50 buttons.

Try
$(".btn").click(function() {
// Do something
});

You can use following code:
$("#btn1").on("click",function(){
// Your code
});
$("#btn2").on("click",function(){
// Your code
});
and so on...

Show Interactive Html elements on top of an anchor tag

I have a area surrounded by an anchor tag and it should be directed to anchor tag href wherever user clicks on that area. And also that area should contain a textbox and button control which should allow user to type some text and submit. The problem is when I click on the textbox or button it does a redirect to the page given in anchor tag.
<a href="http://stackoverflow.com/">
<div style="border:1px solid grey;width:300px;height:100px;">
<div style="">Title</div>
<div>
<input type="text" name="name">
<button type="button" onclick="alert('button clicked');">Click Me!</button>
</div>
</div>
</a>
Please refer this jsfiddle.
I have created a simplified problem here.
However I found a solution for this by giving negative margin-top values. It is working but I am interested in a better solution. Because this solution is not scalable since the button and textbox are not inside the content div.
Each of these sections represent a item in a search result. When a user click on a search item it would navigate to single item page. At the same time users should be able to edit content from search results view by selecting edit option. When they select edit, a textbox and a button to submit should appear.

Unfortunately the HTML5 spec says about the <a> element:
Content model:
Transparent, but there must be no interactive content descendant.
What that means is, an <a> element is allowed to contain any elements that its parent is allowed to contain, except for things like <button>.
You'll need to find a way to get your <button> and <input> working outside of the <a>

Use this
<input type="text" name="name" onclick="return false;" />
Use this only if you don't want to change your markup.
The best solution is go with the semantics of HTML and style it. This way is not correct as Gareth pointed out.
In the case of your button
<button type="button" onclick="buttonClick(event);">Click Me!</button>
function buttonClick(e) {
alert('button clicked');
e.preventDefault();
}

Introduce a onclick for textfield and use stoppropagation method for a event. for ex ,
textfield.onclick = function(e) {
e.stopPropagation();
}
Another alternate is to use <div onclick="function()"> instead of <a> tag for what you think to achieve

JQuery / JavaScript - trigger button click from another button click event

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();