I have a dropdown to show values in 3 different Checkboxes using Jquery. But when I clicked on the checkbox no input field display?
$('#response').click(function() {
if ($(this).is(':checked')) {
$("#displayrow").show();
} else {
$("#displayrow").hide();
}
});
/*
function Payoutmethods(countryid){
$.ajax({
url: "abc.php",
type: "post",
data: {cid:cid},
success: function (methods){
$('#displayresponse').html(methods);
}
});
*/
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="control-group">
<div class="controls" id="displayresponse">
<input type="checkbox" name="response" id="response" value="">
</div>
</div>
<div id="displayrow" style="display: none;">
<div class="control-group">
<div class="controls">
<input type="text" id="displayrow" name="displayrow" />
<input type="text" name="displayrow" id="displayrow" />
</div>
</div>
</div>
It seems to be working correctly. I have tested it below and when the checkbox is clicked the inputs show and hide. You could be having a problem with your ajax that is stopping the rest of your code from working.
Or, if you need this to work for items that are not in the DOM then you should run the click function targeting something outside of the div like the body and then using the jquery "on" function.
/* //////////////SHOW AND HIDE INPUT FIELDS//// */
/*
$('#response').click(function() {
if ($(this).is(':checked')) {
$("#displayrow").show();
} else {
$("#displayrow").hide();
}
});
*/
// If you need this to work for items that are not in the DOM then you should run the click function like this.
$('body').on("click", "#response",function() {
if ($(this).is(':checked')) {
$("#displayrow").show();
} else {
$("#displayrow").hide();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="control-group">
<!-- // displayresponse id -- get value(Student , Teacher. Subject and each values has specific input fields) from abc page and display here in div -->
<div class="controls" id="displayresponse">
CLICK ME --> <input type="checkbox" name="response" id="response" value="">
</div>
</div>
<div id="displayrow" style="display: none;">
<div class="control-group">
<div class="controls">
<input type="text" id="displayrow" name="displayrow" value="test1" />
<input type="text" id="displayrow" name="displayrow" value="test2"/>
</div>
</div>
</div>
You need to place your code within $(function() {...}) to be excuted only once document is loaded:
$(function() {
$('#response').change(function(){
if( $(this).is(':checked'))
{
$("#displayrow").show();
} else {
$("#displayrow").hide();
}
});
});
$(function() {
$('#response').change(function(){
if( $(this).is(':checked'))
{
$("#displayrow").show();
} else {
$("#displayrow").hide();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="control-group">
<div class="controls" id="displayresponse">
<input type="checkbox" name="response" id="response" value="">
</div></div>
<div id="displayrow" style="display: none;">
<div class="control-group"><div class="controls">
<input type="text" id="displayrow" name="displayrow" / >
<input type="text" name="displayrow" id="displayrow" />
</div></div></div>
Related
This question already has answers here:
Bootstraps ICheck-Helper does not trigger on changed event
(4 answers)
Closed 3 years ago.
I am trying to show hidden div based on radio button input.
When it is checked yes then it should show the hidden div and when checked no, it should hide the div.
I don't know why it is not working. I have checked with some other references on stack, but it didn't help.
$(function() {
$("input[name='otherppt']").click(function() {
if ($("#otheryes").is(":checked")) {
$("#otherdoi").show();
$("#otherdoi input").prop("required", true);
} else {
$("#otherdoi").hide();
$("#otherdoi input").prop("required", false);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="radio-group">
<input type="radio" id="otheryes" name="otherppt" class="other_ppt" required value='yes' data-msg='Please select any one of these.' />
<input type="radio" id="otherno" name="otherppt" class="other_ppt" required value='no' data-msg="Please choose any one of these." />
</div>
<div class="form-group row" id="otherdoi" style="display:none">
<div class="col-mobi-12 col-xs-6">
<label class=""><b>Date of Issue <span>(Day-Month-Year)</span> <span class="txt-red">*</span></b></label>
</div>
<div class="col-mobi-12 col-xs-6 col-md-5">
<div class="input-append default date dob-dates" data-date="19-03-2019" data-date-format="M dd, yyyy">
<span class="form-date-field">
<input type="text" name="date_of_issue" class="required date-of-issue" autocomplete=off readonly data-msg='Please enter date of issue.' placeholder="DD-MM-YYYY" />
</span>
<i class="clear"> </i>
</div>
</div>
</div>
$(document).on('change','.other_ppt', function() {
if ($("#otheryes").is(":checked")) {
$("#otherdoi").show();
$("#otherdoi input").attr("required", true);
} else {
$("#otherdoi").hide();
$("#otherdoi input").attr("required", false);
}
});
I just checked your code working fine may be it is CDN link breakage. Try again
<html>
<head>
<title>Page Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
</style>
</head>
<body>
<div class="radio-group">
<input type="radio" id="otheryes" name="otherppt" class="other_ppt" required value='yes' data-msg='Please select any one of these.' />
<input type="radio" id="otherno" name="otherppt" class="other_ppt" required value='no' data-msg="Please choose any one of these." />
</div>
<div class="form-group row" id="otherdoi" style="display:none">
<div class="col-mobi-12 col-xs-6">
<label class=""><b>Date of Issue <span>(Day-Month-Year)</span> <span class="txt-red">*</span></b></label>
</div>
<div class="col-mobi-12 col-xs-6 col-md-5">
<div class="input-append default date dob-dates" data-date="19-03-2019" data-date-format="M dd, yyyy">
<span class="form-date-field">
<input type="text" name="date_of_issue" class="required date-of-issue" autocomplete=off readonly data-msg='Please enter date of issue.' placeholder="DD-MM-YYYY" />
</span>
<i class="clear"> </i>
</div>
</div>
</div>
<script>
$(function() {
$("input[name='otherppt']").click(function() {
if ($("#otheryes").is(":checked")) {
$("#otherdoi").show();
$("#otherdoi input").prop("required", true);
} else {
$("#otherdoi").hide();
$("#otherdoi input").prop("required", false);
}
});
});
</script>
</body>
</html>
Make sure you don't have other input[name='otherppt'] in your code. Maybe on different files (widgets/popups)
I want to enable textbox when checkbox is checked form content load from ajax page in modal popup but its not working and not showing any error in browser console.
function cash(cash) {
if ($(cash).is(':checked')) {
$('#cashAmount').attr("disabled", false);
} else {
alert("checkbox is not checked");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12 field-option">
<strong>Cash</strong> <input type="checkbox" name="cash" id="cash" onclick="cash(this)">
</div>
<div class="col-md-6 col-sm-6 custom_field">
<!-- custom_field -->
<span><strong>Amount <i>*</i></strong></span>
<input type="text" name="cashAmount" id="cashAmount" class="form-control" disabled>
</div>
What you need to do is this:
function cash(cash) {
var getthevalue = $(cash).attr('id');
if (getthevalue.is(':checked')) {
$('#cashAmount').attr("disabled", false);
}
else{
alert("checkbox is not checked");
}
}
This is because when you pass:
<strong>Cash</strong> <input type="checkbox" name="cash" id="cash" onclick="cash(this)">
You bass the html element and not the id, your This is referring to the entire strong tag.
So in your method:
var getthevalue = $(cash).attr('id');
Will get the id attribute of your input tag, which is passed through your this:
onclick="cash(this)"
With pure javascript:
function cash(cash){
if(cash.checked ===true) document.getElementById('cashAmount').removeAttribute('disabled');
else document.getElementById('cashAmount').setAttribute('disabled', 'disabled');
}
when checkbox is checked form content load from ajax page in modal
popup
It seems you need to delegate the event
// Using change event handler and delegating the event using on from body
// to target element
$('body').on('change', '#cash', function() {
// checking if it is checked
if (this.checked === true) {
$('#cashAmount').attr("disabled", false);
} else {
$('#cashAmount').attr("disabled", true);
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12 field-option">
<strong>Cash</strong> <input type="checkbox" name="cash" id="cash">
</div>
<div class="col-md-6 col-sm-6 custom_field">
<!-- custom_field -->
<span><strong>Amount <i>*</i></strong></span>
<input type="text" name="cashAmount" id="cashAmount" class="form-control" disabled>
</div>
Please check this fiddle
https://jsfiddle.net/bimalkumarh/d1qxv247/
$("#cash").on('change',function() {
if (this.checked) {
$('#cashAmount').attr("disabled", false);
} else {
alert("checkbox is not checked");
}
});
Hope this helps.
Following code using Javascript
function cash(x) {
if (document.getElementById('cash').checked) {
document.getElementById("cashAmt").disabled = false;
} else {
document.getElementById("cashAmt").disabled = true;
}
}
<div class="col-md-12 field-option">
<strong>Cash</strong> <input type="checkbox" id="cash" onclick="cash(this)">
</div>
<div class="col-md-6 col-sm-6 custom_field">
<!-- custom_field -->
<span><strong>Amount <i>*</i></strong></span>
<input type="text" id="cashAmt" class="form-control" disabled>
</div>
Following code uses jquery
function cash(cash) {
if ($(cash).is(':checked')) {
$('#cashAmt').attr("disabled", false);
}
else{
$('#cashAmt').attr("disabled", true);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="col-md-12 field-option">
<strong>Cash</strong> <input type="checkbox" id="cash" onclick="cash(this)">
</div>
<div class="col-md-6 col-sm-6 custom_field"> <!-- custom_field -->
<span><strong>Amount <i>*</i></strong></span>
<input type="text" id="cashAmt" class="form-control" disabled>
</div><!-- End custom_field-->
$("#cash").on('change', function(){
$('#cashAmount').attr("disabled", !$(this).is(':checked'));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12 field-option">
<strong>Cash</strong> <input type="checkbox" name="cash" id="cash">
</div>
<div class="col-md-6 col-sm-6 custom_field">
<!-- custom_field -->
<span><strong>Amount <i>*</i></strong></span>
<input type="text" name="cashAmount" id="cashAmount" class="form-control" disabled>
</div>
You can use disabled config to disable textbox on click of checkbox.
function handleChange(el) {
var name = document.getElementById('name');
name.disabled = !el.checked;
name.focus()
}
<label><input type='checkbox' onclick='handleChange(this);'>Checkbox</label>
<br>
<label>Name : <input disabled=true type='text' id='name'></label>
Smallest, simplest and easiest thing to do, using the true/false state of checkbox thereby avoiding if-else:
$('body').on('change', '#cash', function() {
$('#cashAmount').prop("disabled", !this.checked);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12 field-option">
<strong>Cash</strong> <input type="checkbox" name="cash" id="cash">
</div>
<div class="col-md-6 col-sm-6 custom_field">
<!-- custom_field -->
<span><strong>Amount <i>*</i></strong></span>
<input type="text" name="cashAmount" id="cashAmount" class="form-control" disabled>
</div>
I have created a two javascript.
1.When i click the checkbox the input field is appeared and when i unchecked input field is disappeared.
2.Second is when i click the add more items the all fields are created one more time.
Now the problem is when is created a second and more items the checkbox is not working.
HTML Code:
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12">
<div data-role="dynamic-fields">
<div class="form-inline">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<input type="text" class="form-control" id="Name1" placeholder="Food Name" name="Name1" style="width:120%;" required data-rule-minlength="2">
<label class="sr-only" for="field-name">Name</label>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<input type="text" class="form-control" id="field-value" placeholder="Description" style="width:120%;" required>
<label class="sr-only" for="field-value">Description</label>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<select id="select1" name="select1" style="width:130%;" class="form-control" required>
<option value=""></option>
<option value="1">Food Type 1</option>
<option value="2">Food Type 2</option>
<select>
<label for="select1">Food Type</label>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<input type="text" value="" class="form-control" data-role="tagsinput" placeholder="Tags" />
<label class="sr-only" for="field-tags">Tags</label>
</div>
</div>
</div>
<div class="row">
<div class="form-inline">
<div class="col-md-3">
<div class="form-group">
<input type="text" class="form-control" id="Name1" placeholder="Price" name="price" style="width:120%;" required data-rule-minlength="2">
<label class="sr-only" for="field-name">Price</label>
</div>
</div>
<div class="col-md-2">
<div class="checkbox checkbox-styled">
<label><em>Half Plate Price</em>
<input type="checkbox" value="" id="trigger2" name="question"> </label>
</div>
</div>
<div class="col-md-1">
<div id="hidden_fields2">
<input type="text" id="hidden_field2" name="hidden" placeholder="Price" class="form-control" style="width:140%;margin-left:-35px;height: 29px;margin-top: 24px;font-weight: 380;font-size: 16px;line-height: 1.5;"> </div>
</div>
<div class="col-md-3">
<div class="checkbox checkbox-styled">
<label><em>Quarter Plate Price</em>
<input type="checkbox" value="" id="trigger" name="question"> </label>
</div>
</div>
<div class="col-md-1">
<div id="hidden_fields">
<input type="text" id="hidden_field" name="hidden" placeholder="Price" class="form-control" style="width:140%;margin-left:-100px;height: 29px;margin-top: 24px;font-weight: 380;font-size: 16px;line-height: 1.5;"> </div>
</div>
</div>
</div>
<button class="btn btn-icon-toggle btn-delete" data-toggle="tooltip" data-placement="bottom" title="Delete Field" data-role="remove"> <span class="md md-delete"></span> </button>
<button class="btn btn-primary" data-toggle="tooltip" data-placement="bottom" title="Add More Field" data-role="add"> Add More Items </button>
</div>
<!-- /div.form-inline -->
</div>
<!-- /div[data-role="dynamic-fields"] -->
</div>
<!-- /div.col-md-12 -->
</div>
<div class="form-group">
<button type="button" name="submit" href="#" class="btn ink-reaction btn-raised btn-primary">Submit Items</button>
</div>
<!--end .form-group -->
</div>
Checkbox Js:
<script type="text/javascript">
$(function() {
// Get the form fields and hidden div
var checkbox = $("#trigger");
var hidden = $("#hidden_fields");
hidden.hide();
checkbox.change(function() {
if (checkbox.is(':checked')) {
// Show the hidden fields.
hidden.show();
} else {
// Make sure that the hidden fields are indeed
// hidden.
hidden.hide();
$("#hidden_field").val("");
}
});
});
$(function() {
var checkbox = $("#trigger2");
var hidden = $("#hidden_fields2");
hidden.hide();
checkbox.change(function() {
if (checkbox.is(':checked')) {
// Show the hidden fields.
hidden.show();
} else {
hidden.hide();
$("#hidden_field2").val("");
}
});
});
</script>
Add more items JS:
$(function() {
// Remove button
$(document).on('click', '[data-role="dynamic-fields"] > .form-inline [data-role="remove"]', function(e) {
e.preventDefault();
$(this).closest('.form-inline').remove();
});
// Add button
$(document).on('click', '[data-role="dynamic-fields"] > .form-inline [data-role="add"]', function(e) {
e.preventDefault();
var container = $(this).closest('[data-role="dynamic-fields"]');
new_field_group = container.children().filter('.form-inline:first-child').clone();
new_field_group.find('input').each(function() {
$(this).val('');
});
container.append(new_field_group);
});
});
page Screenshot:
There are a couple of problems here:
You are cloning elements and then trying to access them via the same ID (you should use class)
Your functions don't target just clicked element but any element with the selector.
You are cloning elements so you need bind the click event to a non-cloned element: e.g. via $(document).on
I've updated some of your code to demonstrate what I'm talking about. In the html, I've added classes in the trigger2 and hidden_fields2 elements and display:none style to the hidden fields so they are hidden by default.:
<div class="col-md-2">
<div class="checkbox checkbox-styled">
<label><em>Half Plate Price</em>
<input type="checkbox" value="" class="trigger2" id="trigger2" name="question"> </label>
</div>
</div>
<div class="col-md-1">
<div id="hidden_fields2" class="hidden_fields2" style="display:none;">
<input type="text" id="hidden_field2" name="hidden" placeholder="Price" class="form-control" style="width:140%;margin-left:-35px;height: 29px;margin-top: 24px;font-weight: 380;font-size: 16px;line-height: 1.5;"> </div>
</div>
In the javascript, I've changed the function to run from a $(document).on event bind and used the element class instead of the id. I've also changed the code so it only effects the checkbox you change and the closest hidden elements:
$(function() {
$(document).on('change', '.trigger2', function(){
var checkbox = $(this);
var parent = checkbox.closest('.form-inline');
var hidden = parent.find(".hidden_fields2");
hidden.hide();
if (checkbox.is(':checked')) {
// Show the hidden fields.
hidden.show();
} else {
hidden.hide();
$(".hidden_field2").val("");
}
});
});
You need to use the same logic on your other functions and inputs.
I want to hide and show div on check and uncheck of checkbox. I am getting the parent and finding the div which I want to hide. But code is not running
Jquery is:
$('.show-check').click(function() {
if (this.checked) {
$(this).parent().find('.div-check').fadeIn('slow');
} else
$(this).parent().find('.div-check').fadeOut('slow');
});
HTML:
<div class="type-details">
<span class="form-label">Logo:</span>
<div class="switch">
<label>
<input type="checkbox" class="show-check" checked>
<span class="lever"></span>
</label>
</div>
<div class="landing-inputfile div-check">
<div class="col-xs-12 no-padding">
<div class="input-group">
<input type="text" class="file-input" placeholder="No file" readonly>
<label class="input-group-btn">
<span class="btn btn-default btn-flat btn-basic2">
UPLOAD <input type="file" style="display: none;">
</span>
</label>
</div>
</div>
</div>
</div>
Why your code does not work :
$(this).parent() will give you label - and find('.div-check') won't return anything.
Use closest() - to get a common parent which has the desired child element,
$(this).closest('.type-details').find('.div-check').fadeIn('slow');
Also, I'd suggest you use change() event instead of click() on checkbox in the below,
$('.show-check').click(function() {
Use this script instead
$('.show-check').click(function() {
if ($(this).prop('checked')) {
$(this).parents('.type-details').find('.div-check').fadeIn('slow');
} else
$(this).parents('.type-details').find('.div-check').fadeOut('slow');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="type-details">
<span class="form-label">Logo:</span>
<div class="switch">
<label>
<input type="checkbox" class="show-check" checked>
<span class="lever"></span>
</label>
</div>
<div class="landing-inputfile div-check">
<div class="col-xs-12 no-padding">
<div class="input-group">
<input type="text" class="file-input" placeholder="No file" readonly>
<label class="input-group-btn">
<span class="btn btn-default btn-flat btn-basic2">
UPLOAD <input type="file" style="display: none;">
</span>
</label>
</div>
</div>
</div>
</div>
Use $('input').is(':checked')
In your example: $(this).is(':checked')
You have to use parents() to select the correct wrapper to find your element div-check
var $check = $(this).parents('.type-details').find('.div-check');
$('.show-check').click(function() {
if ($(this).is(':checked')) {
$check.fadeIn('slow');
} else
$check.fadeOut('slow');
});
Use $(this).closest(".type-details").find('.div-check') to get the div-check div and hide/show it.
$('.show-check').click(function() {
if (this.checked) {
$(this).closest(".type-details").find('.div-check').fadeIn('slow');
} else {
$(this).closest(".type-details").find('.div-check').fadeOut('slow');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="type-details">
<span class="form-label">Logo:</span>
<div class="switch">
<label>
<input type="checkbox" class="show-check" checked>
<span class="lever"></span>
</label>
</div>
<div class="landing-inputfile div-check">
<div class="col-xs-12 no-padding">
<div class="input-group">
<input type="text" class="file-input" placeholder="No file" readonly>
<label class="input-group-btn">
<span class="btn btn-default btn-flat btn-basic2">
UPLOAD <input type="file" style="display: none;">
</span>
</label>
</div>
</div>
</div>
</div>
$('.show-check').click(function() {
if ($(this).is(":checked")) {
$(this).closest('.type-details').find('.div-check').fadeIn('slow');
} else
$(this).closest('.type-details').find('.div-check').fadeOut('slow');
});
Try this code :
$('.show-check').click(function() {
$(this).toggleClass('checked unchecked');
if ($(this).hasClass('checked')) {
$(this).parents('.type-details').find('.div-check').fadeIn('slow');
} else {
$(this).parents('.type-details').find('.div-check').fadeOut('slow');
}
});
<input type="checkbox" class="show-check checked" checked>
do you know how to disable textbox when the checkbox is checked? This code below is worked when I am using Laravel 5 only. But when I am integrating it with AdminLTE, this won't worked.
<div class="form-group">
<script type="text/javascript">
$(function () {
$("#unlimited").click(function () {
if ($(this).is(":checked")) {
$("#masa_berlaku_from").attr("disabled", "disabled");
$("#masa_berlaku_to").attr("disabled", "disabled");
} else {
$("#masa_berlaku_from").removeAttr("disabled");
$("#masa_berlaku_to").removeAttr("disabled");
}
});
});
</script>
<label for="masa_berlaku" class="control-label col-sm-2">Masa Berlaku</label>
<div class="col-md-3">
<input class="form-control" data-provide="datepicker" data-date-format="yyyy-mm-dd" name="masa_berlaku" id="masa_berlaku_from" placeholder="from">
</div>
<div class="col-md-3">
<input class="form-control" data-provide="datepicker" data-date-format="yyyy-mm-dd" name="masa_berlaku" id="masa_berlaku_to" placeholder="to">
</div>
<div class="col-md-3">
<div class="checkbox">
<label>
<input type="checkbox" name="masa_berlaku" value="0000-00-00" id="unlimited"> Unlimited
</label>
</div>
</div>
</div>