Show hide div based on radio button checked [duplicate] - javascript

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)

Related

JQuery click check box to display specific field from div

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>

Change submit onclick based on a checkbox

I have a form that is being used as a basic contact form. I have added a checkbox that adds some fields if selected. How can I change the onclick action of the submit button based on if this box is checked or not. Here is what I have currently.
<form class="homeContact">
<label for="chkJob">
Interested in a career? Check to apply
<input type="checkbox" id="chkJob" />
</label>
<div id="dvApply" style="display: none">
Download Application
Download the application. Fill it out and upload below:
<input type="file" name="fileToUpload" id="fileToUpload">
</div>
<div id="popErr"></div>
<input type="hidden" name="nospam">
<div class="field">
<div class="label-form">
<input type="text" placeholder="Name *" value="" name="name" id="popName">
<span class="form-icon fa fa-user"></span>
</div>
</div>
<div class="field">
<div class="label-form">
<input type="text" placeholder="Email *" value="" name="email" id="popEmail">
<span class="form-icon fa fa-envelope"></span>
</div>
</div>
<div class="field">
<div class="label-form">
<input type="text" placeholder="Phone *" value="" name="phone" id="popTel">
<span class="form-icon fa fa-phone"></span>
</div>
</div>
<div id="submit_button">
<input type="button" class="button submit" id="contact-submit" onclick="submitForm()" value="Request Information">
</div>
</form>
<script>
jQuery(document).ready(function($) {
$("#chkJob").click(function () {
if ($(this).is(":checked")) {
$("#dvApply").show();
} else {
$("#dvApply").hide();
}
});
});
</script>
You can implement this login into your submitForm function:
function submitForm()
{
if ($('#chkJob').is(":checked")) {
$("#dvApply").show();
} else {
$("#dvApply").hide();
}
}
But if you want dvApply to be toggled every time checkbox button is clicked without waiting for submit button to be clicked you can do something like:
jQuery(document).ready(function($) {
$('#chkJob').change(function() {
$('#dvApply').toggle();
});
});

Second Time Checkbox Not Working

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.

Show and hide div on check and uncheck of checkbox

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>

How to disable textbox when checkbox is checked using Laravel and AdminLTE?

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>

Categories

Resources