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>

how to clone div bassed select option

i have select option with count of numbers so i need now when user choose any number clone div tag personal information by this number ex: - select 8 clone 8 time ..
i try do that by use( for loop )but i have problem when run i see clone over this number ex:- choose 8 clone 16 time
this is html code and my try js code
$('#c3').change(function() {
$('.cloneHere').empty();
var count = $('#c3').val();
for (i = 1; count > i; i++) {
var clone = $('.rowClone').clone();
$('.cloneHere').append(clone);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='col-xs-3'>
<label for="">count of person</label>
<select class='form-control select2' name="" id="c3">
<option value="" selected disabled hidden>Choose here</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='col-md-12'>
<div class='box box-primary'>
<div class='box-header with-border'>
<h3 class='box-title'>Information of Person</h3>
</div>
<div class='form-group'>
<div class='box-body rowClone2'>
<div class=' row'>
<div class=' col-sm-3'><label for="">Person 1</label></div>
</div>
<div class='row rowClone'>
<div class='col-xs-6 col-md-3'>
<input type="text" class="form-control">
</div>
<div class='col-xs-6 col-md-3'>
<input type="text" class="form-control">
</div>
<div class='col-xs-6 col-md-3'>
<input type="tel" class="form-control">
</div>
<div class='col-xs-6 col-md-3'>
<input type="text" class="form-control">
</div>
</div>
<br>
<div class="row cloneHere">
</div>
</div>

The problem you are facing comes from this line: var clone = $('.rowClone').clone();
the first clone is fine because only 1 .rowClone exist, next time multiple .rowClone exist and it appends all of those.
You have 2 solutions, either use var clone = $('.rowClone:first').clone(); or move var clone = $('.rowClone').clone(); before your for loop
Demo of the problem, run it and look at the console
$('#c3').change(function() {
$('.cloneHere').empty();
var count = $('#c3').val();
for (i = 1; count > i; i++) {
console.log("Number of .rowClone that exist = " + $('.rowClone').length)
var clone = $('.rowClone').clone();
$('.cloneHere').append(clone);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='col-xs-3'>
<label for="">count of person</label>
<select class='form-control select2' name="" id="c3">
<option value="" selected disabled hidden>Choose here</option>
<option value="8">8</option>
</select>
</div>
<div class='col-md-12'>
<div class='box box-primary'>
<div class='box-header with-border'>
<h3 class='box-title'>Information of Person</h3>
</div>
<div class='form-group'>
<div class='box-body rowClone2'>
<div class=' row'>
<div class=' col-sm-3'><label for="">Person 1</label></div>
</div>
<div class='row rowClone'>
<div class='col-xs-6 col-md-3'>
<input type="text" class="form-control">
</div>
<div class='col-xs-6 col-md-3'>
<input type="text" class="form-control">
</div>
<div class='col-xs-6 col-md-3'>
<input type="tel" class="form-control">
</div>
<div class='col-xs-6 col-md-3'>
<input type="text" class="form-control">
</div>
</div>
<br>
<div class="row cloneHere">
</div>
</div>
</div>
</div>
</div>

dropdown in a foreach loop

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.

Last-child not working inside iteration of div

In browser, the HTML is generated dynamically and is rendered as
<div id="dynamic-relationship-details">
<div id="count-status0" class="relationship-container form-group">
<div class="col-sm-1"></div>
<div class="col-sm-2">
<select id="relationship-type0" class="form-control"><option value="">Select Relationship</option><option value="Father">Father</option><option value="Mother">Mother</option><option value="Brother">Brother</option><option value="Sister">Sister</option><option value="Spouse">Spouse</option><option value="Guardian">Guardian</option></select>
</div>
<div class="col-sm-3">
<input type="text" name="relationship-type-name0" id="relationship-type-name0" class="form-control" placeholder="Name"></div><div class="col-sm-2"><input type="text" name="relationship-type-contact0" id="relationship-type-contact0" class="form-control" placeholder="Contact Number">
</div>
<button value="count-status0" class="remove-relationship-field btn btn-danger"><i class="fa fa-trash"></i></button>
</div><div id="count-status1" class="relationship-container form-group">
<div class="col-sm-1"></div>
<div class="col-sm-2">
<select id="relationship-type1" class="form-control"><option value="">Select Relationship</option><option value="Father">Father</option><option value="Mother">Mother</option><option value="Brother">Brother</option><option value="Sister">Sister</option><option value="Spouse">Spouse</option><option value="Guardian">Guardian</option></select>
</div>
<div class="col-sm-3">
<input type="text" name="relationship-type-name1" id="relationship-type-name1" class="form-control" placeholder="Name"></div><div class="col-sm-2"><input type="text" name="relationship-type-contact1" id="relationship-type-contact1" class="form-control" placeholder="Contact Number">
</div>
<button value="count-status1" class="remove-relationship-field btn btn-danger"><i class="fa fa-trash"></i></button>
</div>
</div>
The code is
// Relationship details Array
$(".relationship-container").each(function(i, obj) {
var $this = $(this);
$this.find("select").each(function() {
var relationshipTypeValue = $(this).val();
var relationshipName =$this.find("input[type=text]:first-child").val();
var relationshipContactNumber =$this.find("input[type=text]:last-child").val();
var innerRelationshipArray = {};
innerRelationshipArray = {
relationshipTypeValue: relationshipTypeValue,
relationshipName: relationshipName,
relationshipContactNumber: relationshipContactNumber
};
relationship_details_array.push(innerRelationshipArray);
});
});
I am trying to fetch values of contact numbers i.e with id's relationship-type-contact(n) values in the line "
var relationshipContactNumber =$this.find("input[type=text]:last-child").val();"
This is fetching values of first-child textboxes in the variable relationshipContactNumber in the loop.
Please help !!!

This should work, use the .first() and .last() selectors.
Another way, if you have access to alter the HTML, is to add class names for the input fields and select them by using that instead.
function getData() {
var relationship_details_array = [];
// Relationship details Array
$(".relationship-container").each(function(i, obj) {
var $this = $(this);
$this.find("select").each(function() {
var relationshipTypeValue = $(this).val();
var relationshipName = $this.find("input[type=text]").first().val();
var relationshipContactNumber = $this.find("input[type=text]").last().val();
var innerRelationshipArray = {};
innerRelationshipArray = {
relationshipTypeValue: relationshipTypeValue,
relationshipName: relationshipName,
relationshipContactNumber: relationshipContactNumber
};
relationship_details_array.push(innerRelationshipArray);
});
});
console.log(relationship_details_array);
}
$("#getData").on("click", getData);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="getData">Show data in console log</button>
<div id="dynamic-relationship-details">
<div id="count-status0" class="relationship-container form-group">
<div class="col-sm-1"></div>
<div class="col-sm-2">
<select id="relationship-type0" class="form-control">
<option value="">Select Relationship</option>
<option value="Father">Father</option>
<option value="Mother" selected>Mother</option>
<option value="Brother">Brother</option>
<option value="Sister">Sister</option>
<option value="Spouse">Spouse</option>
<option value="Guardian">Guardian</option>
</select>
</div>
<div class="col-sm-3">
<input type="text" name="relationship-type-name0" id="relationship-type-name0" class="form-control" value="Mommy" placeholder="Name">
</div>
<div class="col-sm-2">
<input type="text" name="relationship-type-contact0" id="relationship-type-contact0" class="form-control" value="1234" placeholder="Contact Number">
</div>
</div>
<div id="count-status1" class="relationship-container form-group">
<div class="col-sm-1"></div>
<div class="col-sm-2">
<select id="relationship-type1" class="form-control">
<option value="">Select Relationship</option>
<option value="Father" selected>Father</option>
<option value="Mother">Mother</option>
<option value="Brother">Brother</option>
<option value="Sister">Sister</option>
<option value="Spouse">Spouse</option>
<option value="Guardian">Guardian</option>
</select>
</div>
<div class="col-sm-3">
<input type="text" name="relationship-type-name1" id="relationship-type-name1" class="form-control" value="Daddy" placeholder="Name">
</div>
<div class="col-sm-2">
<input type="text" name="relationship-type-contact1" id="relationship-type-contact1" class="form-control" value="5678" placeholder="Contact Number">
</div>
</div>
</div>

Need help writing a Javascript to add values

I need help in writing JavaScript code for my form. I need to add the values in the text fields(credit cards, payday loans and unsecured personal loans) and if the total gets more than or equal to $10000, on submit it should take the user to page 1, else page 2. I just want to add the first three fields, it doesn't matter what the user inputs in the other fields. Here's my form:
<form action="/fsg?pageId=0bd004f9-aabc-486e-be09-bf2621555e3e&variant=b" method="POST">
<input type="hidden" name="pageId" value="0bd004f9-aabc-486e-be09-bf2621555e3e"><input type="hidden" name="pageVariant" value="b">
<fieldset class="clearfix" style="width: 297px; height: -17px;">
<div class="lp-pom-form-field clearfix" id="container_What_state_do_you_live_in">
<label for="What_state_do_you_live_in" class="main lp-form-label" id="label_What_state_do_you_live_in">
State? *</label><select id="What_state_do_you_live_in" name="What_state_do_you_live_in" class="text form_elem_What_state_do_you_live_in">
<option value="">Select a State</option>
<option value="Arizona">Arizona</option>
<option value="California">California</option>
<option value="Florida">Florida</option>
<option value="Michigan">Michigan</option>
<option value="Nevada">Nevada</option>
<option value="New York">New York</option>
<option value="Pennsylvania">Pennsylvania</option>
<option value="Texas">Texas</option>
<option value="Virginia">Virginia</option>
<option value="I reside in another state.">I reside in another state.</option></select>
</div>
<div class="lp-pom-form-field clearfix" id="container_credit_cards">
<label for="credit_cards" class="main lp-form-label" id="label_credit_cards">Credit Cards</label><input type="text" id="credit_cards" name="credit_cards" class="text form_elem_credit_cards">
</div>
<div class="lp-pom-form-field clearfix" id="container_payday_loans">
<label for="payday_loans" class="main lp-form-label" id="label_payday_loans">Payday Loans</label><input type="text" id="payday_loans" name="payday_loans" class="text form_elem_payday_loans">
</div>
<div class="lp-pom-form-field clearfix" id="container_unsecured_personal_loans">
<label for="unsecured_personal_loans" class="main lp-form-label" id="label_unsecured_personal_loans">Unsecured Personal Loans</label><input type="text" id="unsecured_personal_loans" name="unsecured_personal_loans" class="text form_elem_unsecured_personal_loans">
</div>
<div class="lp-pom-form-field clearfix" id="container_student_loans">
<label for="student_loans" class="main lp-form-label" id="label_student_loans">Student Loans</label><input type="text" id="student_loans" name="student_loans" class="text form_elem_student_loans">
</div>
<div class="lp-pom-form-field clearfix" id="container_auto_loan">
<label for="auto_loan" class="main lp-form-label" id="label_auto_loan">Auto Loan</label><input type="text" id="auto_loan" name="auto_loan" class="text form_elem_auto_loan">
</div>
<div class="lp-pom-form-field clearfix" id="container_medical_bills">
<label for="medical_bills" class="main lp-form-label" id="label_medical_bills">Medical Bills</label><input type="text" id="medical_bills" name="medical_bills" class="text form_elem_medical_bills">
</div>
<input type="submit" name="submit" id="submit" value="Submit">
</form>

var total = $('#Creditcards').val() + $('#Payday').val() + $('#Unsecured').val();
$('.submit').click(function(){
if(total<10000)
{window.href.location = "x"}
else{
window.href.location = "y";
}
})