jQuery On click wont fire - javascript

I have a textbox, a checkbox and a span tag. When I click on the checkbox, it should show its state in the span tag. When textbox is updated, it reinserts the checkbox block. When you click on the checkbox now, it fails to update the state.
I am using the on event handler for checkbox click event, so I expect it to work.
Any idea why this is not working as expected?
$('div[role] input[type=checkbox]').on('click', chg);
$('div[role] input[type=text]').on('input', sourceChanged);
function chg() {
var istiki = $(this).is(":checked");
$('#upd').html(istiki);
}
function sourceChanged() {
$('span', $(this).closest('.input-group')).html('<input type="checkbox">');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div role="Tiki" class="input-group">
<input type="text" class="form-control" />
<span class="input-group-addon"><input type="checkbox" /></span>
</div>
<span id="upd"></span>

As you're dynamically creating a new checkbox when the value changes, you need to delegate the event to your checkbox by assigning it to a non-dynamic ancestor:
$('div[role]').on('change', 'input[type=checkbox]', chg);
Note how I've used change instead of click as this is more appropriate for checkboxes.
In the below snippet I've also changed $(this).is(":checked") to just this.checked.
$('div[role]').on('change', 'input[type=checkbox]', chg);
$('div[role] input[type=text]').on('input', sourceChanged);
function chg() {
var istiki = this.checked;
$('#upd').html(istiki);
}
function sourceChanged() {
$('span', $(this).closest('.input-group')).html('<input type="checkbox">');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div role="Tiki" class="input-group">
<input type="text" class="form-control" />
<span class="input-group-addon"><input type="checkbox" /></span>
</div>
<span id="upd"></span>
Note also that if you want it to say false you should convert your istiki variable to a string:
$('#upd').html('' + isticki);

Related

Enable or disable target element based on checkbox checked state

i'm basically JavaScript newbie and I'm trying to resolve this problem of mine for quite a while. So,i'm doing JS school project and I need to make connection between checkbox and text form. If checkbox is not checked, text form should be disabled and vice versa. This is piece of code I have written:
function cbtf() {
if (document.getElementById('checkbox').checked==false) {
document.getElementById('textform').disabled=true;
}
}
Can anyone write a new code ? That would be much of a help.
Simply attach a method to checkbox's onclick handler:
function enableElement(id, enable) {
document.getElementById(id).disabled=!enable;
}
<label>
<input
type="checkbox"
onclick="enableElement('textform', this.checked)"
/>
ENABLE
</label>
<br/>
<textarea id="textform" style="width:100%; height:200px" disabled>
THIS IS TEXTAREA WITH ID "textform"
</textarea>
or another simplification without creating special one-liner method - just define Your will directy in onclick event:
<label>
<input
type="checkbox"
onclick="document.getElementById('textform').disabled = !this.checked"
/>
ENABLE
</label>
<br/>
<textarea id="textform" style="width:100%; height:200px" disabled>
THIS IS TEXTAREA WITH ID "textform"
</textarea>
You can add a click event to the checkbox, and assign it's check state to the disabled property of the TextBox.
document.querySelector('input[type=checkbox]').onclick = function(e) {
document.querySelector('input[type=text]').disabled = e.target.checked;
};
<input type="checkbox" name="">
<input type="text" name="">
You won't get that to work unless you attach an event to the checkbox, so I would suggest something like this:
var textbox = document.getElementById('textform');
var checkbox = document.getElementById('checkbox');
checkbox.addEventListener("change", function() {
if (checkbox.checked) {
textbox.disabled = false;
} else {
textbox.disabled = true;
}
})

event is only triggered when fired twice

I don't know why but the first time I click the event target, it doesn't take effect, you have to click the event target twice to take effect but the result is opposite. Consider this experiment that I created using checkbox:
$('.label-button').on('click', checkboxStatus);
function checkboxStatus(e) {
var $evt = $(e.target);
if($evt.next().is(':checked')) {
$('.message').find('.status').text('checked');
} else {
$('.message').find('.status').text('not checked');
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="cbox" class="label-button" style="display:inline-block;padding:0.5rem 0.7rem;color:#fff;background:#21a1e1;cursor:pointer;">Click to check</label>
<input type="checkbox" id="cbox" />
<div class="message" style="display:block; margin-top:10px;">Checkbox is "<span class="status">not checked</span>"</div>
The first time you click the button, the .status says it's still "not checked" though the checkbox is actually checked. The second time you click the button, it shows the changes, but opposite. The checkbox is checked but the status is "not checked"; the checkbox is unchecked but the status is "checked". I tried to add e.stopPropagation() but it didn't work.
How can I make this right?
By the time click event on label is invoked, input state is not changed hence you are observing such inconsistency.
Bind change event on the input element instead of click event on the label!
$('#cbox').on('change', checkboxStatus);
function checkboxStatus() {
$('.message').find('.status').text(this.checked ? 'checked' : 'not checked');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="cbox" class="label-button" style="display:inline-block;padding:0.5rem 0.7rem;color:#fff;background:#21a1e1;cursor:pointer;">Click to check</label>
<input type="checkbox" id="cbox" />
<div class="message" style="display:block; margin-top:10px;">Checkbox is "<span class="status">not checked</span>"</div>
Change the event with change instead of click.
And apply the change event on input:checkbox not with label
finally change the checking if condition like this $evt.is(':checked')
$('#cbox').on('change', checkboxStatus);
function checkboxStatus(e) {
var $evt = $(e.target);
if($evt.is(':checked')) {
$('.message').find('.status').text('checked');
} else {
$('.message').find('.status').text('not checked');
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="cbox" class="label-button" style="display:inline-block;padding:0.5rem 0.7rem;color:#fff;background:#21a1e1;cursor:pointer;">Click to check</label>
<input type="checkbox" id="cbox" />
<div class="message" style="display:block; margin-top:10px;">Checkbox is "<span class="status">not checked</span>"</div>
$(function(){
$('.label-button').on('click', checkboxStatus);
function checkboxStatus(e) {
var $evt = $(e.target).next();
if( $evt.prop('checked') ) {
$('.message').find('.status').text('not checked');
} else {
$('.message').find('.status').text('checked');
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="cbox" class="label-button" style="display:inline-block;padding:0.5rem 0.7rem;color:#fff;background:#21a1e1;cursor:pointer;">Click to check</label>
<input type="checkbox" id="cbox" />
<div class="message" style="display:block; margin-top:10px;">Checkbox is "<span class="status">not checked</span>"</div>

Run function after a checkbox change on my page

I have dynamically created check boxes on my page and assigned each of them an unique id like 'renameteam1', 'renameteam2' etc.. I am trying to run a function when one of these gets checked. The function will then allow the user to enter a corresponding field that was previously readonly.
I have tried the following but it doesn't seem to be working.
var a=0;
$('input[type=checkbox]').change(function () {
for (var i=0;i<rows3;i++){
a=a+1;
var id= '#renameteam'+a;
if ($(id).is(":checked")) {
$('#newname'+a).removeProp('readonly');
}
}
//Here do the stuff you want to do when 'unchecked'
});
Any Suggestions?
This is how I would do it
//delegate the event so you can call this on document ready and it will still be bound to any dynamically created elements
$(document).on('change', 'input[type=checkbox]', function() {
var checkbox = $(this),
otherInput = $('#' + checkbox.data('id'));
otherInput.prop('readonly', !checkbox.is(':checked'));
if (!checkbox.is(':checked')) {
// do stuff here when checkbox isn't checked - not sure if you still want this bit but it is as per your comments in the code above
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="checkbox" value="" id="renameteam1" data-id="newname1" />
<!-- use a data attribute to target the id of the input you want to make readonly -->
<input type="textbox" name="textbox" value="" id="newname1" readonly />
If you don't want to use a data attribute, you could do this:
//delegate the event so you can call this on document ready and it will still be bound to any dynamically created elements
$(document).on('change', 'input[type=checkbox]', function() {
var checkbox = $(this),
otherInput = $('#newname' + this.id.replace('renameteam', ''));
otherInput.prop('readonly', !checkbox.is(':checked'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="checkbox" value="" id="renameteam1" />
<!-- use a data attribute to target the id of the input you want to make readonly -->
<input type="textbox" name="textbox" value="" id="newname1" readonly />
Try using an on click instead of on change for checkboxes and radio buttons.

JQuery: how to check if checkbox is checked and add attributes to field

I'm trying to check whether a check box is checked, and if it is checked, then I want to add the "required" attribute to an adjacent text field. I've tried it two different ways with no success. Here are the form elements and my two JQuery attempts.
neither of those will actually trigger the event. My browser either does nothing at all or triggers an "Empty string passed to getElementById()." event
Form elements:
<div class="col-sm-5">
<label id="checkboxNumber-label" class="toplabel" for="checkboxNumber">Checkbox</label>
<g:textField name="checkboxNumber" value="${...checkboxNumber}" class="form-control" required="" aria-labelledby="checkboxNumber-label"/>
<label class="checkbox-inline">
<g:checkBox name="checkboxYesNo" id="checkboxYesNo" value="${...checkboxYesNo}" onclick="chkboxYesChecked()"/>
</label>
</div>
<div class="col-sm-5">
<label id="someTextField-label" class="toplabel" for="someTextField">Some Text Field Here</label>
<g:textField name="someTextField" id="someTextField" value="${...someTextField}" class="form-control" aria-labelledby="someTextField-label"/>
</div>
JQuery:
function chkboxYesChecked(){
if($('#checkboxYesNo').prop('checked')){
$('#someTextField').prop('required',true);
$('#someTextField').append('<span class="required-indicator">*</span>');
}else{
$('#someTextField').removeAttr('required');
}
}
$(document).ready(function() {
$('#checkboxYesNo').click(function() {
if($(this).is(":checked"))
{
$('#someTextField').prop('required',true);
$('#someTextField').append('<span class="required-indicator">*</span>');
} else {
$('#someTextField').removeAttr('required');
}
});
});
With your markup this becomes more convoluted than it needs to be.
$(document).on("click", ".checkbox-inline :checkbox", function () {
var $nextTextbox = $(this).closest("div").next("div").find(":text").first();
if (this.checked) {
$nextTextbox.prop("required", true).after('<span class="required-indicator">*</span>');
} else {
$nextTextbox.prop("required", false).next('.required-indicator').remove();
}
});
Notes
This approach uses event delegation.
There are no IDs involved, because I suppose you need the same thing more than once on your page. Tying it to a specific element ID is counter-productive.
This approach relies on the specific document structure from your sample Grails template. If you want something more flexible and easier-to-read, change your HTML.
This applies to all checkboxes that have a text field in the immediately following <div>. Use CSS classes on your elements to filter it/make it apply to specific ones only.
If there is no immediately following <div> with a text box, the function does nothing.
$(this).is(":checked") is superfluous. You don't need jQuery to find out if the current DOM element is checked. this.checked is a lot simpler and has the same effect.
Don't use inline event handlers (onclick="..."). Ever.
See it in action:
$(document).on("click", ".checkbox-inline :checkbox", function () {
var $nextTextbox = $(this).closest("div").next("div").find(":text").first();
if (this.checked) {
$nextTextbox.prop("required", true).after('<span class="required-indicator">*</span>');
} else {
$nextTextbox.prop("required", false).next('.required-indicator').remove();
}
});
input[required] {
background-color: #FFD1D1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-5">
<label id="checkboxNumber-label" class="toplabel" for="checkboxNumber">Checkbox</label>
<input type="text" name="checkboxNumber" value="${...checkboxNumber}" class="form-control" required="" aria-labelledby="checkboxNumber-label" />
<label class="checkbox-inline">
<input type="checkbox" name="checkboxYesNo" id="checkboxYesNo" value="${...checkboxYesNo}" />
</label>
</div>
<div class="col-sm-5">
<label id="someTextField-label" class="toplabel" for="someTextField">Some Text Field Here</label>
<input type="text" name="someTextField" id="someTextField" value="${...someTextField}" class="form-control" aria-labelledby="someTextField-label" />
</div>

Jquery get value of text box next to a radio button

I am creating a form with multiple radio buttons and text boxes.
Each Text box is next to radio button like below:
<div class="form-group">
<div class="radio">
<label>
<input type="radio" name="correct_answer_id">
Correct
</label>
</div>
<label for="answer" class="col-sm-2 control-label">Answer 2</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="answer[]" placeholder="Answer" required>
</div>
</div>
There are several radio button and text box pair like above in the form.
On click of the radio button, i want to get whatever has been written in the corresponding text box
i am trying to use Jquery's next() function like below:
$('input[type="radio"]').click(function(){
if ($(this).is(':checked'))
{
console.log($(this).next('input[type="text"]').val());
}
});
But my log shows undefined. What i am doing wrong?
Try this : find parent div of radio and do next().next() to get input box div and then find input box to get value.
NOTE - You need not to check if ($(this).is(':checked')) as when you click on radio button it will get checked always.
$('input[type="radio"]').click(function(){
var value = $(this).closest('.radio').next().next('.col-sm-10').find('input[type=text]').val();
console.log(value );
});
use below code using parents(); see working fiddle
$('input[type="radio"]').click(function(){
if ($(this).is(':checked'))
{
console.log($(this).parents('div.radio').next().next('div.col-sm-10').find('input[type="text"]').val());
}
});
You should put the value that you want submitted in the value attribute of your input elements.
e.g. <input type="radio" name="correct_answer_id" value="correct">
Your click handler would change to:
$('input[type="radio"]').click(function(){
if ($(this).is(':checked'))
{
console.log($(this).val());
}
});
If there's some value that you don't want to place in the value attribute then it's still best to have a reference to the value in the input element instead of relying on a particular document layout.
Try this
$('input[type="radio"]').click(function(){
if ($(this).is(':checked'))
{
console.log($(this).parent().parent().siblings().find('input[type="text"]').val());
}
});
Working Demo
If you can change the html a little, here is a different approach http://jsfiddle.net/xa9cjLd9/1/
<div class="form-group">
<div class="radio">
<label data-for='answer[]'>
<input type="radio" name="correct_answer_id" />Correct</label>
</div>
<label for="answer" class="col-sm-2 control-label">Answer 2</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="answer[]" placeholder="Answer" required />
</div>
</div>
$('input[type="radio"]').click(function () {
if ($(this).is(':checked')) {
var data = $(this).closest('label').attr('data-for');
console.log($('input[name=' + '"' + data + '"' + ']').val());
}
});
Just Define a data attribute to the label , which contains the name of the related input.

Categories