Develop Reference

Redirect to form with input value from previous form in Laravel

I'm working with Form in Laravel. In that form have a modal that containts another form.
Here's the screenshot of the Form :
SS1 (I can't post an image because my reputation is not enough)
when I click on New button (besides of Customer Name input text) there will be a modal that containts form to input new customers and new unit. Here's the screenshot of the modal :
SS2
and the idea is,after I complete the input of new customer and unit, the data i've inputted will automatically input the main form.
and this is what I've done so far :
$("#main_form2").on("submit", function(event) {
event.preventDefault();
value = $(this).serialize();
alert(value);
$.ajax({
type: 'post',
url: $(this).attr('action'),
data: {
'value': value
},
success: function(data) {
$('#customer_id').val(data.customer_id)
$('#customer_name').val(data.customer_name)
$('#customer_pic').val(data.customer_pic)
$('#unit_province').val(data.customer_province)
$('#unit_cities').val(data.customer_site)
$('#unit_sn').val(data.unit_sn)
$('#unit_brand').val(data.unit_brand)
$('#unit_type').val(data.unit_type)
$('#unit_model').val(data.unit_model)
},
error: function() {}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="{{route('ticket-service/store')}}" method="POST" id="main_form">
#csrf
<div class="panel panel-inverse">
<div class="panel-heading ui-sortable-handle">
<h4 class="panel-title">Ticket Service Create</h4>
<div class="panel-heading-btn">
<i class="fa fa-expand"></i>
<i class="fa fa-minus"></i>
</div>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for="ticket_inquiry_from"><b>Inquiry From</b> <span class="text-danger">*</span></label>
<select class="form-control ticket_inquiry_from form-control-sm" name="ticket_inquiry_from" id="ticket_inquiry_from">
<option value="">Select Option</option>
<option value="Phone">Phone</option>
<option value="Website">Website</option>
<option value="WhatsApp">WhatsApp</option>
<option value="Email">Email</option>
</select>
<span class="text-danger error-text ticket_inquiry_from_error"></span>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="ticket_inquiry_to"><b>Inquiry To</b> <span class="text-danger">*</span></label>
<select class="form-control ticket_inquiry_to form-control-sm" name="ticket_inquiry_to" id="ticket_inquiry_to">
<option value="">Select Option</option>
<option value="Marketing">Marketing</option>
<option value="Service">Service</option>
<option value="Sparepart">Sparepart</option>
</select>
<span class="text-danger error-text ticket_inquiry_to_error"></span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="ticket_inquiry_pic"><b>Inquiry PIC</b><a class="text-danger"> *</a></label>
<select class="js-example-basic-multiple" class="form-control form-control-sm form-select form-select-sm" name="ticket_inquiry_pic[]" multiple="multiple" style="width:100%;">
#foreach(SiteHelpers::get_user_all() as $pic)
<option value="{{$pic->id}}" <?php echo (old( 'ticket_inquiry_pic')==$ pic->user_name) ? 'selected' : ''?>>{{$pic->user_name}}</option>
#endforeach
</select>
<span class="text-danger error-text ticket_inquiry_pic_error"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for="ticket_date"><b>Ticket Date</b></label>
<div class="col-sm-13">
<input type="text" class="form-control form-control-sm" name="ticket_date" value="{{date('Y/m/d')}}" readonly/>
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="service_request_date"><b>Service Request Date</b> <span class="text-danger">*</span></label>
<div class="col-sm-13">
<div class="input-group date" id="datepicker-disabled-past" data-date-format="dd-mm-yyyy" data-date-start-date="Date.default">
<input type="text" class="form-control form-control-sm" name="service_request_date" value="{{old('service_request_date')}}" />
<div class="input-group-addon"><i class="fa fa-calendar"></i></div>
</div>
<span class="text-danger error-text service_request_date_error"></span>
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="liability_charges"><b>Charges To</b> <span class="text-danger">*</span></label>
<select class="form-control liability_charges form-control-sm" name="liability_charges" id="liability_charges">
<option value="">Select Option</option>
<option value="Principal">Principal</option>
<option value="Dept. Marketing">Dept. Marketing</option>
<option value="Dept. Part">Dept. Part</option>
<option value="Dept. Service">Dept. Service</option>
<option value="Customer">Customer</option>
<option value="Free Charge">Free Charge</option>
</select>
<span class="text-danger error-text liability_charges_error"></span>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="ticket_category"><b>Category</b> <span class="text-danger">*</span></label>
<select class="form-control category form-control-sm" name="ticket_category" id="ticket_category">
<option value="">Select Category</option>
<option value="Inspection">Inspection</option>
<option value="Commissioning">Commissioning</option>
<option value="Regular Service">Regular Service</option>
<option value="Repair / Troubleshooting">Repair / Troubleshooting</option>
<option value="Training">Training</option>
<option value="Warranty">Warranty</option>
<option value="Sparepart">Sparepart</option>
<option value="Unit">Unit</option>
<option value="Other">Other</option>
</select>
<span class="text-danger error-text ticket_category_error"></span>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for="customer_id"><b>Customer</b><span class="text-danger"> *</span></label>
<div class="input-group">
<input type="hidden" id="customer_id" name="customer_id" value="{{(isset($data)) ? $data->customer_id : ''}}">
<input type="text" class="form-control form-control-sm" placeholder="Customer Name" id="customer_name" href="{{route('population/popup_media')}}" data-toggle="modal" data-target="#modal-default" value="{{(isset($data)) ? $data->customer_name : ''}}">
<div class="input-group-prepend">
<span style="cursor:pointer;" class="input-group-text form-control-sm" href="#modal-new-customer" id='new-customer' rel='tooltip' data-placement='top' data-toggle='modal' title='Add New Customer'><i class="fa fa-user"></i>&nbsp<b>New</b></span>
</div>
</div>
<span class="text-danger error-text customer_id_error"></span>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="customer_pic"><b>Customer PIC</b><span class="text-danger"> *</span></label>
<input type="text" class="form-control form-control-sm" id="customer_pic" name="customer_pic" placeholder="Customer PIC">
<span class="text-danger error-text customer_pic_error"></span>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="customer_phone"><b>Customer Phone</b><span class="text-danger"> *</span></label>
<input type="text" class="form-control form-control-sm" id="customer_phone" name="customer_phone" placeholder="Customer Phone">
<span class="text-danger error-text customer_phone_error"></span>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="customer_email"><b>Customer Email</b></label>
<input type="text" class="form-control form-control-sm" id="customer_email" name="customer_email" placeholder="Customer Email">
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for="unit_sn"><b>Unit SN</b></label>
<input type="text" class="form-control form-control-sm" id="unit_sn" name="unit_sn" placeholder="Unit SN" readonly>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="unit_brand"><b>Unit Brand</b></label>
<input type="text" class="form-control form-control-sm" id="unit_brand" name="unit_brand" placeholder="Unit Brand" disabled>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="category"><b>Unit Type</b></label>
<input type="text" class="form-control form-control-sm" id="category" name="category" placeholder="Type" disabled>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="unit_model"><b>Unit Model</b></label>
<input type="text" class="form-control form-control-sm" id="unit_model" name="unit_model" placeholder="Unit Model" disabled>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for="province_name"><b>Unit Province</b> <span class="text-danger">*</span></label>
<select class="form-control form-control-sm province_name" name="unit_province" id="unit_province">
<option value="" disabled="true" selected="true">Choose Province</option>
#foreach(SiteHelpers::get_province() as $province)
<option value="{{$province->id}}">{{$province->province_name}}</option>
#endforeach
</select>
<span class="text-danger error-text unit_province_error"></span>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="cities"><b>Unit City</b> <span class="text-danger">*</span></label>
<select class="form-control form-control-sm cities" name="unit_cities" id="unit_cities">
<option value="0" disabled selected>Select City</option>
</select>
<span class="text-danger error-text unit_cities_error"></span>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="unit_site"><b>Site/Workshop Address</b> <span class="text-danger">*</span></label>
<input type="text" class="form-control form-control-sm" id="unit_site" name="unit_site" placeholder="Unit Site">
<span class="text-danger error-text unit_site_error"></span>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="unit_status"><b>Unit Status</b> <span class="text-danger">*</span></label>
<select class="form-control category form-control-sm" name="unit_status" id="unit_status">
<option value="">Select Status</option>
<option value="Breakdown">Breakdown</option>
<option value="Stand By">Running</option>
<option value="Working">Stand By</option>
</select>
<span class="text-danger error-text unit_status_error"></span>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="ticket_complaints"><b>Informed Issue</b> <span class="text-danger">*</span></label>
<textarea name="ticket_complaints" id="ticket_complaints" class="form-control form-control-sm" style="height: 99px;"></textarea>
<span class="text-danger error-text ticket_complaints_error"></span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="ticket_notes"><b>Notes</b></label>
<textarea name="ticket_notes" id="ticket_notes" class="form-control form-control-sm" style="height: 99px;"></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for="ticket_status"><b>Ticket Status</b> </label>
<select class="form-control category form-control-sm" name="ticket_status" id="ticket_status">
<option value="OPEN">OPEN</option>
<option value="Finished">Finished</option>
</select>
<span class="text-danger error-text ticket_status_error"></span>
</div>
</div>
<div class="col-md-3 ticket-detail" style="display:none;">
<div class="form-group">
<label for="ticket_guidance"><b>Ticket Guidance</b> <span class="text-danger">*</span></label>
<select class="form-control category form-control-sm" name="ticket_guidance" id="ticket_guidance">
<option value="">Select Guidance</option>
<option value="Phone">Phone</option>
<option value="Other">Other</option>
</select>
<span class="text-danger error-text ticket_guidance_error"></span>
</div>
</div>
<div class="col-md-6 ticket-detail" style="display:none;">
<div class="form-group">
<label for="ticket_guide_name"><b>Guide Name</b> <span class="text-danger">*</span></label>
<input type="text" name="ticket_guide_name" id="ticket_guide_name" class="form-control form-control-sm">
<span class="text-danger error-text ticket_guide_name_error"></span>
</div>
</div>
</div>
<button type="submit" class="btn btn-sm btn-success m-r-5">Submit</button>
Cancel
</div>
</div>
</form>
<!-- the modal -->
<div class="modal fade" id="modal-new-customer" style="display: none;" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Add New Customer</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<form action="{{ route('customer/storeWithPopulation') }}" method="POST" id="main_form2">
#csrf
<div class="modal-body">
<div class="panel-body">
<label for="unit"><b><i>Customer(s)</i></b></label>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="customer_name"><b>Customer Name</b> <span class="text-danger">*</span></label>
<input type="hidden" name="customer_id" value="temp">
<input type="hidden" name="unit_status_stock" value="DELIVERED">
<input type="text" class="form-control" id="customer_name" name="customer_name" placeholder="Customer Name" value="{{old('customer_name')}}">
<span class="text-danger error-text customer_name_error"></span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="PIC"><b>PIC</b></label>
<input type="text" class="form-control" id="customer_pic" name="customer_pic" placeholder="PIC" value="{{old('customer_pic')}}">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="province_name"><b>Unit Province</b> <span class="text-danger">*</span></label>
<select class="form-control province_name" name="customer_province" id="customer_province">
<option value="" disabled="true" selected="true">Choose Province</option>
#foreach(SiteHelpers::get_province() as $province)
<option value="{{$province->id}}">{{$province->province_name}}</option>
#endforeach
</select>
<span class="text-danger error-text customer_province_error"></span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="cities"><b>Site</b> <span class="text-danger">*</span></label>
<select class="form-control cities" name="customer_site" id="customer_site">
<option value="0" disabled selected>Select City</option>
</select>
<span class="text-danger error-text customer_site_error"></span>
</div>
</div>
</div>
</br>
<label for="unit"><b><i>Population(s)</i></b></label>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="brand"><b>Brand</b><span class="text-danger"> *</span></label>
<select class="form-control brand form-control-sm" name="unit_brand" id="unit_brand">
<option value="">Chose Brand</option>
#foreach($brands as $brand)
<option value="{{$brand->brand}}">{{$brand->brand}}</option>
#endforeach
</select>
<span class="text-danger error-text unit_brand_error"></span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="model"><b>Category</b><span class="text-danger"> *</span></label>
<select class="form-control category form-control-sm" name="unit_category" id="unit_category">
<option value="" disabled>Select Category</option>
</select>
<span class="text-danger error-text unit_category_error"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 tes">
<div class="form-group">
<label for="model"><b>Model</b><span class="text-danger"> *</span></label>
<select class="form-control model form-control-sm" name="unit_model" id="unit_model">
<option value="" disabled>Select Model</option>
</select>
<span class="text-danger error-text unit_model_error"></span>
</div>
<div class="form-group">
<label for="serial_number"><b>Serial Number</b><span class="text-danger"> *</span></label>
<input type="text" class="form-control form-control-sm" id="unit_sn" name="unit_sn" placeholder="Unit Serial Number">
<span class="text-danger error-text unit_sn_error"></span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="year"><b>Unit Year</b><span class="text-danger"> *</span></label>
<input type="number" class="form-control form-control-sm" id="unit_year" name="unit_year" placeholder="Unit Year">
<span class="text-danger error-text unit_year_error"></span>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer" style="background-color:#cccccc;">
Close
<button type="submit" class="btn btn-success">Submit</button>
</div>
</form>
</div>
</div>
</div>
here's my Controller :
public function storeWithPopulation(Request $request){
abort_unless(\Gate::allows('master-customer-create'),403);
$validator = Validator::make($request->all(),Customer::$createRules,Customer::$customMessage);
$validator2 = Validator::make($request->all(),Population::$createRules,Population::$customMessage);
if(!$validator->passes() && !$validator2->passes()){
$errors = array_merge($validator->errors()->toArray(),$validator2->errors()->toArray());
return response()->json(['status'=>0, 'error'=>$errors]);
}else{
$last_id = Customer::all()->last();
$customer_id = 'CUST-'.$last_id->id;
$values_customer = [
'customer_id'=>$customer_id,
'customer_name'=>$request->customer_name,
'customer_pic'=>$request->customer_pic,
'customer_site'=>$request->customer_site,
'customer_province'=>$request->customer_province,
];
$values_population = [
'customer_id' => $customer_id,
'unit_model'=>$request->unit_model,
'unit_sn'=>$request->unit_sn,
'unit_year'=>$request->unit_year,
'unit_status_stock'=>$request->unit_status_stock,
];
$new_customer = Customer::create($values_customer);
$new_population = Population::create($values_population);
if( $new_population ){
$brands = DB::table('t_brand')->get();
$data = SiteHelpers::get_population_by_sn($new_population->unit_sn);
return response()->json(['status'=>1, 'url'=>'/service/forms/ticket-service/create',['data'=>$data,'brands'=>$brands]]);
// return response()->json(['status'=>1, 'url'=>'/service/forms/ticket-service/create',['data'=>$data,'brands'=>$brands]]);
}
}
}
The problem is, everytime I succeeded create new customer in the modal it also redirect into the main form,but got refreshed and the main form completely in blank condition. I want to grab all the new customer I've just inputed into the main form.
hopefully somebody can help me. Thank you in advance.

Disabling couple input area if dropdown equal to 1

I am stuck up with this on my php page. I can't disable 3 input area after selected dropdown
I Just want to disable irrelevant input areas if type of slider selected like 1 otherwise do nothing
HTML Code which will use for condition:
<div class="form-group">
<label for="slider_type">Slider Type</label>
<select name="slider_type" class="form-select" id="slider_type" required>
<option value="" disabled selected>Please Select</option>
<option value="1">Image</option>
<option value="2">Video</option>
</select>
</div>
HTML Code Which i want to disable if slider_type equal to 1
<label for="slider_title">Slider Title</label>
<input type="text" name="slider_title" id="slider_title" class="form-control round" placeholder="Slider Title" onchange="DisableSliderInputArea()" required>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="form-group">
<label for="slider_description">Slider Body</label>
<input type="text" name="slider_description" id="slider_description" class="form-control round" placeholder="Slider Body" required>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="form-group">
<label for="slider_button_link">Slider Button Link</label>
<input type="text" name="slider_button_link" id="slider_button_link" class="form-control round" placeholder="Slider Button Link" required>
</div>
</div>
I tried this JavaScript code lines for 1 input area but it's not worked
<script type="text/javascript">
function DisableSliderInputArea(){
if(document.getElementById("slider_type").value=="1"){
document.getElementById("slider_title").disabled = true;
} else {
document.getElementById("slider_title").disabled = false;
}
}
</script>
What's really wrong?

You almost have done all the job, one thing that was missing is the actual call of the function DisableSliderInputArea once your select box has changed its' value. You needed to add an event listener, so once user changes the selected option, your function will get triggered, and the textarea will be disabled or enabled.
Feel free to run the snippet below, and see how it works. I added comments on the lines you need to add in JS section.
function DisableSliderInputArea() {
if (document.getElementById("slider_type").value == "1") {
document.getElementById("slider_title").disabled = true;
} else {
document.getElementById("slider_title").disabled = false;
}
}
// Get the select out of the DOM and store in a local variable
const dropdown = document.getElementById("slider_type");
// Attach an event listener, so once the select changes
// its' value, this function will be called
dropdown.addEventListener("change", DisableSliderInputArea);
<div class="form-group">
<label for="slider_type">Slider Type</label>
<select name="slider_type" class="form-select" id="slider_type" required>
<option value="" disabled selected>Please Select</option>
<option value="1">Image</option>
<option value="2">Video</option>
</select>
</div>
<label for="slider_title">Slider Title</label>
<input type="text" name="slider_title" id="slider_title" class="form-control round" placeholder="Slider Title" onchange="DisableSliderInputArea()" required>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="form-group">
<label for="slider_description">Slider Body</label>
<input type="text" name="slider_description" id="slider_description" class="form-control round" placeholder="Slider Body" required>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="form-group">
<label for="slider_button_link">Slider Button Link</label>
<input type="text" name="slider_button_link" id="slider_button_link" class="form-control round" placeholder="Slider Button Link" required>
</div>
</div>

you're almost done, just incorrectly putting onchange="DisableSliderInputArea()"
function DisableSliderInputArea(){
if(document.getElementById("slider_type").value=="1"){
document.getElementById("slider_title").disabled = true;
} else {
document.getElementById("slider_title").disabled = false;
}
}
<div class="form-group">
<label for="slider_type">Slider Type</label>
<select name="slider_type" class="form-select" id="slider_type" onchange="DisableSliderInputArea()" required>
<option value="" disabled selected>Please Select</option>
<option value="1">Image</option>
<option value="2">Video</option>
</select>
</div>
<label for="slider_title">Slider Title</label>
<input type="text" name="slider_title" id="slider_title" class="form-control round" placeholder="Slider Title" required>
<div class="col-md-6 mb-4">
<div class="form-group">
<label for="slider_description">Slider Body</label>
<input type="text" name="slider_description" id="slider_description" class="form-control round" placeholder="Slider Body" required>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="form-group">
<label for="slider_button_link">Slider Button Link</label>
<input type="text" name="slider_button_link" id="slider_button_link" class="form-control round" placeholder="Slider Button Link" required>
</div>
</div>

Tabbing validation using html 5 based on browser chrome

I have one html form in that there are three tabs within three div.
i want to submit form on one submit button without console error.
I used below script for tabbed html 5 validation its work but it gives console error on chrome browser, like
An invalid form control with name='campign' is not focusable.
please help if anybudy know about this.
<html>
<body>
<div class="col-md-12 col-sm-12 ad_dealer nav-tabs-menu">
<ul class="nav nav-tabs">
<li class="active" title="Personal Information">
<a data-toggle="tab" href="#per-info">
<span> Personal Information</span></a></li>
<li class="secnd" title="Communication Address">
<a data-toggle="tab" href="#comm-add">
<span> Communication Address</span></a></li>
<li class="secnd" title="Experience & Educational Details">
<a data-toggle="tab" href="#exp-edu">
<span>Exp & Educational Details </span></a></li>
</ul>
</div>
<div class="tab-content dealer-tabs">
<!-- <div class="col-md-12">
<h6 class="gg per_info det-area"><span class="line-center">Personal Information</span></h6>
</div> -->
<div id="per-info" class="tab-pane fade in active row col-sm-12">
<div class="form-group row col-sm-6 ">
<label class="col-md-4 form-control-label " for="">Blood Group<span class="requerido">*</span></label>
<div class="col-md-6">
<select class="form-control opt " name="blood-grp" id="blood-grp" title="Please Select Blood Group" required oninvalid="this.setCustomValidity('Please Select Blood Group')" onChange="setCustomValidity('')">
<option class="service-small" value="">Select</option>
<option value="1">A+ </option>
<option value="2">A-</option>
<option value="2">AB+</option>
<option value="2">AB-</option>
<option value="2">B+</option>
<option value="2">B-</option>
<option value="2">O+</option>
<option value="2">O-</option>
</select>
</div>
</div>
<div class="form-group row col-sm-6 ">
<label class="col-md-4 form-control-label" for="">Date of Birth<span class="requerido">*</span></label>
<div class="col-md-6">
<input type="text" id="enqdate" name="enqdate" value="" class="form-control datepicker" placeholder="dd-mmm-yyyy" title="Please Enter Date of Birth" required oninvalid="this.setCustomValidity('Please Enter Date of Birth')" onChange="setCustomValidity('')" onkeypress = "return false; event.charCode >= 48 && event.charCode <= 57">
</div>
</div>
<div class="form-group row col-sm-6 ">
<label class="col-md-4 form-control-label " for="">Marital Status<span class="requerido">*</span></label>
<div class="col-md-6">
<select class="form-control opt " name="blood-grp" id="blood-grp" title="Please Select Marital Status" required oninvalid="this.setCustomValidity('Please Select Marital Status')" onChange="setCustomValidity('')">
<option class="service-small" value="">Select</option>
<option value="1">Married </option>
<option value="2">Unmarried</option>
<option value="3">Divorced </option>
<option value="4"> Widowed</option>
</select>
</div>
</div>
<div class="form-group row col-sm-6 ">
<label class="col-md-4 form-control-label" for="">Wedding Date</label>
<div class="col-md-6">
<input type="text" id="enqdate" name="enqdate" value="" class="form-control datepicker" placeholder="dd-mmm-yyyy" title="Please Enter Wedding Date">
</div>
</div>
</div>
<div class="clearfix"> </div>
<!-- <div class="col-md-12">
<h6 class="gg cust_mar det-area"><span class="line-center">Alternate Information</span></h6>
</div> -->
<div class="clearfix"> </div>
<div div id="comm-add" class="tab-pane fade row col-sm-12">
<div class="comm-top">
<div class="form-group row col-sm-6 address-sec" id="campa">
<label class="col-md-4 form-control-label" for="">Permanent Address<span class="requerido">*</span></label>
<div class="col-md-6">
<input type="text" id="campign" name="campign" class="form-control" placeholder="Permanent Address" title="Please Enter Permanent Address" required oninvalid="this.setCustomValidity('Please Enter Permanent Address')" onChange="setCustomValidity('')" style='margin-bottom:5px;' maxlength="250">
<input type="text" id="campign" name="campign" class="form-control" placeholder="" title="" style='margin-bottom:5px;'>
<input type="text" id="campign" name="campign" class="form-control" placeholder="" title="">
</div>
</div>
<div class="form-group row col-sm-6 ">
<label class="col-md-4 form-control-label " for="">Permanent Village<span class="requerido">*</span></label>
<div class="col-md-6">
<select class="form-control opt " name="per-vill" id="per-vill" title="Please Select Permanent Village" required oninvalid="this.setCustomValidity('Please Select Permanent Village')" onChange="setCustomValidity('')">
<option class="service-small" value="">Select</option>
<option value="Marwad ">Marwad </option>
<option value="Thergaon">Thergaon</option>
<option value="Sarangkheda">Sarangkheda</option>
</select>
</div>
</div>
<div class="form-group row col-sm-6 ">
<label class="col-md-4 form-control-label " for="">Permanent Tehsil<span class="requerido">*</span></label>
<div class="col-md-6">
<select class="form-control opt " name="per-teh" id="per-teh" title="Please Select Permanent Tehsil" required oninvalid="this.setCustomValidity('Please Select Permanent Tehsil')" onChange="setCustomValidity('')">
<option class="service-small" value="">Select</option>
<option value="Amalner ">Amalner </option>
<option value="Mulshi">Mulshi</option>
<option value="Mulshi">shada</option>
</select>
</div>
</div>
<div class="form-group row col-sm-6 ">
<label class="col-md-4 form-control-label " for="">Permanent District<span class="requerido">*</span></label>
<div class="col-md-6">
<select class="form-control opt " name="per-dis" id="per-dis" title="Please Select Permanent District" required oninvalid="this.setCustomValidity('Please Select Permanent District')" onChange="setCustomValidity('')">
<option class="service-small" value="">Select</option>
<option value="Jalgaon ">Jalgaon </option>
<option value="Pune">Pune</option>
<option value="Mulshi">Mulshi</option>
</select>
</div>
</div>
<div class="form-group row col-sm-6 ">
<label class="col-md-4 form-control-label " for="">Permanent State<span class="requerido">*</span></label>
<div class="col-md-6">
<select class="form-control opt " name="blood-grp" id="blood-grp" title="Please Select Permanent State" required oninvalid="this.setCustomValidity('Please Select Permanent State')" onChange="setCustomValidity('')">
<option class="service-small" value="">Select</option>
<option value="1">Maharashtra </option>
<option value="2">Punjab</option>
</select>
</div>
</div>
<div class="form-group row col-sm-6 has-feedback">
<label class="col-md-4 form-control-label" for="">Permanent Pin Code<span class="requerido">*</span></label>
<div class="col-md-6">
<input name="myInput_DRS" class="form-control"
onkeypress="return isNumeric(event)"
oninput="maxLengthCheck(this)"
type = "number"
maxlength = "10"
min = "1"
max = "10" />
<!-- <input type="text" id="pincode" name="pincode" class="form-control" placeholder="Permanent Pin Code" title="Please Enter Permanent Pin Code" required="" pattern="[0-9]{6}" oninvalid="InvalidMsg(this,'Please Enter Valid Pin Code','Please Enter Pin Code');" oninput="InvalidMsg(this,'Please Enter Valid Pin Code','');" onpaste="return false" onChange="setCustomValidity('')" maxlength="6" onKeyPress="return isNumberKey(event)" onKeyUp="return isNumberKeyWithMark(event,'pincode','validateMark')" /> -->
<span class="glyphicon glyphicon-ok form-control-feedback" value="" id="validateMark" style="display:none;"></span>
</div>
</div>
<div class="form-group row col-sm-6 ">
<label class="col-md-4 form-control-label" for="">Permanent Contact No<span class="requerido">*</span></label>
<div class="col-md-6">
<input type="text" id="percontactno" name="percontactno" value="" class="form-control" placeholder="Permanent Contact No" title="Please Enter Permanent Contact No" required="" pattern="[0-9]{1,20}" onpaste="return false" oninvalid="InvalidMsg(this,'Please Enter Valid Permanent Contact No','Please Enter Permanent Contact No');" oninput="InvalidMsg(this,'Please Enter Valid Permanent Contact','');" onkeyup="inavlidMsgKeyUp(this,event,'Please Enter Permanent Contact No');" onKeyPress="return isNumberKey(event)" onChange="setCustomValidity('');" maxlength="20"/>
</div>
</div>
</div><!--comm-top-->
<div class="clearfix"> </div>
<div class="clearfix"> </div>
<div id="exp-edu" class="tab-pane fade row col-sm-12">
<div class="form-group row col-sm-6 ">
<label class="col-md-4 form-control-label" for="">Experience (In Years)<span class="requerido">*</span></label>
<div class="col-md-6">
<input type="text" id="exp" name="exp" value="" class="form-control" placeholder="Experience" title="Please Enter Experience" required="" pattern="^[0-9]+(\.[0-9]{1,2})?$" oninvalid="InvalidMsg(this,'Please Enter valid Experience','Please Enter Experience');" oninput="InvalidMsg(this,'Please valid Enter Experience','');" onkeyup="inavlidMsgKeyUp(this,event,'Please Enter Experience');" onchange="setCustomValidity('')" maxlength="10" onKeyPress="return isNumberKey(event)">
</div>
</div>
<div class="form-group row col-sm-6 ">
<label class="col-md-4 form-control-label" for="">Salary Per Month<span class="requerido">*</span></label>
<div class="col-md-6">
<input type="text" id="salpermonth" name="salpermnth" value="" class="form-control" placeholder="Salary Per Month" title="Please Enter Salary Per Month" required="" pattern="^[0-9]+(\.[0-9]{1,2})?$" oninvalid="InvalidMsg(this,'Please Enter Valid Salary Per Month','Please Enter Salary Per Month');" oninput="InvalidMsg(this,'Please Enter Salary Per Month','');" onkeyup="inavlidMsgKeyUp(this,event,'Please Enter Salary Per Month');" onChange="setCustomValidity('')" maxlength="40" onKeyPress="return isNumberKey(event)">
</div>
</div>
<div class="form-group row col-sm-6 ">
<label class="col-md-4 form-control-label " for="">Education<span class="requerido">*</span></label>
<div class="col-md-6">
<select class="form-control opt " name="edu" id="edu" title="Please Select Education" required oninvalid="this.setCustomValidity('Please Select Education')" onChange="setCustomValidity('')">
<option class="service-small" value="">Select</option>
<option value="1">Diploma</option>
<option value="2">BE</option>
<option value="3">Graduation</option>
<option value="4">Post Graduation</option>
</select>
</div>
</div>
</div>
</div><!--tab-content-->
</div>
<div class="card-footer en_footer">
<button type="submit" title="Submit" id="sub" class="btn btn-sm no_radius btn btn-success">Submit</button>
<button type="button" id="MyReset" title="Reset" class="btn btn-sm no_radius btn-primary">Reset</button>
</div>
</form>
</div>
</div>
<script type="text/javascript">
$('#sub').click(function(evt){ // submit button click event
var $myForm = $('#AddDealerEmployee');
if(!$myForm[0].checkValidity()) {
// If the form is invalid, submit it. The form won't actually submit;
// this will just cause the browser to`enter code here` display the native HTML5 error messages.
var flag1=1;
var flag2=1;
var flag3=1;
var inputs = $('#per-info').find("select, textarea, input");
inputs.each(function( index ) {
//console.log($(this));
if ($(this).is("input") && $(this).prop('required') && !$(this)[0].checkValidity()) {
flag1=0;
}
if ($(this).is("select") && $(this).prop('required') && !$(this)[0].checkValidity()) {
//alert("hi");
flag1=0;
}
});
//comm-add
var inputs = $('#comm-add').find("select, textarea, input");
inputs.each(function( index ) {
//console.log($(this));
if ($(this).is("input") && $(this).prop('required') && !$(this)[0].checkValidity()) {
//alert("hi");
flag2=0;
}
if ($(this).is("select") && $(this).prop('required') && !$(this)[0].checkValidity()) {
//alert("hi");
flag2=0;
}
});
//exp-edu
var inputs = $('#exp-edu').find("select, textarea, input");
inputs.each(function( index ) {
//console.log($(this));
if ($(this).is("input") && $(this).prop('required') && !$(this)[0].checkValidity()) {
//alert("hi");
flag3=0;
}
if ($(this).is("select") && $(this).prop('required') && !$(this)[0].checkValidity()) {
//alert("hi");
flag3=0;
}
});
if(flag1 == 0)
{
if(!$('#per-info').hasClass('active') && $('#comm-add').hasClass('active'))
{
$('.nav-tabs > .active').prev('li').find('a').trigger('click');
}
else
if(!$('#per-info').hasClass('active') && $('#exp-edu').hasClass('active'))
{
$('.nav-tabs li:first').find('a').trigger('click');
}
else
{
}
}
else if(flag2 == 0)
{
if(!$('#comm-add').hasClass('active') && $('#per-info').hasClass('active'))
{
$('.nav-tabs > .active').next('li').find('a').trigger('click');
}
else
if(!$('#comm-add').hasClass('active') && $('#exp-edu').hasClass('active'))
{
$('.nav-tabs > .active').prev('li').find('a').trigger('click');
}
else
{
}
}
else if(flag3 == 0)
{
if(!$('#exp-edu').hasClass('active') && $('#comm-add').hasClass('active'))
{
$('.nav-tabs > .active').next('li').find('a').trigger('click');
}
else
if(!$('#exp-edu').hasClass('active') && $('#per-info').hasClass('active'))
{
$('.nav-tabs li:last').find('a').trigger('click');
}
else
{
}
}
else { }
}
});
</script>
</body>
</html>

jquery selectpicker not working for dynamically generated content

I have used following library to design select box
https://silviomoreto.github.io/bootstrap-select/examples/
<select class="selectpicker" data-live-search="true">
<option data-tokens="ketchup mustard">Hot Dog, Fries and a Soda</option>
<option data-tokens="mustard">Burger, Shake and a Smile</option>
<option data-tokens="frosting">Sugar, Spice and all things nice</option>
</select>
Its working fine for first div .if i generate item from dynamically using jquery then its not showing
$('#add_new_repair').click(function(){
i++;
var mydata='<div class="item form-group"> <label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">Model Parts Name <span class="required">*</span> </label> <div class="col-md-6 col-sm-6 col-xs-12"> <input id="brand_name" class="form-control col-md-7 col-xs-12" data-validate-length-range="6" data-validate-words="2" name="name" placeholder="Model Name e.g Nokia 1100" required="required" type="text"> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <button type="button" class="btn btn-primary" id="remove_repair_'+i+'" onclick="removeRow(this);> <span class="glyphicon glyphicon-minus" aria-hidden="true"> </span>Remove</button> </div> </div> <div class="item form-group"> <label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">Model Parts Price <span class="required">*</span> </label> <div class="col-md-6 col-sm-6 col-xs-12"> <input id="brand_name" class="form-control col-md-7 col-xs-12" data-validate-length-range="6" data-validate-words="2" name="name" placeholder="Price" required="required" type="text"> </div> </div> <div class="item form-group"> <label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">Model Parts Warrenty<span class="required">*</span> </label> <div class="col-md-6 col-sm-6 col-xs-12"> <select id="basic" class="selectpicker show-tick form-control" data-live-search="true"> <option value="AK" selected>---Select--</option> <option value="ss">Alaska</option> <option value="HI">Nokia</option> <option value="CA">Motorolla</option> <option value="NV">Samsung</option> <option value="OR">Oregon</option> <option value="WA">Washington</option> <option value="AZ">Arizona</option> <option value="CO">Colorado</option> </select> </div> </div> <div class="item form-group"> <label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">Model Image <span class="required">*</span> </label> <div class="col-md-6 col-sm-6 col-xs-12"> <input type="file" id="input03" class="form-control"> </div> </div> <div class="ln_solid"></div>';
var content = '<select class="pincode"><option value="1">1</option><option value="2">2</option></select>';
$("#dynamic_data").append(mydata);
});

You are dynamicaly generating select list so after appending content you have to forcefully render selectpicker for dynamically generated select list by following below line
$('.selectpicker').selectpicker('render');

Also, for every change inside html at selectpicker you need to call refresh function. I think that is better than render.
$('.selectpicker').selectpicker('refresh');

you have to use on or dynamically created elements
$(document).on('click','#add_new_repair',function(){
// your code here
})

Cordova app form input fields lagging in showing data while entering

I have created a cordova app using node, angular, sqlite. The app consist of multipage form. When i fill the form then input fields are lagging means they are taking time to show the entered data. Can anyone tell me the reasons why these issues comes.
My farm page is quite big means it consist large no. of fields which are divided in four parts and i am showing them 1 by 1 after by making others hide and then submitting it in the end.
this is the form
<form name="signupForm" data-ng-submit="gotoAddress()">
<div class="col-sm-12 col-xs-12 top-bottom-border"> <span class="heading">Personal Info</span>
</div>
<div class="col-sm-12 col-xs-12">
<div class="form-group form-group-custom">
<label class="form-tags-info-page" for="name">Name</label>
<br>
<input class="form-control" id="input-elements-info-page" placeholder="name" type="text" name="ufname" ng-pattern="/^[a-zA-Z0-9\-\s\,]{1,100}$/" ng-model="myForm.name" required>
<div class="help-block" spellcheck="false" autocomplete="off">
<p style="color: red" ng-show="signupForm.ufname.$dirty && signupForm.ufname.$touched && signupForm.ufname.$error.required">Name is required</p>
<p style="color: red" ng-show="signupForm.ufname.$dirty && signupForm.ufname.$touched && signupForm.ufname.$error.pattern">Enter a valid Name</p>
</div>
</div>
<div class="col-sm-12 col-xs-12 remove-all-padding">
<div class="form-group col-sm-6 col-xs-6 remove-all-padding age-group" ng-class="{ 'has-error' : submitted && signupForm.age.$invalid }">
<label class="form-tags-info-page" for="age">Age(in year)</label>
<br>
<input name="age" class="form-control" id="input-elements-info-page" type="number" ng-model="myForm.age" min="14" max="120" required>
<span class="help-block" style="color:red" ng-show="signupForm.age.$dirty && signupForm.age.$invalid">
<span style="color:red" ng-show="signupForm.age.$error.required">Required!</span>
<span style="color:red" ng-show="signupForm.age.$error.min">Minimum 14</span>
<span style="color:red" ng-show="signupForm.age.$error.max">Invalid Age!</span>
</span>
</div>
<div class="form-group col-sm-6 col-xs-6 remove-all-padding sex-group pull-right">
<label class="form-tags-info-page" for="sex">Sex</label>
<br>
<select class="form-control" id="input-elements-info-page" ng-model="myForm.sex" required>
<option value="" selected disabled>Select Sex</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : submitted && signupForm.ownership.$invalid }">
<label class="form-tags-info-page">Ownership</label>
<select name="ownership" data-ng-model="myForm.ownership" id="input-elements-info-page" placeholder="Select Annual Income" class="form-control" required>
<option value="" selected disabled>Select Ownership</option>
<option value="Owner">Owner</option>
<option value="Successor">Successor</option>
<option value="Blood-relative">Blood-relative</option>
<option value="Contract-farmer">Contract-farmer</option>
</select>
<div ng-show="submitted && signupForm.ownership.$invalid" class="help-block">
<p ng-show="signupForm.ownership.$error.required">Annual Income is required</p>
</div>
</div>
<div class="form-group">
<label class="form-tags-info-page" for="name">Father's Name</label>
<br>
<input class="form-control" id="input-elements-info-page" placeholder="father's name" type="text" name="fname" ng-pattern="/^[a-zA-Z0-9\-\s\,]{1,100}$/" ng-model="myForm.fathername" required>
<div class="help-block">
<p style="color: red" ng-show="signupForm.fname.$dirty && signupForm.fname.$touched && signupForm.fname.$error.required">Father's Name is required</p>
<p style="color: red" ng-show="signupForm.fname.$dirty && signupForm.fname.$touched && signupForm.fname.$error.pattern">Enter a valid Father's Name</p>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : submitted && signupForm.mobile_no.$invalid }">
<label class="form-tags-info-page" for="mobile">Mobile Number</label>
<br>
<input class="form-control" id="input-elements-info-page" type="number" name="mobile_no" placeholder="Mobile No" ng-model="myForm.mobile_no" ng-minlength="10" ng-maxlength="10" ng-pattern="/^[7-9]{1}[0-9]{9}/" required>
<span class="help-block" style="color:red" ng-show="signupForm.mobile_no.$dirty && signupForm.mobile_no.$invalid">
<span style="color:red" ng-show="signupForm.mobile_no.$error.required">Required!</span>
<span style="color:red" ng-show="signupForm.mobile_no.$error.minlength">Too short!</span>
<span style="color:red" ng-show="signupForm.mobile_no.$error.maxlength">Too long!</span>
<span style="color:red" ng-show="signupForm.mobile_no.$error.pattern">Invalid Mobile Number</span>
</span>
</div>
<div class="form-group" ng-class="{ 'has-error' : submitted && signupForm.alt_mobile_no.$invalid }">
<label class="form-tags-info-page" for="mobile">Alternate Mobile Number</label>
<br>
<input class="form-control" id="input-elements-info-page" type="number" name="alt_mobile_no" placeholder="Alternate Mobile No" ng-model="myForm.alt_mobile_no" ng-minlength="10" ng-maxlength="10" ng-pattern="/^[7-9]{1}[0-9]{9}/" required>
<span class="help-block" style="color:red" ng-show="signupForm.alt_mobile_no.$dirty && signupForm.alt_mobile_no.$invalid">
<span style="color:red" ng-show="signupForm.alt_mobile_no.$error.required">Required!</span>
<span style="color:red" ng-show="signupForm.alt_mobile_no.$error.minlength">Too short!</span>
<span style="color:red" ng-show="signupForm.alt_mobile_no.$error.maxlength">Too long!</span>
<span style="color:red" ng-show="signupForm.alt_mobile_no.$error.pattern">Invalid Mobile Number</span>
</span>
</div>
<div class="form-group">
<label class="form-tags-info-page" for="email">Email Id(optional)</label>
<br>
<input class="form-control" id="input-elements-info-page" placeholder="Email" type="email" ng-pattern="/^[A-Za-z]+[a-z0-9._]+#[a-z]+\.[a-z.]{2,5}$/" ng-model="myForm.email">
<div class="help-block">
<p style="color: red" ng-show="signupForm.email.$dirty && signupForm.email.$touched && signupForm.email.$error.pattern">Enter a valid email address</p>
</div>
</div>
<div class="form-group">
<label class="form-tags-info-page" for="size">Family Size</label>
<br>
<select class="form-control" id="input-elements-info-page" ng-model="myForm.family_size" required>
<option value="" selected disabled>Select Family Size</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>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">>10</option>
</select>
</div>
<form class="form-inline col-sm-12 col-xs-12 remove-all-padding">
<div class="form-group col-sm-6 col-xs-6 age-group remove-all-padding">
<label class="form-tags-info-page" for="land">LandArea</label>
<br>
<input class="form-control" id="input-elements-info-page" style="width:100%;" type="number" required ng-model="myForm.l_area">
</div>
<div class="form-group col-sm-6 col-xs-6 remove-all-padding sex-group pull-right">
<label class="form-tags-info-page" for="size">Unit</label>
<br>
<select class="form-control" id="input-elements-info-page" style="width:100%;" ng-model="myForm.area_unit" required>
<option value="" selected disabled>Select Unit</option>
<option value="Acre">Acre</option>
<option value="Hactare">Hactare</option>
<option value="Bigha">Bigha</option>
</select>
</div>
</form>
<div class="form-group">
<label class="form-tags-info-page" for="size">Language Preference</label>
<br>
<select class="form-control" id="input-elements-info-page" ng-model="myForm.language" required>
<option value="" selected disabled>Select Language</option>
<option value="english">English</option>
<option value="hindi">Hindi</option>
<option value="others">Others</option>
</select>
</div>
<form class="form-inline col-sm-12 col-xs-12 remove-all-padding">
<div class="form-group col-sm-6 col-xs-6 remove-all-padding ">
<label class="form-tags-info-page col-sm-12 col-xs-12" for="uid_type">ID Type</label>
<br>
<select class="form-control col-sm-12 col-xs-12" id="input-elements-info-page" style="width:100%;" ng-model="myForm.farmerid_type">
<option value="" selected disabled>Select id Type</option>
<option value="Aadhar">Aadhar</option>
<option value="VoterID">VoterID</option>
<option value="Driving Licence">Driving Licence</option>
</select>
</div>
<div class="form-group col-sm-6 col-xs-6 remove-all-padding sex-group">
<label class="form-tags-info-page" for="uid_no">ID No.</label>
<br>
<input class="form-control" id="input-elements-info-page" type="text" style="width:100%;" ng-model="myForm.farmeruid_no" required>
</div>
</form>
<div class="col-sm-12 col-xs-12 remove-all-padding">
<div class="col-sm-12 col-xs-12 camera-img-wrapp">
<div class="col-sm-6 col-xs-6"> <span ng-click="takePic()" class="glyphicon glyphicon-camera camera-pic"></span>
</div>
<div class="col-sm-6 col-xs-6"> <span ng-click="takeScan();" class="glyphicon glyphicon-camera camera-pic"></span>
</div>
</div>
<div class="col-sm-12 col-xs-12">
<div class="col-sm-6 col-xs-6" style="text-align:center;font-weight:bold;">
<p class="form-tags-info-page">Take Pic</p>
</div>
<div class="col-sm-6 col-xs-6" style="text-align:center;font-weight:bold;">
<p class="form-tags-info-page">Take Scan</p>
</div>
</div>
</div>
<div class="form-group col-sm-12 col-xs-12 remove-all-padding" ng-show="imageSrc || scanSrc">
<div class="col-sm-4 col-xs-4 col-sm-offset-2 col-xs-offset-2"> <span ng-show="imageSrc"><img src="" id="myImage" style="width:100px;height:100px;"></span>
</div>
<div class="col-sm-4 col-xs-4 col-sm-offset-2 col-xs-offset-2"> <span ng-show="scanSrc"><img src="" id="myScan" style="width:100px;height:100px;"></span>
</div>
</div>
<div class="form-group col-sm-12 col-xs-12">
<div class="btn-group btn-next">
<input class="btn btn-primary btn-lg" type="submit" value="Next">
</div>
</div>
</div>
</form>
on creating android app fields name,fathername are lagging. they are showing the data we are entering after few seconds which is too much.

Since you are not going into very much detail with your question, I cant go into detail with my answer.
Ill try to explain where your issues might come from and adjust my answer if you provide more information:
Cordova uses WebView container in a native App which basicly uses the same engine for rendering as your mobile browser. The performance bottleneck of browsers is accessing of DOM elements (causing reflow and rerendering). Therefore you have to be very aware of the performance issues it can create communicating with DOM api. If Your DOM changes take more than 16 ms to render your application becomes visibly slow and sluggish. Going down from 60 fps your performance issues get more and more obvious to the user.
Since mobile devices are alot slower than desktop computers you will have to be very cautious about alot of things.
There are alot of performance hacks you can apply to your mobile web app.
here are some: https://quickleft.com/blog/4-steps-to-minimizing-rendering-issues-in-cordova-applications/
With ReactJs and overuse of CSS transitions you can achive ~60fps applications that almost seem to be native. I have made good experiences with this.
EDIT1: My Hint:
rebuild your Frontend with ReactJs and avoid overuse of frameworks. Keep your DOM structure clean and do animations with CSS (try to avoid js based animations as much as you can!). Measure your FPS while you develop and find performance issues straight away. To build a nice performant nativelike app you will find no way arround this approach.
I hope this helped.