Jquery Event Bubbling CheckBox - javascript

I have a form with checkboxes and then text to the right of the checkbox. There are jquery events attached to the click events of the the checkbox. What I want is to allow the user to click on the label or the checkbox and have the checkbox check/uncheck and the event to fire. Below is a simplified version of what I'm trying to do (DON'T run the code as below as it creates an endless loop).
<script>
$(document).ready(function() {
$("form p").click(function() {
$(this).find("input").click();
});
$("form input").click(function() {
alert("clicked");
});
});
</script>
<form>
<p> <input type="checkbox" name="checker" value="1" /> Click anywhere</p>
<p> <input type="checkbox" name="checker2" value="2" /> Click anywhere</p>
</form>

Use the LABEL tag: http://www.w3schools.com/tags/tag_label.asp

clicking on any <input> tag triggers the click event of <p> tag (because <input> tag is inside the <p> tag) which then triggers the click event of <input> tag leading to an endless loop.

You can prevent the 'endless loop' using jQuery's event.stopPropagation method.

Related

Click event triggering two times

I am trying to run some function when clicking on the label text but the click event fired two times.
HTML
<label class="label_one">
Label One
<input type="checkbox"/>
</label>
But its not happening if I change the html code like this.
<label for="test" class="label_two">
Label Two
<input type="checkbox"/>
</label>
My script is this:
$('.label_one').click(function(){
console.log('testing');
});
Can anyone explain me why this is happening like this.
My jsfiddle is here check it ones.
https://jsfiddle.net/sureshpattu/hvv6ucu8/3/
It is because of event bubbling.
In general all elements bubble the event to the root of the document whereas the label tag will bubble the event to its child nodes and thats how the input tag is getting ticked when you click the label dom.
So in your case you attached the event handler to label tag so
It calls when label tag gets clicked
event bubbles inside it and checkbox gets selected and checkbox bubbles the event to its parent node that is label tag again hence it is called twice.
To solve this, just attach the event handler to input/checkbox tag it should work fine.
I couldn't reproduce this in the version of chrome that I'm using.
But if you're facing this in some browser, it's likely because -
According to spec, labels containing inputs, and the ones connected to an input via for attribute trigger a click on the associated input when they are clicked.
So in your first case, there are 2 click events:
Actual click on <label>
Click triggered on <input> by the label
The one triggered on <input> will bubble up to <label> and trigger your handler.
In the second case, Since a for attribute is specified and there is no matching input with id of 'test', the additional click is not triggered even if the input is inside the label.
Click on checkbox do click on label. Try use .change event on input
$('.label_one input').change(function(){
var html = '<div class="log_sec_one">Log</div>';
$('.logs').append(html);
});
$('.label_two input').change(function(){
var html = '<div class="log_sec_two">Log</div>';
$('.logs').append(html);
});
DEMO
Move your input outside of your label, and use the for="" attribute.
<label class="label_one" for="checkbox_one">
Label One
</label>
<input type="checkbox" id="checkbox_one" />
<br/><br/>
<label for="checkbox_two" class="label_two">
Label Two
</label>
<input type="checkbox" id="checkbox_two"/>
<div class="logs"></div>
JSFiddle: https://jsfiddle.net/hvv6ucu8/2/
<label for="text" class="label_one">
Label One
<input type="checkbox"/>
</label>
<br/><br/>
<label for="text" class="label_two">
Label Two
<input type="checkbox" name="1"/>
</label>
you forgot to put for attribute in label (label_one). just change that. it will work

how to select the button after adding by using html()?

I add some button by using html(), and I want to write a click funtion for them. however, it does not work. and I don't know what is wrong with it.
the html code after using html():
<input type="button" id="save_1" value="a1" />
<input type="button" id="save_2" value="a2" />
<input type="button" id="save_3" value="a3" />
and my selector is:
$('input[id^=save_]').click(function() {...});
$('input').on('click', 'id^=save_', function() {...});
they all don't work.
could you help me? thank you.
start from document, input also isn't there when dom is created:
$(document).on('click', 'input[id^=save_]', function(){
alert('hi');
});
jsfiddle LINK
You have to bind the click event after your .html() function else it won't work.
Because if you bind click event before .html() function it did not get any of the input element (created dynamically) on which you want to bind the click event
Try below snippet: :-)
$(document).ready(function(){
$('input[id^=save_]').on('click',function() {
alert("Event Fired");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="button" id="save_1" value="a1" />
<input type="button" id="save_2" value="a2" />
<input type="button" id="save_3" value="a3" />
If you want to perform some operation on click event of all button then add one common class for e.g: class="btn" in all input type button on which you want to perform click event, then use following JS code::
$(".btn").on("click",function(){
$(this).attr("id");
// your operation
});
$(this) will be the button which you have clicked. Make sure this code is written inside document ready function.

Reload div at checkbox click

Is it possible for me to reload a div when a checkbox in the same document is clicked?
<html:checkbox property="checkbox" styleId="checkbox">
<div id="divToBeRefreshed">
//content
</div>
I'd rather do it using pure javascript but ajax is ok too if there isn't another solution.
Well the answer by #karthick is for change event it will reload the content if the checkbox is unchecked also you can use the below code
$('#checkbox').change(function(){
if($(this).is(':checked')){
// Checkbox is checked.
$("#divToBeRefreshed").html('your content');
}else{
// Checkbox is not checked.
}
});
make your id of checkbox is set to
id='checkbox'
Hope this help you
try this
$("#checkbox").on('change',function(){
$("#divToBeRefreshed").html('your content');
});
The change event is sent to an element when its value changes. This event is limited to <input> elements, <textarea> boxes and <select> elements. For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse.Hope this is what u meant mate
HTML
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
<div id="divToBeRefreshed">
</div>
JS
$("input[name=vehicle]").on('change',function(){
$("#divToBeRefreshed").html($(this).val());
});
if you want to fire an event when a checkbox is checked / unchecked: use the below code too.
if( $(this).is(':checked') )
Fiddle
http://jsfiddle.net/BzgrW/

Auto-highlight an input field on focus

I was wondering if there was a way for text inside a input box (pre loaded using value="") to highlight when the user clicks on it?
input type='text' name='url' id='url' value='http://www.a-link.com/' />
EDIT
I need the text to he highlighted so the user can copy it.
<input type="text" name="textbox" value="Test" onclick="this.select()" />
You could attach javascript to the click event to select the text like so:
$(document).ready( function() {
$('#id').click( function( event_details ) {
$(this).select();
});
});
There is a potential issue where the user could be trying to click at a later point in the text to correct a typing mistake and end up selecting the whole thing. A better way would be to trigger this when the input gets focus from the user. you'd replace .click with .focus in the example above.
jQuery event documentation:
http://api.jquery.com/category/events/
Add the following onclick attribute to make the entire <input> automatically highlight when the user clicks on it:
<input type="text" value="Test1" onclick="this.select()" />
Alternatively, if you want the user to be able to change the selection after the initial click, change the onclick attribute to an onfocus attribute. This will also highlight the entire <input> when the user clicks on it, but it allows them to change the highlighted part manually afterwards:
<input type="text" value="Test2" onfocus="this.select()" />
Here is an example of both inputs in action.
You want to use focus property. Like this: http://jsfiddle.net/sCuNs/
html
<p><input type="text" size="40"></p>
css
input:focus, textarea:focus{
background-color: green;
}
Do you mean to select the text?
Use onclick event to fire the code:
document.getElementById("target-input-id").select();
$('#foo').on('mouseup', function(e){
e.preventDefault();
$(this).select();
});
$('#foo').on('mouseup', function(e){
e.preventDefault();
$(this).select();
});
This should do it:
<input type='text' name='url' id='url' onclick="this.select()" value='http://www.a-link.com/' />
<input id="inputField" type="text" size="40" value="text to be highlighted"></p>
document.getElementById('inputField').focus();
The default behavior for focus selects the text in the input field. I was looking for a solution not to do that when I found this.

HTML checkbox onclick called in Javascript

I am having a bit of trouble trying to figure out how to get a certain part of my code to work.
<input type="checkbox" id="check_all_1" name="check_all_1" title="Select All" onclick="selectAll(document.wizard_form, this);">
<label for="check_all_1" onclick="toggleCheckbox('check_all_1'); return false;">Select All</label>
This is my HTML which works as it should (clicking the text will click the box). The javascript for it is pretty simple:
function toggleCheckbox(id) {
document.getElementById(id).checked = !document.getElementById(id).checked;
}
However I want the onclick to happen for the input when the label is what makes the checkbox to be clicked. At this current time the onClick js does not go. What is one suggestion on how to do this?
I tried to add the onclick of the input to the onclick of the label but that doesn't work.
Any suggestions/solutions would be wonderful.
How about putting the checkbox into the label, making the label automatically "click sensitive" for the check box, and giving the checkbox a onchange event?
<label ..... ><input type="checkbox" onchange="toggleCheckbox(this)" .....>
function toggleCheckbox(element)
{
element.checked = !element.checked;
}
This will additionally catch users using a keyboard to toggle the check box, something onclick would not.
Label without an onclick will behave as you would expect. It changes the input. What you relly want is to execute selectAll() when you click on a label, right?
Then only add select all to the label onclick. Or wrap the input into the the label and assign onclick only for the label
<label for="check_all_1" onclick="selectAll(document.wizard_form, this);">
<input type="checkbox" id="check_all_1" name="check_all_1" title="Select All">
Select All
</label>
You can also extract the event code from the HTML, like this :
<input type="checkbox" id="check_all_1" name="check_all_1" title="Select All" />
<label for="check_all_1">Select All</label>
<script>
function selectAll(frmElement, chkElement) {
// ...
}
document.getElementById("check_all_1").onclick = function() {
selectAll(document.wizard_form, this);
}
</script>
jQuery has a function that can do this:
include the following script in your head:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
(or just download the jQuery.js file online and include it locally)
use this script to toggle the check box when the input is clicked:
var toggle = false;
$("#INPUTNAMEHERE").click(function() {
$("input[type=checkbox]").attr("checked",!toggle);
toggle = !toggle;
});
That should do what you want if I understood what you were trying to do.

Categories

Resources