empty form fields when I change value of select - javascript

i have a form contains select category_id which allows hide and show inputs title and name and select type, i want when i change category id value all other fields must be empty.
$(document).on('change', '#category_id', function() {
$("#divt > input,#divtn > input,#divty > input").val('');
var stateID = $(this).val();
//alert(stateID);
if (stateID == '1') {
$("#divt").hide();
$("#divn").hide();
$("#divty").show();
}else if(stateID == '2'){
$("#divt").show();
$("#divn").show();
$("#divty").hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<form id="myform">
<div class="form-group">
<label>Categories <span class="text-hightlight">*</span></label>
<select class="form-control" name="category_id" id="category_id">
<option>select</option>
<option value="1">title</option>
<option value="2">name</option>
</select>
</div>
<div class="form-group" id="divt">
<label>title <span class="text-hightlight">*</span></label>
<input type="text" name="title" class="form-control"/>
</div>
<div class="form-group" id="divn">
<label>name <span class="text-hightlight">*</span></label>
<input type="text" name="name" id="name" class="form-control"/>
</div>
<div class="form-group" id="divty">
<label>type <span class="text-hightlight">*</span></label>
<select class="form-control" name="type">
<option></option>
<option value="1">type a</option>
<option value="2">type b</option>
</select>
</div>
</form>
</div>

To reset the select field you need this code
$("#divty").find('option:first-child').prop('selected', true)
.end().trigger('chosen:updated');
Here is the working snippet:
$(document).on('change', '#category_id', function() {
$("#divt > input,#divtn > input,#divty > input").val('');
var stateID = $(this).val();
//alert(stateID);
if (stateID == '1') {
$("#divty").find('option:first-child').prop('selected', true)
.end().trigger('chosen:updated');
$("#divt").hide();
$("#divn").hide();
$("#divty").show();
}else if(stateID == '2'){
$("#divt > input").val('');
$("#divn > input").val('');
$("#divt").show();
$("#divn").show();
$("#divty").hide();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<form id="myform">
<div class="form-group">
<label>Categories <span class="text-hightlight">*</span></label>
<select class="form-control" name="category_id" id="category_id">
<option>select</option>
<option value="1">title</option>
<option value="2">name</option>
</select>
</div>
<div class="form-group" id="divt">
<label>title <span class="text-hightlight">*</span></label>
<input type="text" name="title" class="form-control"/>
</div>
<div class="form-group" id="divn">
<label>name <span class="text-hightlight">*</span></label>
<input type="text" name="name" id="name" class="form-control"/>
</div>
<div class="form-group" id="divty">
<label>type <span class="text-hightlight">*</span></label>
<select class="form-control" name="type">
<option></option>
<option value="1">type a</option>
<option value="2">type b</option>
</select>
</div>
</form>
</div>

If you're trying to empty value of the textboxes, I guess the selector is wrong on line 2
try
$("input.form-control").val('');
or $("#myform input.form-control").val('')

Related

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>

Input fields required if certain select option is selected in a HTML form

I am trying to make the textbox required when select option is selected and submit.
When I select Education then input for Education is required
When I select Business then input for Business is required
When I select Business & Education then both inputs are required. is required
Any help would be greatly appreciated. Thanks.
function changePurpose(){
if(document.getElementById('TravelPurpose').value == "Education")
{
document.getElementById('PoT_Ebudget').setAttribute("required","");
}
else
{
document.getElementById('PoT_Ebudget').setAttribute("required","");
}
if(document.getElementById('TravelPurpose').value == "Business")
{
document.getElementById('PoT_Bbudget').setAttribute("required","");
}
else
{
document.getElementById('PoT_Bbudget').setAttribute("required","");
}
if(document.getElementById('TravelPurpose').value == "Education & Business")
{
document.getElementById('PoT_Bbudget').setAttribute("required","");
document.getElementById('PoT_Ebudget').setAttribute("required","");
}
else
{
document.getElementById('PoT_Bbudget').setAttribute("required","");
document.getElementById('PoT_Bbudget').setAttribute("required","");
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<form id="myform">
<div class="row">
<div class="col-sm-6">
<div class="form-group options">
<label class="form-label" for="purpose"> Purpose of Travel</label>
<div class="controls" onchange="purpose(this)">
<select class="form-control" id="TravelPurpose" name="PoT_TravelPurpose" onchange="changePurpose()" required>
<option selected value="">Select Travel Purpose</option>
<option value="Business">Business</option>
<option value="Education">Education</option>
<option value="Education & Business">Education and Business</option>
</select>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="form-label" for="Budget"> Education</label>
<div class="controls input-group primary">
<span class="input-group-addon">$</span>
<input type="number" style="text-align: right;" id="PoT_Ebudget" name="PoT_Ebudget" placeholder="00.00" min="0" max="10000" oninput="this.value = Math.abs(this.value)">
</div>
<br />
<label class="form-label" for="Budget"> Business</label>
<div class="controls input-group primary">
<span class="input-group-addon">$</span>
<input type="number" style="text-align: right;" id="PoT_Bbudget" name="PoT_Bbudget" placeholder="00.00" min="0" max="10000" oninput="this.value = Math.abs(this.value)">
</div>
</div>
</div>
</div>
<input type="submit" value="Submit" >
</form>
You can set a field to become required by setting its required property:
Example:
document.getElementById('PoT_Ebudget').required = true;
//...or
document.getElementById('PoT_Ebudget').required = false;
Also, it's a good idea to cache your element references in variables, for both improved code readability and performance.
const PoT_Ebudget = document.getElementById('PoT_Ebudget');
const PoT_Bbudget = document.getElementById('PoT_Bbudget');
function changePurpose(){
const value = document.getElementById('TravelPurpose').value;
PoT_Ebudget.required = (value == "Education" || value == "Education & Business");
PoT_Bbudget.required = (value == "Business" || value == "Education & Business");
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<form id="myform">
<div class="row">
<div class="col-sm-6">
<div class="form-group options">
<label class="form-label" for="purpose"> Purpose of Travel</label>
<div class="controls">
<select class="form-control" id="TravelPurpose" name="PoT_TravelPurpose" onchange="changePurpose()" required>
<option selected value="">Select Travel Purpose</option>
<option value="Business">Business</option>
<option value="Education">Education</option>
<option value="Education & Business">Education and Business</option>
</select>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="form-label" for="Budget"> Education</label>
<div class="controls input-group primary">
<span class="input-group-addon">$</span>
<input type="number" style="text-align: right;" id="PoT_Ebudget" name="PoT_Ebudget" placeholder="00.00" min="0" max="10000" oninput="this.value = Math.abs(this.value)">
</div>
<br />
<label class="form-label" for="Budget"> Business</label>
<div class="controls input-group primary">
<span class="input-group-addon">$</span>
<input type="number" style="text-align: right;" id="PoT_Bbudget" name="PoT_Bbudget" placeholder="00.00" min="0" max="10000" oninput="this.value = Math.abs(this.value)">
</div>
</div>
</div>
</div>
<input type="submit" value="Submit" >
</form>

Set text field min and max value based on the option selected in previous dropdown

I have a drop down and a text box next to it.
When some value is selected in the dropdown, the textbox should allow min and max characters based on the selected option.
Suppose I select option 1, then the textbox next to it should allow minimum 10 characters and max 16 characters.
How to achieve it?
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label class="required">Select Type</label>
<select class="form-control" id="prooftype">
<option value="0" disabled> </option>
<option value="name1">name1</option>
<option value="name2">name2</option>
<option value="name3">name3</option>
<option value="name4">name4</option>
</select>
</div>
</div>
<div class="col-sm-6">
<div class="form-group md-form">
<label class="required" for="id" data-error="wrong" data-success="right">
<i class="fa fa-info pr-2"></i>
Enter Identity Card Number
</label>
<input id="id" type="number" minlength="3" class="form-control validate" autocomplete="off" onkeypress="return blockSpecialChar(event)" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" maxlength="20" />
</div>
</div>
</div>
you have to change a little your code
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label class="required">Select Type</label>
<select class="form-control" id="prooftype">
<option value="0/0" disabled> </option>
<option value="10/16">name1</option>
<option value="20/32">name2</option>
<option value="30/48">name3</option>
<option value="40/64">name4</option>
</select>
</div>
</div>
<div class="col-sm-6">
<div class="form-group md-form">
<label class="required" for="id" data-error="wrong" data-success="right">
<i class="fa fa-info pr-2"></i>
Enter Identity Card Number
</label>
<input id="id" type="text" minlength="3" class="form-control validate" autocomplete="off" onkeypress="return blockSpecialChar(event)" maxlength="20" />
</div>
</div>
</div>
and jQuery
$('#prooftype').change(function(){
var tmp = $(this).val().split('/');
$('input#id').attr('minlength',tmp[0]).attr('maxlength',tmp[1]);
})
If you pass the the option value of 12/16 to the backend, obviously the data will reflect. I think you need something like this:
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label class="required">Select Type</label>
<select class="form-control" id="prooftype">
<option value="0/0" disabled> </option>
<option value="name1">name1</option>
<option value="name2">name2</option>
<option value="name3">name3</option>
<option value="name4">name4</option>
</select>
</div>
</div>
<div class="col-sm-6">
<div class="form-group md-form">
<label class="required" for="id" data-error="wrong" data-success="right">
<i class="fa fa-info pr-2"></i>
Enter Identity Card Number
</label>
<input id="inputid" type="text" minlength="3" class="form-control validate" autocomplete="off" onkeypress="return blockSpecialChar(event)" maxlength="20" />
</div>
</div>
</div>
And your JQuery
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
var selectedopt;
$('#prooftype').change(function(){
selectedopt= $(this).val();
//Add your condition here, and check the selected option value:
if(selectedopt== "name1")
{
//Set input min and max value based on the selected option value.
$('#inputid').attr('minlength','10').attr('maxlength','16');
}
elseif(selectedopt== "name2")
{
$('#inputid').attr('minlength','20').attr('maxlength','25');
}
// And so on........
})
</script>

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.

Categories