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>

ASP.net razor pages and multi-select, posting all items in select

I have a form which has two selects, one on the left, one on the right. One on the left to list the items to add, two buttons, one to add and one to remove items to another select using a bit of jQuery. Both selects have the multiple="multiple" attributes set.
The problem is, when I submit the form, only items selected in the right hand select are posted in the form data, which is expected. I have added the following bit of jQuery to select all of the items in the select list on submit, but it still only sends the data of the single selected item before the submit button is pressed:
$("#pageForm").submit(function (e) {
$("#controlGradesList option").prop("selected", "selected");
});
This is my form markup:
<form method="post" id="pageForm">
#Html.HiddenFor(x => x.Data.Ref)
<div class="row">
<div class="col-sm-5">
<h3>All grades</h3>
<div class="form-group">
<input type="text" id="filterBox" class="form-control" placeholder="Filter grades" />
</div>
<div class="form-group">
<select class="form-control" size="20" multiple="multiple" id="gradesList" asp-items="#(new SelectList(Model.Data.AvailableGrades, "Ref", "Display"))">
</select>
</div>
</div>
<div class="col-sm-2">
<div class="push-down-arrows">
<div class="form-group">
<input type="button" class="btn btn-primary btn-block" id="addButton" value=">>" title="Add grade to control group" />
</div>
<div class="form-group">
<input type="button" class="btn btn-primary btn-block" id="removeButton" value="<<" title="Remove grade from control group" />
</div>
</div>
</div>
<div class="col-sm-5">
<h3>Associated grades</h3>
<div class="grades-padding-top">
<div class="form-group">
<select class="form-control" size="20" multiple="multiple" id="controlGradesList" asp-for="Data.AssociatedGradeRefs" asp-items="#(new SelectList(Model.Data.AssociatedGrades, "Ref", "Display"))">
</select>
</div>
</div>
</div>
</div>
<hr />
<button class="btn btn-primary" type="submit"><i class="fa fa-save"> </i>Save</button>
| Back to previous page
</form>
What am I missing here?

I needed to use and onclick event on the button to select all of the options in the select, prevent default and submit the form:
<button class="btn btn-primary" type="submit" onclick="submitForm(event)"><i class="fa fa-save"> </i>Save</button>
and
function submitForm(e) {
$("#controlGradesList option").prop("selected", true);
e.preventDefault();
$('#pageForm')[0].submit();
}

How can multiple computations when I automatically add other fields, then save all the data?

I'm trying to make calculations on multiple fields having different data but when i add them calculations are only done on the first set of fields but the other fields i add, the javascript does not seem to work.
Plus i want to save those data in an array.
Here's my HTML code to display the select box and the input fields
<div id="addon_details">
<div class="form-group col-md-6">
<label for="name">Select Addon Package</label>
<select id="addon" name="type[]" class="form-control">
<option value="Radio">Radio</option>
<option value="Lamp">Lamp</option>
<option value="Phone">Phone</option>
<option value="Battery">Battery</option>
<option value="Antenna">Antenna</option>
</select>
</div>
<div class="form-group col-md-2">
<label for="name">Quantity</label>
<input type="number" class="form-control" name="quantity[]" placeholder="Qty" id="qty[]" onchange="calculate();">
</div>
<div class="form-group col-md-4">
<label for="name">Total Price</label>
<input type="number" class="form-control" name="total[]" placeholder="" readonly="" id="price">
</div>
</div>
Then when I click on add package button it adds another set of fields
<div class="form-group col-md-12 col-md-offset-2">
<button type="button" class="btn btn-info btn-addon m-b-sm"><i class="fa fa-plus" aria-hidden="true" id="add_success"></i>Add Package</button>
<button type="submit" class="btn btn-info btn-addon m-b-sm"><i class="fa fa-refresh" aria-hidden="true"></i>Upgrade</button>
<button type="button" class="btn btn-default btn-addon m-b-sm"><i class="fa fa-close" aria-hidden="true"></i>Cancel</button>
</div>
Also here's the javascript to compute:
function calculate(){
var qty = document.getElementById('qty[]').value;
var radio = 1000 ;
var price = "";
if(document.getElementById('addon').value == "Radio") {
price = parseInt(qty) * radio;
document.getElementById('price').value = price;
}
}
But unfortunately for me, I can only do calculation on the first set of fields but the other fields the calculation are not possible.
Below you can see what I'm trying to do graphically
Any help is appreciated. Thank you!

As #Barmar suggests, you need to make your ID's unique. In your example your initial addon id could be addon1 like this:
<select id="addon1" name="type[]" class="form-control">...</select>
As you use your add package button, you would have to generate the next number for the select, like:
<select id="addon2" name="type[]" class="form-control">...</select>
<select id="addon3" name="type[]" class="form-control">...</select>
etc...
You could then have your function traverse all the fields with partial matches on addon id. This SO link would help you understand how you might do that.

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.

Instead of adding another element It is landing to a another page

I have created a modal list using bootstrap and Actually I have a form list created and when entered details, it will land me to a desired page. Register button performs this function. But now I have also added a dependent dropdown(Skills,Level) options. It also has a add button and Whenever I am clicking on add button instead of adding another elements,its landing me to that same page and displays added successfully message. Can anyone help me?
<form id='work' method="post" action="registerdb.php">
<div class="form-group">
<label for="recipient-name" class="control-label">First Name</label>
<div class="input-group"><span class="input-group-addon" id="basic-addon1">
<span class="glyphicon glyphicon-user"></span></span>
<input type="text" id = "firstname" name = "firstname" class="form-control"
placeholder="First Name" aria-describedby="basic-addon1">
</div>
</div>
<div class="form-group"><label for="exampleInputEmail1">Last Name</label>
<div class="input-group"><span class="input-group-addon" id="basic-addon1">
<span class="glyphicon glyphicon-user"></span></span>
<input type="text" id = "lastname" name = "lastname" class="form-control"
placeholder="Last Name" aria-describedby="basic-addon1">
</div>
</div>
<div class="form-group">
<label>Company Name</label>
<div class="input-group"><span class="input-group-addon" id="basic-addon1">
<span class="glyphicon glyphicon-briefcase"></span></span>
<input type="text" id= "companyname" name = "companyname" class="form-
control" placeholder="Company Name" aria-describedby="basic-addon1">
</div>
</div>
<div class="form-group"><label for="exampleInputEmail1">E-mail ID</label>
<div class="input-group"><span class="input-group-addon" id="basic-addon1">
<span class="glyphicon glyphicon-envelope"></span></span>
<input type="text" id = "emailid" name = "emailid" class="form-control"
placeholder="Email" aria-describedby="basic-addon1">
</div>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<div class="input-group"><span class="input-group-addon" id="basic-addon1">
<span class="glyphicon glyphicon-asterisk"></span></span>
<input type="password" id = "password" name = "password" class="form-
control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Type of Industry</label>
<div class="input-group">
<select class="input-medium bfh-countries" data-country="US">
<option value="" disabled="disbaled" selected="selected">Please Select a
Value</option>
<option value="Accounting">Accounting</option>
<option value="Aeronautical">Aeronautical</option>
<option value="Agriculture">Agriculture</option>
<option value="Science and Research">Science and Research</option>
</select>
</div>
</div>
</div>
<hr>
<div align="center">
<button type="button" class="btn btn-primary" data-
dismiss="modal">Close</button>
<input class="btn btn-primary" type = "submit" name = "submit" value =
"register" />
</div>
</form>
<script>
$( "#add" ).click(function() {
var row = $("#wrapper-1").clone();
//row.remove("#add");
$('#wrapper').append(row);
});
</script>
<div id="wrapper" width="100%">
<div id="wrapper-1" style="float: left; width: 85%;">
<div id="first" style="float: left; width: 65%;">
<label for="skills">Skills</label>
<select id="one" class="step1">
<option value="">Please select an option</option>
<option>C</option>
<option>C++</option>
<option>Java</option>
<option>PHP</option>
</select>
</div>
<div class="general" style="float: left; width: 35%;">
<label for="skills">Level</label>
<select id="two" class="step2">
<option value="">option</option>
<option>Begineer</option>
<option>Expert</option>
<option>Advanced</option>
</select>
</div>
</div>
<div class="add-general" style="float: left; width: 15%;">
<button id="add">add</button>
</div>
</div>

Your jsfiddle is messed up, you should load external CSS and scripts using the "external" feature on the left. And obviously your local files will not be accessible, so use absolute paths. I took the time to set it up properly this time.
Your HTML also looks messy, but browsers still understand it.
As for your unexpected behaviour, I think this post applies to your situation: Form is submitted when I click on the button in form. How to avoid this?
In essence: you just need to specify a type attribute (with value different from "submit" obviously) so that your "Add" button stops acting as a submit button.
<button id="add" type="button">add</button>
You also have a problem with attaching event listener on your "Add" button: your code must be executed after your button exists in DOM.
2 simple methods:
Put your script tag after your button HTML.
Have your code executed after DOM is ready / loaded (e.g. use jQuery(document).ready(function() { /** your code **/}) to request jQuery to execute it once DOM is ready).
jQuery(document).ready(function() {
$( "#add" ).click(function() {
var row = $("#wrapper-1").clone();
// You should change the id to avoid multiple elements
// with same id in your DOM...
$('#wrapper').append(row);
});
});
Updated jsfiddle: http://jsfiddle.net/qc3tu1f1/4/