We Keep Coding

How to show radio button after selecting option

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>

Symfony 4 - How to remove choice on twig with Javascript?

I've a symfony 4 project with my form.
In my formType, I've a choiceType like :
->add('momentDebut', ChoiceType::class, [
'choices' => [
"matin" => "matin",
"après-midi" => "après-midi",
"journée" => "journée"
],
In my twig, I have a select :
<select class="browser-default custom-select" id="choiceUser" onchange="choiceDay(this)">
<option value="" disabled selected>Choisissez la durée de l'absence</option>
<option value="jour">La journée</option>
<option value="periode">Du xx au xx</option>
</select>
with onChange function which display or not some elements.
When I select "Du xx au xx", I would like my 'momentDebut'show all the choices except 'day'.
EDIT:
My Twig :
//...
<select class="browser-default custom-select" id="choiceUser" onchange="choiceDay(this)">
<option value="" disabled selected>Choisissez la durée de l'absence</option>
<option value="jour">La journée</option>
<option value="periode">Du xx au xx</option>
</select>
//...
<div id="momentDebut">
<div class="row">
<div class="col">
{{form_row(form.dateDebut)}}
</div>
<div class="col">
{{form_row(form.momentDebut)}}
</div>
</div>
</div>
//...
EDIT2 : My (matin,après-midi,journée) HTML in the source-code:
<div id="absence_momentDebut">
<div class="form-check">
<input type="radio" id="absence_momentDebut_0" name="absence[momentDebut]" required="required" class="form-check-input" value="matin">
<label class="form-check-label required" for="absence_momentDebut_0">matin</label>
</div>
<div class="form-check">
<input type="radio" id="absence_momentDebut_1" name="absence[momentDebut]" required="required" class="form-check-input" value="après-midi">
<label class="form-check-label required" for="absence_momentDebut_1">après-midi</label>
</div>
<div class="form-check">
<input type="radio" id="absence_momentDebut_2" name="absence[momentDebut]" required="required" class="form-check-input" value="journée">
<label class="form-check-label required" for="absence_momentDebut_2">journée</label>
</div>
</div>
I updated my code like this :
function choiceDay(select) {
var valeur = select.options[select.selectedIndex].value;
var targetSelect = document.querySelector('[name="absence[momentDebut]"]');
var targetOption = document.querySelector('[name="absence[momentDebut]"][value="journée"]');
console.log(targetSelect.value);
console.log(targetOption);
// var choice = $('#choiceMomentDebut').text();
// console.log(choice);
switch (valeur) {
case "periode":
document.getElementById("absence").style.visibility = "visible";
document.getElementById("momentDebut").style.visibility = "visible";
document.getElementById("momentFin").style.visibility = "visible";
if (targetOption.value == "journée") { // Reset the selection to the default if it's currently selected
targetSelect.selectedIndex = 0;
}
// Disable the selection
targetOption.setAttribute('disabled', true);
break;
case "jour":
document.getElementById("absence").style.visibility = "visible";
document.getElementById("momentDebut").style.visibility = "visible";
document.getElementById("momentFin").style.visibility = "hidden";
targetOption.removeAttribute('disabled');
break;
default:
break;
}
}
And it seems work !
The problem was about this line :
targetOption = targetSelect.querySelector('option[value="journée"]');
I replaced it by
var targetOption = document.querySelector('[name="absence[momentDebut]"][value="journée"]');
And now, all is good !
Thanks for your help !!

Although is not exactly removing the option as you ask one possible solution is to just disable it, preventing from being selected, which is a little easier.
function choiceDay(el) {
targetRadio = document.querySelector('[name="absence[momentDebut]"]:checked');
targetOption = document.querySelector('[name="absence[momentDebut]"][value="journée"]');
if (el.value == "periode") {
if (targetOption == targetRadio) {
// Uncheck if it's currently selected
targetOption.checked = false;
}
// Disable the selection
targetOption.setAttribute('disabled', true);
} else {
targetOption.removeAttribute('disabled');
}
}
<select class="browser-default custom-select" id="choiceUser" onchange="choiceDay(this)">
<option value="" disabled selected>Choisissez la durée de l'absence</option>
<option value="jour">La journée</option>
<option value="periode">Du xx au xx</option>
</select>
<div id="absence_momentDebut">
<div class="form-check">
<input type="radio" id="absence_momentDebut_0" name="absence[momentDebut]" required="required" class="form-check-input" value="matin">
<label class="form-check-label required" for="absence_momentDebut_0">matin</label>
</div>
<div class="form-check">
<input type="radio" id="absence_momentDebut_1" name="absence[momentDebut]" required="required" class="form-check-input" value="après-midi">
<label class="form-check-label required" for="absence_momentDebut_1">après-midi</label>
</div>
<div class="form-check">
<input type="radio" id="absence_momentDebut_2" name="absence[momentDebut]" required="required" class="form-check-input" value="journée">
<label class="form-check-label required" for="absence_momentDebut_2">journée</label>
</div>
</div>
However you end up doing it, you should add some validation in php, since you could submit any value with javascript disabled. You can find several questions about this.

Check/uncheck radio buttons and hide option when uncheck

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.

Jquery get value of select in div above

I have the following HTML form. I'm trying to get the value of the .plotNumber select and also the value of the sub_category field.
Note: The user is able to add new rows to the form, so there may be multiple blocks of <div class="standard-row add-admin-row input-row">.
My code so far (which works) apart from the plot and category is:
$('.wrapper').on('input', '.inp-calculate', function(e)
{
var input = $(this);
//var plot = input.val(); // get plot id
//var category = input.val(); // get category id
var units = input.val(); // get units
$.post('checkUnits.php', {
plot_id: plot,
category_id: category,
units: units
}, function(data) {
var data = $.parseJSON(data);
if(data[0] !== true) {
alert(data);
input.focus();
input.val('');
}
});
});
I have tried the following solutions which do not work:
$(this).parent().siblings().find('.plotNumber').val();
HTML Code:
<form class="commentForm add-project-form clearfix" id="addWorksheet">
<div class="box box3 clearfix">
<div id="messages"></div>
<div class="sectionbox">
<fieldset class="clonable">
<legend><span>Worksheet</span></legend>
<p class="error-summary error-message"></p>
<div class="standard-row add-admin-row input-row">
<label class="ib">
<span class="label-stacked">Employee</span>
<span class="plain-select">
<select class="inp" data-myname="worksheet[*][employee]" name="employee">
<option value="">Select one...</option>
<option value="1">Test 1</option>
</select>
</span>
</label>
<label class="ib">
<span class="label-stacked">Week ending</span>
<span class="plain-select">
<select class="inp" data-myname="worksheet[*][week_ending]" name="week_ending">
<option value="">Select one...</option>
<option value="Sunday 22 Nov 2015">Sunday 22 Nov 2015</option>
</select>
</span>
</label>
<label class="ib">
<span class="label-stacked">Project</span>
<span class="plain-select">
<select class="inp project" data-myname="worksheet[*][project]" name="project">
<option value="">Select one...</option>
<option value="2">TEST</option>
</select>
</span>
</label>
</div>
<div class="standard-row wsheet-row input-row">
<label class="ib plothead ">
<span class="label-stacked">Plot Number</span>
<span class="plain-select">
<select class="inp plotNumber plotheadclone" data-myname="worksheet[*][plots][!][plot_number]" name="plot_number">
<option value="">Select one...</option>
<option value="6672">444</option>
<option value="6673">555</option>
<option value="6674">666</option>
</select>
</span>
</label>
<div class="plot-offset clearfix">
<div class="standard-row wsheet-row input-row" id="5438">
<label class="ib">
<span class="label-stacked">Category</span>
<select class="inp inp220 inp-disabled" readonly="" data-myname="worksheet[*][plots][!][sub_category][]" name="sub_category">
<option value="5438">NON LABOUR</option>
</select>
</label>
<label class="ib"><span class="label-stacked">Total</span>
<input class="inp inp110 data-addup-total inp-calculate" data-myname="worksheet[*][plots][!][total_cost][]" name="total_cost" value="0.00" type="text">
<input data-myname="worksheet[*][plots][!][price][]" name="price" value="" type="hidden">
<input data-myname="worksheet[*][plots][!][number_units][]" name="number_units" value="" type="hidden">
</label>
</div>
<div class="standard-row wsheet-row input-row" id="5240">
<label class="ib">
<span class="label-stacked">Category</span>
<select class="inp inp220 inp-disabled" readonly="" data-myname="worksheet[*][plots][!][sub_category][]" name="sub_category">
<option value="5240">1ST FIX CYLINDER</option>
</select>
</label>
<label class="ib">
<span class="label-stacked">Price</span>
<input class="inp inp110 inp-disabled" readonly="" data-myname="worksheet[*][plots][!][price][]" name="price" value="£40.00" type="text"></label>
<label class="ib"> <span class="label-stacked">Number</span>
<input class="inp inp55 inp-calculate" data-myname="worksheet[*][plots][!][number_units][]" name="number_units" value="" type="text"></label><label class="ib"><span class="label-stacked">Total</span><input class="inp inp110 inp-disabled data-addup-total" readonly="" data-myname="worksheet[*][plots][!][total_cost][]" name="total_cost" value="£0.00" type="text"></label>
</div>
<div class="wsheet-labour-total">LABOUR: £80.00</div>
<div class="wsheet-nonlabour-total">NON LABOUR: £0.00</div>
<div class="wsheet-final-total">TOTAL CLAIM: £80.00</div>
</div>
</div>
</fieldset>
<div class="reveal-plot showingPlot"> Choose another plot</div>
</div>
<!-- end section box -->
<hr class="divider">
<div class="clonable">
<div class="clone empty"></div>
<div class="cb">
<div>
<p class="add remove-data"><i class="sprite minus2"></i> <span>Remove last row</span></p>
</div>
<div>
<p class="add add-data add-another-worksheet-employee"><i class="sprite plus2"></i> <span>Add another worksheet</span></p>
</div>
</div>
</div>
<div class="save-submit">
<button class="button" type="submit" data-url="addWorksheet.php" data-id="#addWorksheet">Submit</button>
</div>
</div>
<!-- end box -->
</form>
Can someone help find the solution?

You're not traversing far enough up the DOM with .parent() since the select is contained in a <div> three levels above .inp-calculate. How about:
$(this).closest('fieldset').find('.plotNumber').val();

Try like following. Hope this will help you.
var container=$(this).closest('.standard-row.add-admin-row.input-row');
var plot=container.find('.plotNumber').val();
var category=container.find('.inp220').val();

Conditional form actions with jquery show/hide on radios/inputs

I'm working on a form that has to show/hide based on a radio/checkbox selections. I have this half working, but I'm running into a number of errors & I'm certain that this code can be optimized/written much more efficiently.
The flow of the form needs to work based off of what checkboxes/radios are selected. I'm not entirely sure the best way to lay this out in a SO post, so Ive commented the html. If I can clarify this in anyway, I will happily do so if someone has a suggestion
In the markup below, I have added comments where I want to render the html. I have a working example of this over at JS Fiddle. You can see that here http://jsfiddle.net/gTAGG/2/
<form id="dorm-form" class="order-start form-horizontal form-horizontal-left-align" action="/reservation#hourly" method="GET">
<!-- SELECT school -->
<div class="control-group">
<label class="control-label" for="school">College town:</label>
<div class="controls">
<select name="school" class="span3">
<option value="">-- Choose your college town--</option>
{% for school in schools %}{% if school.name != 'Other' %}<option value="{{ school.id }}">{{ school.name }}</option>{% endif %}{% endfor %}
</select>
</div>
</div>
<!-- Multiple Checkboxes -->
<div class="control-group">
<p> Tell us what you need </p>
<label class="checkbox">
<input type="checkbox" name="checkboxes" value="Load">
Load
</label>
<label class="checkbox">
<input type="checkbox" name="checkboxes" value="Unload">
Unload
</label>
</div>
<!-- Multiple Checkboxes -->
<!-- values are still load & unload. Figure out how these save -->
<div id="movingtruck" class="control-group">
<p> Do you need a moving truck (flat rate $125) </p>
<label class="radio">
<input type="radio" name="radios" value="Yes" checked="checked">
Yes
</label>
<label class="radio">
<input type="radio" name="radios" value="No">
No
</label>
</div>
<!-- If you select either "load" or just "unload" this form should show. If both load & unload are selected, this does not show.-->
<div id="radios" class="control-group">
<p> Do you live in a dorm or greekhouse? </p>
<label class="radio">
<input type="radio" name="radios" value="Greek" checked="checked">
Yes
</label>
<label class="radio">
<input type="radio" name="radios" value="NoGreek">
No
</label>
</div>
<!-- if "yes" is selected above, then this should show. If "no" is selected above, this should hide.-->
<div id="dorms" class="control-group">
<label class="control-label" for="dorm">
<i class="error-warning cb-icon cb-icon-warning"></i>
Dorm:
</label>
<div class="controls">
<select require="true" name="dorm">
<option value="">-- Choose your dorm --</option>
{% for dorm in dorms %}<option value="{{ dorm.id }}">{{ dorm.name }}</option>{% endfor %}
</select>
</div>
</div>
<!-- if "yes" is selected above, then this should hide. If "no" is selected above, this should hide.-->
<div id="greek" class="control-group">
<label class="control-label">Greekhouse</label>
<div class="controls">
<input id="textinput" name="textinput" type="text" placeholder="name of your house" class="input-xlarge">
</div>
</div>
<!-- Show when "unload" is checked as well as when "no" selected. If "yes" is selected, this should hide -->
<div class="row" id="hops">
<div class="span6 control-group">
<label class="control-label" for="bellhops">
<i class="error-warning cb-icon cb-icon-warning"></i>
How many Bellhops?
</label>
<div class="controls">
<select name="bellhops">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
</select>
</div>
</div>
</div>
<!-- Show when "unload" is checked as well as when "no" selected. If "yes" is selected, this should hide -->
<div id="bellhop-hours" class="span6 control-group">
<label class="control-label" for="hours">
<i class="error-warning cb-icon cb-icon-warning"></i>
How many hours?
</label>
<div class="controls">
<select name="hours" id="hours">
<option value="1.5">One and a half</option>
<option value="2">Two</option>
<option value="2.5">Two and a half</option>
<option value="3">Three</option>
<option value="3.5">Three and a half</option>
<option value="4">Four</option>
<option value="4.5">Four and a half</option>
<option value="5">Five</option>
<option value="5.5">Five and a half</option>
<option value="6">Six</option>
<option value="6.5">Six and a half</option>
<option value="7">Seven</option>
<option value="7.5">Seven and a half</option>
<option value="8">Eight</option>
</select>
</div>
</div>
<!-- BUTTON -->
<div class="form-controls">
<button class="btn btn-lime">Reserve Your Bellhops!</button>
</div>
</form>
Here is the JS that I am using
// Inputs for Load & Unload
$("input[value=Load]").click(function(){
if($(this).is(":checked")){
$("#dorms, #greek,").show();
}else{
$("#dorms, #greek").hide();
}
});
$("input[value='Unload']").click(function(){
if($(this).is(":checked")){
$("#movingtruck").show();
}else{
$("#hops, #hours").hide();
}
});
// Inputs for Do you need a moving truck?
$("input[value='Yes']").click(function(){
if($(this).is(":checked")){
$("#hops, #bellhop-hours").show();
}
});
$("input[value='No']").click(function(){
if($(this).is(":checked")){
$("#hops, #bellhop-hours").show();
}
});
// Radios for "Do you live in a dorm or greekhouse?"
// Radios arent hiding when selecting "nogreek" Check on radios.
$("input[value='Greek']").click(function(){
if($(this).is(":checked")){
$("#dorms, #greek").show();
}else{
$("#dorms, #greek, #hops").hide();
}
});
$("input[value='NoGreek']").click(function(){
if($(this).is(":checked")){
$("#hops, #hours").show();
}else{
$("#dorms, #greek").hide();
}
});
And a tiny bit of CSS
/* Hiding form elements */
#greek, #dorm-selector, #hops, #dorms, #hidden, #movingtruck, #bellhop-hours{
display:none;
}

I have a work in progress fiddle which does something similar to yours (well, show and hide and add elements) You can check it out here: http://jsfiddle.net/Hux2L/
A question here: i'm not quite sure about your load and unload and do you want to show and hide accordingly? from what i see, after i clicked on something, something will show up but some won't show anything. ;) it's like a surprise game.
EDIT:
You can give the 2 checkboxes an ID each:
<input type="checkbox" name="checkboxes" value="Load" id="load">
<input type="checkbox" name="checkboxes" value="Unload" id="unload">
Then you can specify the condition as :
if ($('#load').is(':checked ')&&$('#unload').is(':checked')){
//do what you want here
$('#dorms').hide();
$('#movingtruck').show();
}