I have 2 radio buttons which when I click on one of them I get dropdown menu where must choose amount.
So far I was able to make it check/unchek them but the problem is that when I uncheck the radio button dropdown doesn't hide again.
I'm not very good in javascript so please help on this one. Here is the part of code
<div class="radio">
<label><input type="radio" autocomplete="off" id="paypal" name="paypal"></label> PayPal
</div>
<div class="radio">
<label><input type="radio" autocomplete="off" name="bank" id="bank"></label> Bank
</div>
<div class="form-group">
<span id="paypalamount" style="display:none">
<label class="col-sm-3 control-label" for="price"></label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon">$</span>
<select id="paypalamount" required="required" class="form-control">
<option selected value="50">50</option>
</select>
</div>
</div>
</span>
<span id="bankamount" style="display:none">
<label class="col-sm-3 control-label" for="price">Please Choose Amount to Deposit</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon">$</span>
<select id="bankamount" required="required" class="form-control">
<option selected value="50">50</option>
<option value="100">100</option>
</select>
</div>
</div>
</div>
</span>
Here is JS
$(document).ready(function(){
$("#paypal").change(function(){
var showOrHide =$(this).is(':checked');
$("#paypalamount").toggle(showOrHide);
$('[name="description"]').toggleClass('#paypalamount',showOrHide )
});
$("#bank").change(function(){
var showOrHide =$(this).is(':checked');
$("#bankamount").toggle(showOrHide);
$('[name="description"]').toggleClass('#bankamount',showOrHide )
});
$("input[type='radio']").click(function()
{
var previousValue = $(this).attr('previousValue');
var name = $(this).attr('name');
if (previousValue == 'checked')
{
$(this).removeAttr('checked');
$(this).attr('previousValue', false);
}
else
{
$("input[name="+name+"]:radio").attr('previousValue', false);
$(this).attr('previousValue', 'checked');
}
});
});
And this is working demo of the code above JSFIDDLE
$(document).ready(function() {
$(":radio[name=bankpaypal]").change(function() {
if ($(this).is(':checked')) {
var name = $(this).attr('id')
$('span').hide()
$('span#' + name + 'amount').show()
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="radio">
<label>
<input type="radio" autocomplete="off" id="paypal" name="bankpaypal">
</label>PayPal
</div>
<div class="radio">
<label>
<input type="radio" autocomplete="off" name="bankpaypal" id="bank">
</label>Bank
</div>
<div class="form-group">
<span id="paypalamount" style="display:none">
<label class="col-sm-3 control-label" for="price"></label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon">$</span>
<select id="paypalamount1" required="required" class="form-control">
<option selected value="50">50</option>
</select>
</div>
</div>
</span>
<span id="bankamount" style="display:none">
<label class="col-sm-3 control-label" for="price">Please Choose Amount to Deposit</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon">$</span>
<select id="bankamount1" required="required" class="form-control">
<option selected value="50">50</option>
<option value="100">100</option>
</select>
</div>
</div>
Name of radio button should be same to select only 1
ID should be unique
Get the selected radio button and show its counter select using its ID since they are similar
Use following code to check whether a radio button is checked or not
if($("input:radio[name=paypal]:checked").val())
alert("checked");
else
alert("Not checked");
Do your process of hiding and showing inside the if else conditions.
You only need to check for the value of a RadioButton as not checked. If unchecked set the style attribute display:none for the respective dropdown again in Javascript.
Just like you do it for the checked-Status of the RadioButton and just change the condition and the actions like you want the RadioButtons to behave.
Related
I have a form with several inputs like below
This is the value from Jenis Layanan
When I choose value from Jenis Layanan, if I choose Corporate, I want to add new field radio button below jenis layanan. And if I choose Perorangan or Home Visit, radio button dissapear.
How can I make it work like this?
My code
<div class="p-2">
<div class="form-group">
<label class="form-label font-weight-bold" for="sub_product">Jenis Layanan</label>
<select class="form-control" name="sub_product" id="sub_product">
<option value="1">Perorangan</option>
<option value="2">Home Visit</option>
<option value="3">Corporate</option>
</select>
</div>
</div>
<div class="p-2">
<div class="form-group">
<label class="form-label font-weight-bold" for="appoinment_date">Tanggal Pelayanan</label>
<input name="appointment_date" placeholder="Tanggal Layanan" id="appointment_date" class="form-control datepicker" autocomplete="off">
</div>
</div>
You have to write some JS to your form with event listener:
document.querySelector('#sub_product').addEventListener('change', () => {
// your code
})
I made codepen for you with an example:
https://codepen.io/VeterJS/pen/BaRvYYx
Is easier with jQuery, when the Corporate option is selected the div display containing the radio buttons is changed to block and when other option is selected then the display goes back to none which hides the element.
$("select").change(function() {
let option = '';
$("select option:selected").each(function() {
option = $( this ).text();
});
if(option == 'Corporate'){
$('#radioBTNS').css('display','block')
}else{
$('#radioBTNS').css('display','none')
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="p-2">
<div class="form-group">
<label class="form-label font-weight-bold" for="sub_product">Jenis Layanan</label>
<select class="form-control" name="sub_product" id="sub_product">
<option value="1">Perorangan</option>
<option value="2">Home Visit</option>
<option value="3">Corporate</option>
</select>
</div>
</div>
<div id="radioBTNS" style="margin:10px;display:none">
<input type="radio" id="age1" name="age" value="30">
<label for="age1">Radio btn one</label><br>
<input type="radio" id="age2" name="age" value="60">
<label for="age2">Radio btn two</label><br>
</div>
<div class="p-2">
<div class="form-group">
<label class="form-label font-weight-bold" for="appoinment_date">Tanggal Pelayanan</label>
<input name="appointment_date" placeholder="Tanggal Layanan" id="appointment_date" class="form-control datepicker" autocomplete="off">
</div>
</div>
So I am trying to do an that If the College is selected in the checkbox then the college course would show like
BS-IT,
BS-IT-DA,
BS-CS
in the drop-down
else if the senior high is check then the strand would show
GAS,
IT,
CS.
I don't know if it is required with the JavaScript or
J-Query
<div class="form-group right">
<label class="label-title">Status</label>
<div>
<label><input type="checkbox">College Student</label>
<label><input type="checkbox" class="senior-high" >Senior High</label>
</div>
</div>
<div class="horizontal-group">
<div class="form-group left">
<label for="">Course</label>
<select id="Course"></select>
</div>
</div>
//first add id="collage" on collage checkbox and add class="checkbox" on all checkbox add senior_highcheckbox id on senior hs checkbox
$(document).on('click','.checkbox'function(){
if($('#college').is('checked')){
$('#course').append(`<option>BS-IT </option>
<option>BS-IT-DA</option>
<option>BS-CS</option>`);
$('#senior_highcheckbox').attr('checked',false);
}else{
$('#course').append(`<option>GAS</option>
<option>IT</option>
<option>CS</option>`);
$('#college').attr('checked',false);
}
})
I've amended your HTML slightly so I can find the ID with jQuery. What you want to do is to listen out for the checkbox with Jquery and then check its ID attribute. If the attribute is equal to 'college' then append the first list of items. Otherwise it must be the other checkbox so append the others.
$(':checkbox').click(function() {
if ($(this).attr('id') === 'college') {
$('#Course').append($('<option></option>').html('BS-IT'), $('<option></option>').html('BS-IT-DA'), $('<option></option>').html('BS-CS'));
} else {
$('#Course').append($('<option></option>').html('GAS'), $('<option></option>').html('IT'), $('<option></option>').html('CS'));
}
$(':checkbox').attr("disabled", true);
});
$('#cancel').click(function() {
$(':checkbox').prop("checked", false);
$(':checkbox').attr("disabled", false);
$('#Course').empty();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group right">
<label class="label-title">Status</label>
<div>
<input type="checkbox" id="college" name="college">
<label for="college">College Student</label>
<input type="checkbox" id="senior-high" name="senior-high">
<label for="senior-high">Senior High</label>
</div>
</div>
</div>
<div class="horizontal-group">
<div class="form-group left">
<label for="">Course</label>
<select id="Course"></select>
</div>
<button id="cancel">Cancel</button>
</div>
I have a list in a foreach loop and in each one there is an option to edit from a dropdown select box however when adding more than one of these select boxes the whole thing stops working when clicking the service and dropping the options down.
This is the code:
<select id="aroptions" name="aroptions" data-id="<?php echo $get['id'];?>">
<option value="none">Please Select your service</option>
<option class="tw" value="artw">Option 1</option>
<option class="aiop" value="araiop">Option 2</option>
<option class="rr" value="rr">Option 3</option>
<option class="aw" value="aw">Option 4</option>
<option class="gr" value="gr">Option 5</option>
</select>
<div class="twsettings" data-id="<?php echo $get['id'];?>" style="display:none">
<div class="form-group row" style="padding: 10px;">
<label for="username" class="col-sm-4 col-form-label">
Username:
</label>
<div class="col-sm-8">
<input type="text" class="form-control-plaintext input-lg" style="height: 39px; width:100%;"
name="twusername" id="twusername" size="45" />
</div>
<br><br>
<label for="username" class="col-sm-4 col-form-label">
Series Name:
</label>
<div class="col-sm-8">
<input type="text" data-id="<?php echo $get['id'];?>" class="form-control-plaintext input-lg" style="height: 39px; width:100%;"
name="twseries" id="twseries" size="45" />
</div>
<br><br>
<label for="default" class="col-sm-4 col-form-label">
Set as Default:
</label>
<div class="col-sm-8">
<input type="checkbox" name="main_ar_tw" data-id="<?php echo $get['id'];?>" style="width: 5%;height: 34px;" value="Yes"/><br>
</div>
</div>
</div>
The non working js is below
$('select').change(function(){
if ($(this).val() == "tw"){
$(this).closest('.twsettings').css("display", "none");
$(this).closest('.twsettings').removeClass("show");
} });
`Now i understand that for this to work each dropdown selection has to have a unique id otherwise they will all dropdown at the same time hence the data-id value but for the life of me i cannot remember how to do it.
Any help would be appreciated :)
I've created a fiddle for you to play around with. Note: The data-setting-id is different in each iteration of the loop. JSFiddle]1 (currently the dropdown will only function on the first option as the others are not added in the fiddle)
The first change that I'd make is to make your select elements have unique IDs:
<select id="aroptions<?php echo $get['id'];?>" name="aroptions" data-id="<?php echo $get['id'];?>">
That alone isn't going to do a whole lot for you though. First, you need to make sure that you're hiding all the divs before you show any of them. Then you need to make sure that when you're selecting an option, you use both the selected value and the select element's ID to determine which div to show.
For the hiding, I've given each settings div a class of option-group and in the Javascript we will run $(".option-group").hide();.
To show the correct settings div, we'll concatenate the corresponding option value with the select element ID to create the div's data-setting-id such as data-setting-id="artw<?php echo $get['id'];?>" and data-setting-id="araiop<?php echo $get['id'];?>" You will need to follow this pattern for each option group div.
Then in the Javascript, we do the same and concatenate the selected option with the element ID: var $elm = $('*[data-setting-id="' + selectedOpt + dataId + '"]');
Here's how I updated the output that you provided in the fiddle.
<select id="aroptions123" name="aroptions" data-id="123">
<option value="none">Please Select your service</option>
<option class="tw" value="artw">Option 1</option>
<option class="aiop" value="araiop">Option 2</option>
<option class="rr" value="rr">Option 3</option>
<option class="aw" value="aw">Option 4</option>
<option class="gr" value="gr">Option 5</option>
</select>
<div class="option-group twsettings" data-setting-id="artw123" style="display:none">
<div class="form-group row" style="padding: 10px;">
<label for="username" class="col-sm-4 col-form-label">
Username:
</label>
<div class="col-sm-8">
<input type="text" class="form-control-plaintext input-lg" style="height: 39px; width:100%;" name="twusername" id="twusername" size="45" />
</div>
<br><br>
<label for="username" class="col-sm-4 col-form-label">
Series Name:
</label>
<div class="col-sm-8">
<input type="text" data-id="123" class="form-control-plaintext input-lg" style="height: 39px; width:100%;" name="twseries" id="twseries" size="45" />
</div>
<br><br>
<label for="default" class="col-sm-4 col-form-label">
Set as Default:
</label>
<div class="col-sm-8">
<input type="checkbox" name="main_ar_tw" data-id="123" style="width: 5%;height: 34px;" value="Yes" /><br>
</div>
</div>
</div>
<div class="option-group aiopsettings" data-setting-id="araiop123" style="display:none">
<div class="form-group row" style="padding: 10px;">
<label for="username" class="col-sm-4 col-form-label">
Campaign ID:
</label>
<div class="col-sm-8">
<input type="text" class="form-control-plaintext input-lg" style="height: 39px; width:100%;" name="aiopid" id="aiopid" size="45" />
</div>
<br><br>
<label for="default" class="col-sm-4 col-form-label">
Set as Default:
</label>
<div class="col-sm-8">
<input type="checkbox" name="main_ar_aiop" style="width: 5%;height: 34px;" value="Yes" /><br>
</div>
</div>
</div>
Javascript:
$('select').change(function() {
var dataId = $(this).attr('data-id');
var selectedOpt = $(this).val();
// This is the settings div. Do whatever you want
var $elm = $('*[data-setting-id="' + selectedOpt + dataId + '"]');
$(".option-group").hide();
$elm.show();
//$elm.removeClass("show");
})
Here's the updated fiddle
Note that there are really a number of different ways that you could accomplish this. What I'm giving you here may not be the best or most efficient. I'm just giving you a quick answer using as much of your provided code as possible.
I'm new to jQuery. Here, in my code, I have two check boxes. The check box one is checked by default. My problem is when I check the second check box it's displaying the text box and if I click first check box it's not disappearing.
The text box should be appear only if the second checkbox is clicked otherwise the text box should disappear.
$(document).ready(function () {
$('.requirement-freqncy').hide();
$('#post-buying-urgent').change(function () {
if ($('#post-buying-urgent').is(':checked')){
$('.requirement-freqncy').slideDown('slow');
}
else{
$('.requirement-freqncy').slideUp('slow');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row margin-lft-right-0">
<div class="col-sm-4 pad-left-zero"><input checked="checked" id="post-buying-regular" name="optradio" type="radio"> Regular Requirement</div>
<div class="col-sm-6"><input id="post-buying-urgent" name="optradio" type="radio"> Urgent Requirement</div>
</div>
<div class="form-group requirement-freqncy"><label>Requirement Frequency</label> <select class="form-control">
<option>Please Select</option>
<option>Yearly</option>
<option>Biannual (Twice a Year)</option>
</select></div>
Forcing a radio button to become unchecked by clicking another in its group will actually not fire the change event for that radio button - only the clicked one. What you can do instead is apply the listener to both:
$('#post-buying-urgent, #post-buying-regular').change(function() { ...
$(document).ready(function () {
$('.requirement-freqncy').hide();
$('#post-buying-urgent, #post-buying-regular').change(function () {
if ($('#post-buying-urgent').is(':checked')){
$('.requirement-freqncy').slideDown('slow');
}
else{
$('.requirement-freqncy').slideUp('slow');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row margin-lft-right-0">
<div class="col-sm-4 pad-left-zero"><input checked="checked" id="post-buying-regular" name="optradio" type="radio"> Regular Requirement</div>
<div class="col-sm-6"><input id="post-buying-urgent" name="optradio" type="radio"> Urgent Requirement</div>
</div>
<div class="form-group requirement-freqncy"><label>Requirement Frequency</label> <select class="form-control">
<option>Please Select</option>
<option>Yearly</option>
<option>Biannual (Twice a Year)</option>
</select></div>
Or, if these are your only radio buttons, apply them to the radio buttons without specifying IDs:
('input[type=radio]').change(function() { ...
$(document).ready(function () {
$('.requirement-freqncy').hide();
$('input[type=radio]').change(function () {
if ($('#post-buying-urgent').is(':checked')){
$('.requirement-freqncy').slideDown('slow');
}
else{
$('.requirement-freqncy').slideUp('slow');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row margin-lft-right-0">
<div class="col-sm-4 pad-left-zero"><input checked="checked" id="post-buying-regular" name="optradio" type="radio"> Regular Requirement</div>
<div class="col-sm-6"><input id="post-buying-urgent" name="optradio" type="radio"> Urgent Requirement</div>
</div>
<div class="form-group requirement-freqncy"><label>Requirement Frequency</label> <select class="form-control">
<option>Please Select</option>
<option>Yearly</option>
<option>Biannual (Twice a Year)</option>
</select></div>
Or, yet another option, change the selector to the name that they share:
$('[name=optradio]').change(function() { ...
$(document).ready(function () {
$('.requirement-freqncy').hide();
$('[name=optradio]').change(function () {
if ($('#post-buying-urgent').is(':checked')){
$('.requirement-freqncy').slideDown('slow');
}
else{
$('.requirement-freqncy').slideUp('slow');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row margin-lft-right-0">
<div class="col-sm-4 pad-left-zero"><input checked="checked" id="post-buying-regular" name="optradio" type="radio"> Regular Requirement</div>
<div class="col-sm-6"><input id="post-buying-urgent" name="optradio" type="radio"> Urgent Requirement</div>
</div>
<div class="form-group requirement-freqncy"><label>Requirement Frequency</label> <select class="form-control">
<option>Please Select</option>
<option>Yearly</option>
<option>Biannual (Twice a Year)</option>
</select></div>
You only bound the change event to the urgent radio button, not both of them. Change your code to ($('#post-buying-urgent, #post-buying-regular')):
$(document).ready(function() {
$('.requirement-freqncy').hide();
$('#post-buying-urgent, #post-buying-regular').change(function() {
if ($('#post-buying-urgent').is(':checked')) {
$('.requirement-freqncy').slideDown('slow');
} else {
$('.requirement-freqncy').slideUp('slow');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row margin-lft-right-0">
<div class="col-sm-4 pad-left-zero"><input checked="checked" id="post-buying-regular" name="optradio" type="radio"> Regular Requirement</div>
<div class="col-sm-6"><input id="post-buying-urgent" name="optradio" type="radio"> Urgent Requirement</div>
</div>
<div class="form-group requirement-freqncy"><label>Requirement Frequency</label> <select class="form-control">
<option>Please Select</option>
<option>Yearly</option>
<option>Biannual (Twice a Year)</option>
</select></div>
So, any hints why this is not working?
I'm trying to get both input fields ('pagamento' and 'parcelas') at a preset if the 'Boleto' radiobox is selected, ('1' and 'MercadoPago', respectively, and back again to user input if the 'Cartão' radiobox is selected.
function boleto() {
if(document.getElementById('tipodepagamento').checked==true){
document.getElementById('pagamento').value = 'MercadoPago';
document.getElementById('pagamento').disabled = true;
document.getElementById('parcelas').value = '1';
document.getElementById('parcelas').disabled = true;
}
else{
document.getElementById('pagamento').disabled = false;
document.getElementById('parcelas').disabled = false;
}
}
<div class="col-md-6">
<label class="radio-inline">
<input type="radio" name="tipodeconta" id="tipodepagamento2" value="Cartão" checked onClick="boleto();">Cartão de Crédito
</label>
</div>
<div class="col-md-6">
<label class="radio-inline">
<input type="radio" name="tipodeconta" id="tipodepagamento" value="Boleto" onClick="boleto();">Boleto
</label>
</div>
<label>Plataforma de Pagamento</label>
<select class="form-control" onClick="fpagamento();validador();" onKeyUp="fpagamento();" name="pagamento" id="pagamento">
<option value="Selecione">Selecione</option>
<option value="Paypal">Paypal</option>
<option value="MercadoPago">Mercado Pago</option>
</select>
<label>Número de Parcelas</label>
<select class="form-control" id="parcelas" name="parcelas">
<option value="1">1x</option>
<option value="2">2x</option>
</select>
Fiddle = http://kodeweave.sourceforge.net/editor/#d692f9461c022ee386cb2c5329f453c4
I see a few problems with your code.
<input type="radio" name="tipodeconta" id="tipodepagamento" value="Boleto" onClick="boleto();">
<select class="form-control" onClick="fpagamento();validador();" onKeyUp="fpagamento();"
First off you shouldn't use onClick for a radio button, or a select element. use onChange instead which means you won't need to call onKeyUp="fpagamento();"
BTW: your code is very WET. In addition it's bad practice to add a onClick attribute in your html (same goes for other events). Put your javascript in a .js file and edit it there.
var tipodeconta = $('input[name=tipodeconta]'),
cartao = document.querySelector('#tipodepagamento2'),
pagamento = $('#pagamento'),
checkThis = $('.form-control');
tipodeconta.on('change', function() {
if (cartao.checked) {
pagamento.val('MercadoPago');
}
(cartao.checked) ? checkThis.prop('disabled', true) : checkThis.removeAttr('disabled');
}).trigger('change');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel panel-default">
<div class="panel-body">
<div class="col-md-6">
<label class="radio-inline">
<input type="radio" name="tipodeconta" id="tipodepagamento2" value="Cartão" checked="">
Cartão de Crédito
</label>
</div>
<div class="col-md-6">
<label class="radio-inline">
<input type="radio" name="tipodeconta" id="tipodepagamento" value="Boleto">
Boleto
</label>
</div>
</div>
</div>
<label>Plataforma de Pagamento</label>
<select class="form-control" name="pagamento" id="pagamento" disabled="">
<option value="Selecione">Selecione</option>
<option value="Paypal">Paypal</option>
<option value="MercadoPago">Mercado Pago</option>
</select>
<label>Número de Parcelas</label>
<select class="form-control" id="parcelas" name="parcelas" disabled="">
<option value="1">1x</option>
<option value="2">2x</option>
</select>