We Keep Coding

How To Use JavaScript To Copy Text From corrosponded address field To permanent address field?

I am creating the address field of the form. I have made City List Depending on State by using Ajax. When I check the checkbox, the value of the corresponded address is not coming in the permanent address. Could it be but i am struggling with this. please check my code and tell me its answer.
Code:-
<div class="corrospond-address">
<div class="form-group state">
<div class="row">
<span class="col-sm-4"> State* </span>
<div class="col-sm-8">
<select name="customer_state" class="form-control">
<option value="">choose state</option>
</select>
</div>
</div>
</div>
<div class="form-group city">
<div class="row">
<span class="col-sm-4"> City Name*</span>
<div class="col-sm-8">
<select name="customer_city" class="form-control">
<option value="">choose city</option>
</select>
</div>
</div>
</div>
</div>
<div class="my-5">
<input type="checkbox" class="p_address" name="">
<h6 style="display: inline-block;">same paramanent address </h6>
</div>
<div class="permanent-address">
<div class="form-group state">
<div class="row">
<span class="col-sm-4"> State* </span>
<div class="col-sm-8">
<select name="customer_permanent_state" class="form-control">
<option value="">choose state</option>
</select>
</div>
</div>
</div>
<div class="form-group city">
<div class="row">
<span class="col-sm-4"> City Name*</span>
<div class="col-sm-8">
<select name="customer_permanent_city" class="form-control">
<option value="">choose city</option>
</select>
</div>
</div>
</div>
</div>
js file
<script>
$(document).ready(function(){
$.ajax({
url:"php/states.php",
type:'post',
dataType:'json',
contentType:false,
processData:false,
success:function(data){
$('.state select').append(data);
},
error:function(){
console.log("ERROR IN AJAX");
}
});
});
$(document).on('change','.p_address',function(){
if($(this).is(":checked")){
let state = $('.corrospond-address .state select').val();
let city = $('.corrospond-address .city select').val();
$('.permanent-address .state select').val(state);
$('.permanent-address .city select').val(city);
}
});
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="corrospond-address">
<div class="form-group state">
<div class="row">
<span class="col-sm-4"> State* </span>
<div class="col-sm-8">
<select name="customer_state" class="form-control">
<option value="Oklahama">Oklahama</option>
</select>
</div>
</div>
</div>
<div class="form-group city">
<div class="row">
<span class="col-sm-4"> City Name*</span>
<div class="col-sm-8">
<select name="customer_city" class="form-control">
<option value="">choose city</option>
</select>
</div>
</div>
</div>
</div>
<div class="my-5">
<input type="checkbox" class="p_address" name="">
<h6 style="display: inline-block;">same paramanent address </h6>
</div>
<div class="permanent-address">
<div class="form-group state">
<div class="row">
<span class="col-sm-4"> State* </span>
<div class="col-sm-8">
<select name="customer_permanent_state" class="form-control">
<option value="">choose state</option>
<option value="Oklahama">Oklahama</option>
</select>
</div>
</div>
</div>
<div class="form-group city">
<div class="row">
<span class="col-sm-4"> City Name*</span>
<div class="col-sm-8">
<select name="customer_permanent_city" class="form-control">
<option value="">choose city</option>
</select>
</div>
</div>
</div>
</div>
<script>
$(document).on('change','.p_address',function(){
if($(this).is(":checked")){
let state = $('.corrospond-address .state select').val();
let city = $('.corrospond-address .city select').val();
$('.permanent-address .state select').val(state);
$('.permanent-address .city select').val(city);
}
});
</script>
Check out this edit, it works. But most importantly when testing this code in your browser look at what VALUE is showing, and Where that value is taken FROM.
<select name="customer_state" class="form-control">
<option value="Oklahama">Oklahama</option>
</select>
As you can see NOW it actually has an value of Oklahama
Before it was like this:
<select name="customer_state" class="form-control">
<option value="">Oklahama</option>
</select>

form drop-down selection based input trigger in jquery

my form has drop-down form invoice type which has two value when user select services i want to hide from_date and to_date field from form, when user select milestone i want to hide upload_file input from form.
<form id="raise-invoice-form-validation" accept-charset="UTF-8" method="post">
<div class="row">
<div class="field columns large-3">
<label class="required" for="raise_invoice_invoice_type">Invoice type</label>
<select name="raise_invoice[raised_invoice_type]" id="raise_invoice_raised_invoice_type"><option value="">Select One</option>
<option value="0">services</option>
<option value="1">milestones</option></select>
</div>
<div class="field columns large-3">
<label class="required" for="raise_invoice_from_date">From date</label>
<input class="datepicker hasDatepicker" type="date" name="raise_invoice[from_date]" id="raise_invoice_from_date"><button type="button" class="ui-datepicker-trigger"><img src="/images/calendar.gif" alt="..." title="..."></button>
</div>
<div class="field columns large-3">
<label class="required" for="raise_invoice_to_date">To date</label>
<input class="datepicker hasDatepicker" type="date" name="raise_invoice[to_date]" id="raise_invoice_to_date"><button type="button" class="ui-datepicker-trigger"><img src="/images/calendar.gif" alt="..." title="..."></button>
</div>
<input value="20" type="hidden" name="raise_invoice[payment_milestone_id]" id="raise_invoice_payment_milestone_id">
<div class="field columns large-2">
<label for="raise_invoice_upload_file">Upload file</label>
<input type="file" name="raise_invoice[raised_invoice_file]" id="raise_invoice_raised_invoice_file">
</div>
</div>
<div class="row">
<div class="field columns large-3">
<label for="raise_invoice_raised_invoice_for">Raised invoice for</label>
<select name="raise_invoice[raised_invoice_for]" id="raise_invoice_raised_invoice_for"><option value="">Select One</option>
<option value="0">Performa Invoice</option>
<option value="1">Tax Invoice</option></select>
<div class="actions text-center">
<input type="submit" value="Raise invoice" class="button primary button-margin-top" data-disable-with="Raise invoice">
</div>
</form>

You can use simply change function to check which option was selected and hide the relevant divs accordingly.
//hide on load
$('.from_date, .to_date').hide()
$('.upload_field').hide()
//watch the change
$(document).on('change', '#raise_invoice_raised_invoice_type', function() {
if ($(this).val() == '0') {
$('.from_date, .to_date').hide()
$('.upload_field').show()
} else if ($(this).val() == '1') {
$('.upload_field').hide()
$('.from_date, .to_date').show()
} else {
$('.upload_field').hide()
$('.from_date, .to_date').hide()
}
})
Live Demo:
//hide on load
$('.from_date, .to_date').hide()
$('.upload_field').hide()
//watch the change
$(document).on('change', '#raise_invoice_raised_invoice_type', function() {
if ($(this).val() == '0') {
$('.from_date, .to_date').hide()
$('.upload_field').show()
} else if ($(this).val() == '1') {
$('.upload_field').hide()
$('.from_date, .to_date').show()
} else {
$('.upload_field').hide()
$('.from_date, .to_date').hide()
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="raise-invoice-form-validation" accept-charset="UTF-8" method="post">
<div class="row">
<div class="field columns large-3">
<label class="required" for="raise_invoice_invoice_type">Invoice type</label>
<select name="raise_invoice[raised_invoice_type]" id="raise_invoice_raised_invoice_type">
<option value="" selected>Select One</option>
<option value="0">services</option>
<option value="1">milestones</option>
</select>
</div>
<div class="field columns large-3 from_date">
<label class="required" for="raise_invoice_from_date">From date</label>
<input class="datepicker hasDatepicker" type="date" name="raise_invoice[from_date]" id="raise_invoice_from_date"><button type="button" class="ui-datepicker-trigger"><img src="/images/calendar.gif" alt="..." title="..."></button>
</div>
<div class="field columns large-3 to_date">
<label class="required" for="raise_invoice_to_date">To date</label>
<input class="datepicker hasDatepicker" type="date" name="raise_invoice[to_date]" id="raise_invoice_to_date"><button type="button" class="ui-datepicker-trigger"><img src="/images/calendar.gif" alt="..." title="..."></button>
</div>
<input value="20" type="hidden" name="raise_invoice[payment_milestone_id]" id="raise_invoice_payment_milestone_id">
<div class="field columns large-2 upload_field">
<label for="raise_invoice_upload_file">Upload file</label>
<input type="file" name="raise_invoice[raised_invoice_file]" id="raise_invoice_raised_invoice_file">
</div>
</div>
<div class="row">
<div class="field columns large-3">
<label for="raise_invoice_raised_invoice_for">Raised invoice for</label>
<select name="raise_invoice[raised_invoice_for]" id="raise_invoice_raised_invoice_for">
<option value="">Select One</option>
<option value="0">Performa Invoice</option>
<option value="1">Tax Invoice</option>
</select>
<div class="actions text-center">
<input type="submit" value="Raise invoice" class="button primary button-margin-top" data-disable-with="Raise invoice">
</div>
</form>

You can use toggle(boolean) and use selected value comparison to create the boolean
$('#raise_invoice_raised_invoice_type').change(function() {
const val = $(this).val();
$('.from_date, .to_date').toggle(val === '0')
$('.upload_field').toggle(val === '1');
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="raise-invoice-form-validation" accept-charset="UTF-8" method="post">
<div class="row">
<div class="field columns large-3">
<label class="required" for="raise_invoice_invoice_type">Invoice type</label>
<select name="raise_invoice[raised_invoice_type]" id="raise_invoice_raised_invoice_type">
<option disabled selected>Select One</option>
<option value="0">services</option>
<option value="1">milestones</option>
</select>
</div>
<div class="field columns large-3 from_date">
<label class="required" for="raise_invoice_from_date">From date</label>
<input class="datepicker hasDatepicker" type="date" name="raise_invoice[from_date]" id="raise_invoice_from_date"><button type="button" class="ui-datepicker-trigger"><img src="/images/calendar.gif" alt="..." title="..."></button>
</div>
<div class="field columns large-3 to_date">
<label class="required" for="raise_invoice_to_date">To date</label>
<input class="datepicker hasDatepicker" type="date" name="raise_invoice[to_date]" id="raise_invoice_to_date"><button type="button" class="ui-datepicker-trigger"><img src="/images/calendar.gif" alt="..." title="..."></button>
</div>
<input value="20" type="hidden" name="raise_invoice[payment_milestone_id]" id="raise_invoice_payment_milestone_id">
<div class="field columns large-2 upload_field">
<label for="raise_invoice_upload_file">Upload file</label>
<input type="file" name="raise_invoice[raised_invoice_file]" id="raise_invoice_raised_invoice_file">
</div>
</div>
<div class="row">
<div class="field columns large-3">
<label for="raise_invoice_raised_invoice_for">Raised invoice for</label>
<select name="raise_invoice[raised_invoice_for]" id="raise_invoice_raised_invoice_for">
<option value="">Select One</option>
<option value="0">Performa Invoice</option>
<option value="1">Tax Invoice</option>
</select>
<div class="actions text-center">
<input type="submit" value="Raise invoice" class="button primary button-margin-top" data-disable-with="Raise invoice">
</div>
</form>

How to get Id option selected on modal show using JS?

I tried to get the ID on the option selected when the modal was in show state.
$("#modal-form").on('shown.bs.modal', function(e) {
console.log("CHANGE");
var id = $("#customer option:selected").val();
console.log(id);
});
<div class="form-group">
<label for="customer" class="col-md-2 control-label">Customer</label>
<div class="col-md-9">
<select class="form-control" id="customer" name="customer" class="form-control">
<option value="John">John</option>
<option value="Alex">Alex</option>
</select>
<span class="help-block with-errors"> </span>
</div>
</div>

Hope this will be helpful.
$("#customer").change(function(e) {
alert($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label for="customer" class="col-md-2 control-label">Customer</label>
<div class="col-md-9">
<select class="form-control" id="customer" name="customer" class="form-control">
<option value="John">John</option>
<option value="Alex">Alex</option>
</select>
<span class="help-block with-errors" </span>
</div>
</div>

I find out you have not selected any option and you are checking for select option, select any one option and check it out.
$("#modal-form").on('shown.bs.modal', function(e) {
console.log("CHANGE");
var id = $("#customer option:selected").val();
console.log(id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label for="customer" class="col-md-2 control-label">Customer</label>
<div class="col-md-9">
<select class="form-control" id="customer" name="customer" class="form-control">
<option value="John" selected>John</option>
<option value="Alex">Alex</option>
</select>
<span class="help-block with-errors"> </span>
</div>
</div>

Try the following code. Find the element from the parent,
$(document).on('shown.bs.modal', '#modal-form', function() {
console.log("CHANGE");
//var id = $("#customer>option:selected").val();
var id = $('#customer').find(":selected").val();
alert(id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<label for="customer" class="col-md-2 control-label">Customer</label>
<div class="col-md-9">
<form id="modal-form">
<select class="form-control" id="customer" name="customer" class="form-control">
<option value="John">John</option>
<option value="Alex">Alex</option>
</select>
</form>
<span class="help-block with-errors" </span>
</div>
</div>

Get inputs values from a form : JavaScript

I have a dynamic form Like this in image :
How can I get each adult separately in variable like this :
[["Mr.","aa","bb"],["Mrs","cc","dd"],["Dr.","ee","ff"]]
I submit the form in Ajax, so I need this data serialized. I defined class add_pax_adult_x and x is the number of each adult. I have this code below. every this is ok and I can return the data but I need to return this format as I mentioned.
$(document).on('submit','#passenger_details_form',function(event){
var toatalAdults = [];
var adultsPax = [];
for(var x=1; x<=$('#adults').val(); x++){
var inputs = $(".add_pax_adult_"+x);
for(var i = 0; i < inputs.length; i++){
adultsPax.push($(inputs[i]).val())
}
toatalAdults.push(adultsPax);
}
alert(toatalAdults);
});
<div class="col-sm-5 adultsDiv" style="padding-left: 0">
<select id="adults" required="" class="form-control adults" name="no_of_adults">
<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><option value="8">8</option><option value="9">9</option></select>
</div>
<div class="col-sm-12" >
<div class="row passengerDetailsAdults">
<div class="col-sm-6">
<div class="form-group">
<label class="control-label">Adult 1</label>
<select id="pax_title" name="pax_title[]" class="form-control pax_title add_pax_adult_1">
<option value="Mr." selected="">Mr.</option>
<option value="Mrs">Mrs</option>
<option value="Ms.">Ms.</option>
<option value="Miss">Miss</option>
<option value="Dr.">Dr.</option>
<option value="Prof.">Prof.</option>
<option value="Sir">Sir</option>
<option value="Lady">Lady</option>
<option value="">--</option>
</select>
</div>
<div class="form-group">
<label class="control-label">First Name *</label>
<input type="text" value="" maxlength="100" class="form-control adult_fname add_pax_adult_1" name="adult_fname[]" id="adult_fname" required>
</div>
<div class="form-group">
<label class="control-label">Last Name *</label>
<input type="text" value="" maxlength="100" class="form-control adult_lname add_pax_adult_1" name="adult_lname[]" id="adult_lname" required>
<div class="col-sm-6">
<div class="form-group">
<label class="control-label">Adult 2</label>
<select id="pax_title" name="pax_title[]" class="form-control pax_title add_pax_adult_2">
<option value="Mr." selected="">Mr.</option>
<option value="Mrs">Mrs</option>
<option value="Ms.">Ms.</option>
<option value="Miss">Miss</option>
<option value="Dr.">Dr.</option>
<option value="Prof.">Prof.</option>
<option value="Sir">Sir</option>
<option value="Lady">Lady</option>
<option value="">--</option>
</select>
</div>
<div class="form-group">
<label class="control-label">First Name *</label>
<input type="text" value="" maxlength="100" class="form-control adult_fname add_pax_adult_2" name="adult_fname[]" id="adult_fname" required>
</div>
<div class="form-group">
<label class="control-label">Last Name *</label>
<input type="text" value="" maxlength="100" class="form-control adult_lname add_pax_adult_2" name="adult_lname[]" id="adult_lname" required>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="control-label">Adult 3</label>
<select id="pax_title" name="pax_title[]" class="form-control pax_title add_pax_adult_3">
<option value="Mr." selected="">Mr.</option>
<option value="Mrs">Mrs</option>
<option value="Ms.">Ms.</option>
<option value="Miss">Miss</option>
<option value="Dr.">Dr.</option>
<option value="Prof.">Prof.</option>
<option value="Sir">Sir</option>
<option value="Lady">Lady</option>
<option value="">--</option>
</select>
</div>
<div class="form-group">
<label class="control-label">First Name *</label>
<input type="text" value="" maxlength="100" class="form-control adult_fname add_pax_adult_3" name="adult_fname[]" id="adult_fname" required>
</div>
<div class="form-group">
<label class="control-label">Last Name *</label>
<input type="text" value="" maxlength="100" class="form-control adult_lname add_pax_adult_3" name="adult_lname[]" id="adult_lname" required>

Try below code
<?php if(isset($_GET['task']) && $_GET['task'] == 'send'){
$request = [];
foreach($_POST['pax_title'] as $k=>$pax_title){
$request []=[$pax_title,$_POST['adult_fname'][$k],$_POST['adult_lname'][$k]];
}
print_r($request);exit(); } ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Passenger reservation</h1>
<b>Adult :: </b><select class="form-control" id="number_adult">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<hr>
<form action="index.php" method="post" id="passenger_details_form" class="form-inline">
<div id="form_data">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label class="control-label">Adult 1</label>
<select id="pax_title" name="pax_title[]" class="form-control">
<option value="Mr." selected="">Mr.</option>
<option value="Mrs">Mrs</option>
<option value="Ms.">Ms.</option>
<option value="Miss">Miss</option>
<option value="Dr.">Dr.</option>
<option value="Prof.">Prof.</option>
<option value="Sir">Sir</option>
<option value="Lady">Lady</option>
<option value="">--</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label">First Name *</label>
<input type="text" maxlength="100" class="form-control" name="adult_fname[]" id="adult_fname" required>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label">Last Name *</label>
<input type="text" maxlength="100" class="form-control" name="adult_lname[]" id="adult_lname" required>
</div>
</div>
</div>
</div>
<hr>
<button type="submit" class="btn btn-primary">Save</button>
</form>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="">
$(document).ready(function(){
$('#number_adult').on('change',function(){
for(var i=0;i<$(this).val();i++){
var num = parseInt($('#form_data').children().length)+1;
$('#form_data').append('<div class="row"><div class="col-md-4"><div class="form-group"><label class="control-label">Adult '+num+'</label> <select id="pax_title" name="pax_title[]" class="form-control"><option value="Mr." selected="">Mr.</option><option value="Mrs">Mrs</option><option value="Ms.">Ms.</option><option value="Miss">Miss</option><option value="Dr.">Dr.</option><option value="Prof.">Prof.</option><option value="Sir">Sir</option><option value="Lady">Lady</option><option value="">--</option></select></div></div><div class="col-md-4"><div class="form-group"><label class="control-label">First Name *</label> <input type="text" maxlength="100" class="form-control" name="adult_fname[]" id="adult_fname" required></div></div><div class="col-md-4"><div class="form-group"><label class="control-label">Last Name *</label> <input type="text" maxlength="100" class="form-control" name="adult_lname[]" id="adult_lname" required></div></div></div>');
}
});
$(document).on('submit','#passenger_details_form',function(event){
var serialized=$("#passenger_details_form").serialize();
$.ajax({
method: "POST",
url: "index.php?task=send",
data: serialized
})
.done(function( msg ) {
alert( "Data Saved: " + msg );
});
event.preventDefault();
return false;
});
});
</script>

You say you need the data serialized, well you're in luck, just use the <form Element>.serialize() method.
i.e. You have this form
<form id="myForm">
...
</form>
In your script, just do this
var serialized=$("$myForm").serialize();
Voila, it is now serialized in standard AJAX notation.

By using this component, retrieve parent class data

While from the onChange event, I had called a new functions by using this (i.e.) validateCommuteDate($(this)). I can get a value for that class. But how do I get another class value?
My HTML data is:
<div class="inner-row" id="pension-transaction-row-3" data-pension-row-id="3" style="margin-top: -6px; margin-bottom: -6px;">
<div class="col-sm-1" style="width:3%;padding-top:32px; "><span id="pensionName_3"></span></div>
<div class="col-sm-3 showError for-transaction-type-3">
<label class="mobile-label visible-xs">Transaction</label>
<label class="mobile-label hidden-xs"> </label>
<select name="data[ClientLimeSmsfActuarialFormsMembersOneOffTransactionPension][3][transaction_type_id]" class="form-control pensionTransactionType" id="pension_transaction_type_3" style="padding:6px 6px;">
<option value="">-- Select --</option>
<option value="commence">Pension Commencement</option>
</select>
</div>
<div class="col-sm-8 has-deleticon">
<div class="col-sm-3 showError for-pension-transaction-date-3">
<label class="mobile-label visible-xs">Date</label>
<label class="mobile-label hidden-xs"> </label>
<input name="data[ClientLimeSmsfActuarialFormsMembersOneOffTransactionPension][3][transaction_date]" class="form-control date-wheel-select transaction-date-wheel tdate" id="pension_transaction_date_3" placeholder="Date (DD/MM/YYYY)" style="padding:6px 6px;" value="01/06/2015" type="text"></div>
<div class="col-sm-5">
<label class="mobile-label visible-xs">Amount</label>
<div class="showError for-pension-transaction-amount-type-3 col-sm-12" style="display: block;">
<label class="mobile-label hidden-xs"> </label>
<div class="">
<select name="data[ClientLimeSmsfActuarialFormsMembersOneOffTransactionPension][3][pension_amount_type]" id="pension_amount_type_3" class="form-control pensionAmountType" style="padding: 6px 5px;">
<option value="">-- Select --</option>
<option value="1" selected="selected">Entire Balance</option>
<option value="2">Specific Amount</option>
</select>
</div>
</div>
<div class="col-sm-6 showError for-pension-transaction-amount-3" style="display: none;">
<label class="mobile-label hidden-xs"> </label>
<div class="input-group input-group-small">
<span class="input-group-addon">$</span>
<input name="data[ClientLimeSmsfActuarialFormsMembersOneOffTransactionPension][3][transaction_amount]" class="form-control pensionTransactionAmount text-right" style="padding:6px 6px;" value="0" type="text" id="ClientLimeSmsfActuarialFormsMembersOneOffTransactionPension3TransactionAmount" placeholder="Amount"> </div>
</div>
</div>
<div class="col-sm-4" id="columnLabels-3">
<div class="col-sm-6 columnMemberOne showError for-pension-transaction-member-1-3" style="padding-right:1px;">
<label class="mobile-label columnLabelOne" style="display: none;">Deceased Member</label>
<label class="mobile-label columnLabelhidden Onehidden-xs"> </label>
<select name="data[ClientLimeSmsfActuarialFormsMembersOneOffTransactionPension][3][member_1]" class="form-control memberOne form-control-sm member12" id="member_1_3">
<option value="">-- Select --</option>
<option value="1" selected="selected">Adam</option>
<option value="2">Betty</option>
</select>
</div>
<div class="col-sm-6 columnMemberTwo showError for-pension-transaction-member-2-3" style="padding-left: 6px; display: none;">
<label class="mobile-label columnLabelTwo" style="display: none;">Receiving Member</label>
<select name="data[ClientLimeSmsfActuarialFormsMembersOneOffTransactionPension][3][member_2]" class="form-control memberTwo form-control-sm" id="member_2_3">
<option value="">-- Select --</option>
<option value="1">Adam</option>
<option value="2">Betty</option>
</select>
</div>
<div class="col-sm-6 showError for-pensionCommutationNumber-3">
<label class="mobile-label columnLabelOne" style="display: none;">Deceased Member</label>
<label class="mobile-label columnLabelhidden Onehidden-xs"> </label>
<select name="data[ClientLimeSmsfActuarialFormsMembersOneOffTransactionPension][3][pension_commutation_number]" class="form-control pensionCommutationNumber" id="pensionCommutationNumber_3"><option value="0" selected="selected">--Select--</option><option value="1A">1A</option><option value="1B">1B</option></select> </div>
</div>
<button class="btn-delete pensionCloneRemove" data-pension-div-id="3" style="top: 24px;"><i class="fa fa-trash-o"></i></button>
</div>
</div>
In OnChange event:
$(document).on('change', '.tdate', function(){
validateCommuteDate($(this));
});
ValidateCommuteDate function:
function validateCommuteDate($this){
var a = $this.val();
}
How can I retrieve pensionCommutationNumber value and pensionTransactionType value?

function validateCommuteDate($this){
var row_id = $this.parents('.inner-row').attr('data-pension-row-id'); // Get the row id
var transactionType = $('#pension_transaction_type_'+row_id).val(); // Retrieve the transaction type value
var name = $('#pensionCommutationNumber_'+row_id).val(); // Retrieve the Pension Commutation Value
}