Develop Reference

How to give dynamic id to the clone div in jquery. how can i give dynamic id to the clone div?

this is my JavaScript code. i tried my best can anyone help me.How to give dynamic id to the clone div in jquery. how can i give dynamic id to the clone div?It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to .
$(document).ready(function() {
$("body").on("click",".add-more",function(){
var html = $(".after-add-more").first().clone();
$(html).find(".change").html("<label for=''> </label><br/><a class='btn btn-danger remove'>- Remove</a>");
$(".after-add-more").last().after(html);
});
$("body").on("click",".remove",function(){
$(this).parents(".after-add-more").remove();
});
});
<div class="col-md-12 col-xl-12 col-lg-12">
<div class="after-add-more">
<div class="row">
<div class="col-lg-12 col-xl-12 col-md-12">
<div class="form-group f-g-o">
<label for="usr">Select Categories</label>
<select class="selectpicker category form-control #error('category_id') is-invalid #enderror" name="category_id[]">
<option>Select Category</option>
#foreach($categories as $category)
<option value="{{$category->id}}" >{{$category->cat_name}}</option>
#if(count($category->childs))
#foreach($category->childs as $cat)
<option class="sub_child" value="{{$cat->id}}">-- {{$cat->cat_name}}</option>
#endforeach
#endif
#endforeach
</select>
#error('category_id')
<span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
#enderror
</div>
</div>
<div class="col-lg-2 col-xl-2 col-md-12">
<div class="form-group f-g-o">
<label for="usr">Qty</label>
<input type="number" name="qty[]" class="form-control #error('qty') is-invalid #enderror" placeholder="Qty on combo" value="{{ old('qty') ?? 1 }}" required data-error="This field is required." />
<div class="help-block with-errors"></div>
#error('qty')
<span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
#enderror
</div>
</div>
<div class="col-lg-12 col-xl-12 col-md-12">
<div class="form-group f-g-o">
<label for="usr">Select Products</label>
<select class="products selectpicker form-control #error('product_id') is-invalid #enderror" multiple name="product_id[]">
</select>
#error('product_id')
<span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
#enderror
</div>
</div>
<div class="col-lg-12 col-xl-12 col-md-12">
<div class="form-group f-g-o change">
<label for=""> </label><br/>
<a class="btn btn-success add-more">+ Add More</a>
</div>
</div>
</div>
</div>
</div>

$(document).ready(function() {
$("body").on("click",".add-more",function(){
var html = $(".after-add-more").first().clone();
$(html).find(".change").html("<label for=''> </label><br/><a class='btn btn-danger remove'>- Remove</a>");
$(".after-add-more").last().after(html);
});
$("body").on("click",".remove",function(){
$(this).parents(".after-add-more").remove();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-12 col-xl-12 col-lg-12">
<div class="after-add-more">
<div class="row">
<div class="col-lg-12 col-xl-12 col-md-12">
<div class="form-group f-g-o">
<label for="usr">Select Categories</label>
<select class="selectpicker category form-control" name="category_id">
<option>Select Category</option>
<option value="11" >11</option>
<option value="12" >12</option>
<option value="13" >13</option>
<option class="sub_child" value="1"> 1</option>
<option class="sub_child" value="2"> 2</option>
<option class="sub_child" value="3"> 3</option>
</select>
<span class="invalid-feedback" role="alert"><strong></strong></span>
</div>
</div>
<div class="col-lg-2 col-xl-2 col-md-12">
<div class="form-group f-g-o">
<label for="usr">Qty</label>
<input type="number" name="qty" class="form-control" placeholder="Qty on combo" value="1" required data-error="This field is required." />
<div class="help-block with-errors"></div>
<span class="invalid-feedback" role="alert"><strong></strong></span>
</div>
</div>
<div class="col-lg-12 col-xl-12 col-md-12">
<div class="form-group f-g-o">
<label for="usr">Select Products</label>
<select class="products selectpicker form-control is-invalid" multiple name="product_id">
<option value="a" >a</option>
<option value="b" >a</option>
<option value="c" >c</option>
<option value="d" >d</option>
<option value="e" >e</option>
</select>
<span class="invalid-feedback" role="alert"><strong></strong></span>
</div>
</div>
<div class="col-lg-12 col-xl-12 col-md-12">
<div class="form-group f-g-o change">
<label for=""> </label><br/>
<a class="btn btn-success add-more">+ Add More</a>
</div>
</div>
</div>
</div>
</div>

How to dynamically create text boxes on selection of a dropdown

I am new to web development and I am developing a form in HTML using Bootstrap.So I have a div like below:
<div class="form-group">
<label class="col-md-4 control-label" >Users</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-tasks"></i></span>
<select name="state" class="form-control selectpicker" >
<option value=" " >Please select the number of users</option>
<option>1</option>
<option>2</option>
<option >3</option>
</select>
</div>
</div>
</div>
So depending on the selection of number I want to dynamically create the text box like below div.
<div class="form-group">
<label class="col-md-4 control-label">Username</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input name="phone" placeholder="Username" class="form-control" type="text">
</div>
</div>
</div>
For example if he selects 1 then one text box should appear if selects 2 then 2 should appear.Any help is appreciated.

Try this
$('.selectpicker[name=state]').change(function() {
var i = 0;
//$('.input-group').children('input').remove() *for reset the inbox on change*
while (i < parseInt($(this).val())) {
$('.input-group').append('<input name="phone" placeholder="Username" class="form-control" type="text">')
i++;
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label class="col-md-4 control-label">Users</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-tasks"></i></span>
<select name="state" class="form-control selectpicker">
<option value=" " >Please select the number of users</option>
<option>1</option>
<option>2</option>
<option >3</option>
</select>
</div>
</div>
</div>

After submit form using post method form data appends to url in php why?

I am developing an application in which I send form data using ajax. After success function data add into the database but it does not display any messages and complete form data appends to url.
In this I am using "POST" method.
Why this data appends to form and not showing any messages to result field.
This is my html code
<form class="form-horizontal form-label-left" id="myForm" novalidate>
<span class="section">Personal Info</span>
<div class="item form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="fname"> First Name <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input id="fname" class="form-control col-md-7 col-xs-12" data-validate-length-range="6" data-validate-words="1" name="fname" placeholder="First Name" 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="lname"> Last Name <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input id="lname" class="form-control col-md-7 col-xs-12" data-validate-length-range="6" data-validate-words="1" name="lname" placeholder="Last Name" 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="username"> Username <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input id="username" class="form-control col-md-7 col-xs-12" data-validate-length-range="0,25" data-validate-words="1" name="username" placeholder="Username" 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="email">Email <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input type="email" id="email" name="email" required="required" class="form-control col-md-7 col-xs-12" placeholder="abc#gmail.com">
</div>
</div>
<div class="item form-group">
<label for="password" class="control-label col-md-3">Password <span class="required">*</span></label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input id="password" type="password" name="password" data-validate-length="6,8" class="form-control col-md-7 col-xs-12" required="required">
</div>
</div>
<div class="item form-group">
<label for="password2" class="control-label col-md-3 col-sm-3 col-xs-12">Repeat Password</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input id="password2" type="password" name="password2" data-validate-linked="password" class="form-control col-md-7 col-xs-12" required="required">
</div>
</div>
<div class="item form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="telephone">Telephone <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input type="tel" id="telephone" name="telephone" required="required" data-validate-length-range="8,20" class="form-control col-md-7 col-xs-12">
</div>
</div>
<div class="item form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="status">Status</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<select id="status" name="status" class="form-control col-md-7 col-xs-12">
<option>Select Status</option>
<option value="ACTIVE" >Active</option>
<option value="INACTIVE">Inactive</option>
<option value="VACATION">Vacation</option>
</select>
</div>
</div>
<div class="item form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="role">Role</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<select id="role" name="role" class="form-control col-md-7 col-xs-12">
<option value="ACTIVE" >Select Role Name</option>
<option value="Manager" >Manager</option>
<option value="Operator">Operator</option>
<option value="Admin">Admin</option>
</select>
</div>
</div>
<div class="ln_solid"></div>
<div class="form-group">
<div class="col-md-6 col-md-offset-3">
<button type="reset" id="reset" class="btn btn-primary">Cancel</button>
<button id="send" type="submit" class="btn btn-success">Submit</button>
</div>
</div>
<div id="result"></div>
</form>
After submit I call js file in which I am using ajax.
ajax function
function processForm( e ){
alert(e);
$.ajax({
url: 'add_user_check.php',
dataType: 'text',
type: 'post',
contentType: 'application/x-www-form-urlencoded',
data: $(this).serialize(),
success: function( data, textStatus, jQxhr )
{
alert(data);
var split = data.split(',');
var display = split[0];
var msg = split[1];
$('#result').html( msg );
},
error: function( jqXhr, textStatus, errorThrown ){
$('#result').html( "Connection error :"+errorThrown);
}
});
e.preventDefault();
}
$('#myForm').submit( processForm );
If data is submitted successfully it returns success message and will display to result field. But message is not display and complete data appends to the url. As shown in fig.
Why this happens? and why it does not display proper message to result field.
Thanks in advance.

In short because there is no real error. PHP is not processing your request and so goes about its normal business. The URL has the POST data stuck in there as it normally would, only it isnt being flushed out since it isnt being redirected.
This is because you haven't actually specified a method for the form.
You need to use
<form method="post" ....

use method="post" in html form .

Jquery Select2 Make Dynamically

I want to generate Jquery select 2 when clicking a plus button. see below screenshot
the append functionality and removing rows are working perfectly from side.
I am initializing a div with display none for appending HTML.
like below,,,
<div class="newbrndsrs" style="display:none">
<div class="row">
<div class="col-md-5" style="margin-bottom: 15px;">
<div class="form-group">
<label for="" class="col-lg-4 col-sm-4" style="text-align: right;">Trade/Brand Name</label>
<div class="col-lg-8 col-sm-8 prepend-icon">
<select name="brandfk[]" class="form-control form-white modlfetch" data-placeholder="Trade/Brand Name">
<option value=""></option>
<?php
while($row9=mysql_fetch_assoc($brandfetchAjax)){ ?>
<option value="<?php echo $row9['ID'];?>"><?php echo $row9['BrandName'];?></option>
<?php } ?>
</select>
</div>
</div>
</div>
<div class="col-md-5" style="margin-bottom: 15px;">
<div class="form-group">
<label for="" class="col-lg-4 col-sm-4" style="text-align: right;">Series Name</label>
<div class="col-lg-8 col-sm-8">
<select name="brand[]" class="form-control form-white slctjpmodelname">
</select>
</div>
</div>
</div>
<span class="btn btn-primary addline"><i class="glyphicon glyphicon-minus"></i></span>
</div>
</div>
When Clicking the Button plus I am taking the above HTML and bind it to the bottom of the plus button.
<div class="row apndarea">
<div class="col-md-5" style="margin-bottom: 15px;">
<div class="form-group">
<label for="" class="col-lg-4 col-sm-4" style="text-align: right;">Trade/Brand Name</label>
<div class="col-lg-8 col-sm-8 prepend-icon">
<select name="brandfk[]" class="form-control form-white modlfetch" data-placeholder="Trade/Brand Name">
<option value=""></option>
<?php
while($row2=mysql_fetch_assoc($brandfetch)){ ?>
<option value="<?php echo $row2['ID'];?>"><?php echo $row2['BrandName'];?></option>
<?php } ?>
</select>
</div>
</div>
</div>
<div class="col-md-5" style="margin-bottom: 15px;">
<div class="form-group">
<label for="" class="col-lg-4 col-sm-4" style="text-align: right;">Series Name</label>
<div class="col-lg-8 col-sm-8">
<select name="brand[]" class="form-control form-white slctjpmodelname">
<option value="">Series </option>
<option value="">Series </option>
<option value="">Series </option>
</select>
</div>
</div>
</div>
<span class="btn btn-primary addline"><i class="glyphicon glyphicon-plus"></i></span>
</div>
Jquery....
$(".addline").click(function(){
var eqtype = $("select[name=EquipmentTypeID]").val();
if(eqtype == ""){
$("select[name=EquipmentTypeID]").next().show();
return false;
}else{
$(".form-error").hide();
$(".apndarea").after($(".newbrndsrs").html());
}
});
But New Dynamic Select2 Not working....
I cant make click on it...
What is the Issue ?

$(document).on('click',".addline", function(){
var eqtype = $("select[name=EquipmentTypeID]").val();
if(eqtype == ""){
$("select[name=EquipmentTypeID]").next().show();
return false;
}else{
$(".form-error").hide();
$(".apndarea").after($(".newbrndsrs").html());
}
});
Click is not binded to dynamically created object, use on

Use Event deligation
$(document).on('click', ".addline", function () {
var eqtype = $("select[name=EquipmentTypeID]").val();
if (eqtype == "") {
$("select[name=EquipmentTypeID]").next().show();
return false;
} else {
$(".form-error").hide();
$(".apndarea").after($(".newbrndsrs").html());
}
});

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.