Develop Reference

Display value in a modal

i have a table that i want the user to be able to edit, when the edit button is clicked i want the value of the field shown in the modal. i managed to do that however all values are being displayed i only want the values of the field related to the edit button clicked.
this is my code
<!-- Edit Modal HTML -->
<div id="editEmployeeModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
{%for element in data%}
<form method="post">
<div class="modal-header">
<h4 class="modal-title">Edit User</h4>
<input name="_id" value="_id" id="the.id" hidden></input>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<div class="form-group">
<label>First Name</label>
<input type="text" name="UPusername" value="{{ element['username'] }}" class="form-control" >
</div>
<div class="form-group">
<label>Last Name</label>
<input type="text" name="UPlast_name" value="{{ element['last_name']}}" class="form-control" >
</div>
<div class="form-group">
<label>Email</label>
<input type="email" name="UPemail" value="{{ element['email'] }}" class="form-control" >
</div>
<div class="form-group">
<label>Registration number</label>
<input type="text" name="UPrej_num" value="{{ element['rej_num'] }}" class="form-control" >
</div>
<div class="form-group">
<label>Position</label>
<select class=" position-form" id="exampleFormControlSelect1" name="UPposition">
<option value="">Choose Option...</option>
<option value="President">President</option>
<option value="Manager">Manager </option>
<option value="Managing Director">Managing Director</option>
<option value="R department">HR department </option>
<option value="Accountant">Accountant</option>
<option value="Project Manager">Project Manager</option>
<option value="Other">Other</option>
</select>
</div>
</div>
<div class="modal-footer">
<input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
<input type="submit" class="btn btn-info" value="Save">
</div>
</form>
{%endfor%}
</div>
</div>
</div>
And this is how it's currently shown:

I just want to disable the Approve button in updating process with modal boostrap

This is the modal form that show after clicking the view button in my table.
Every field already have data value because I am updating a list.
Now I want to disabled the Approve button base on status which is "Pending" and "Approved"
<form action="code_book.php" method="POST">
<div class="modal fade" id="updatemodal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<input type="hidden" name="update_id" id="update_id">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Update Appointment Status</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<!-- start modal content -->
<div class="modal-body">
<div class="mb-3">
<label for="#service" class="col-md-6">Appointment Date</label><label for="#description" class="col-md-6">Appointment Time</label><br>
<input type="text" class="col-md-6 inputdesign" name="date" id="date" readonly>
<input type="text" class="col-md-6 inputdesign" name="time" id="time" readonly>
</div>
<div class="mb-3">
<label for="#service" class="col-md-6">Name</label><label for="#description" class="col-md-6">Contact</label><br>
<input type="text" class="col-md-6 inputdesign" name="username" id="username" readonly>
<input type="text" class="col-md-6 inputdesign" name="contact" id="contact" readonly>
</div>
<div class="mb-3">
<label for="#service" class="col-md-6">Pet Name</label><label for="#description" class="col-md-6">Service</label><br>
<input type="text" class="col-md-6 inputdesign" name="bookpet_id" id="bookpet_id" readonly>
<input type="text" class="col-md-6 inputdesign" name="service_id" id="service_id" readonly>
</div>
<div class="mb-3">
<label for="#service" class="col-md-12">Complaint</label>
<input type="text" class="form-control inputdesign" name="complaint" rows="3" id="complaint" readonly>
</div>
<div class="mb-3">
<label for="#description" style="margin-top: 10px;" class="form-label">Status</label>
<input type="text" class="form-control inputdesign" name="status" id="status" placeholder="Enter the service" readonly>
</div>
</div>
<div class="modal-footer">
<button type="submit" name="updatedata" id="updatedata" class="btn btn-dark button">Approve</button>
<button type="button" class="btn btn-danger" data-bs-dismiss="modal" >Cancel</button>
</div>
</div>
</div>
</div>

You need some easy JavaScript for that, assuming you're just initializing the button once because the input is readonly.
$(document).ready(function() {
$('#datatableid tbody').on('click', '.updatebtn', function() {
$('#updatemodal').modal('show');
$tr = $(this).closest('tr');
var data = $tr.children("td").map(function() {
return $(this).text();
}).get();
console.log(data);
$('#update_id').val(data[0]);
$('#date').val(data[1]);
$('#time').val(data[2]);
$('#username').val(data[3]);
$('#contact').val(data[4]);
$('#bookpet_id').val(data[5]);
$('#service_id').val(data[6]);
$('#complaint').val(data[7]);
$('#status').val(data[8]);
// disable input if not approved
$('#updatedata').prop('disabled', data[8] !== 'Approved');
});
});
<input type="text" id="status" placeholder="Enter the service" value="Pending" readonly />
<button type="submit" name="updatedata" id="updatedata" class="btn btn-dark button">Approve</button>

php is not working with all $_POST in html

I have a problem where $_POST is working ("Undefined index"), only the last 4 variables that keep working, please help.
For help:
1- I'm using 4 modals there id's=MyModal1,2,3,4, each modal has his own submit button.
2- the last 4 Posts are placed in the last modal id=MyModal4 and I think because of it the other $_POSTS don't work (submit only the last modal).
3- each modal body has his own form
4- for full use you must fill all the field
5- each modal body has his own Form with methode=Post
my code:
<!DOCTYPE html>
<html>
<head>
<?php
$date=date('Y-m-d');
$date3=date('Y-m-d', strtotime($date . "+3 months") );
$date6=date('Y-m-d', strtotime($date . "+6 months") );
$date12=date('Y-m-d', strtotime($date . "+12 months") );
?>
<?php
$nom=$_POST['nom_client'];
$prenom=$_POST['pernomclient'];
$date_naissance=$_POST['datenaiss'];
$lieu_naissance=$_POST['lieunaiss'];
$commune=$_POST['commune'];
$dayra=$_POST['daira'];
$willaya=$_POST['wilaya'];
$proffession=$_POST['proffesion'];
$Num_per=$_POST['numpermis'];
$date_obt=$_POST['dateobt'];
$date_deliv=$_POST['delivre'];
$date_eff=$_POST['effet'];
$date_exp=$_POST['expiration'];
$numserie=$_POST['numserie'];
$type=$_POST['typevoi'];
$marque=$_POST['marque'];
$aces_asies=$_POST['acesass'];
$num_matricul=$_POST['immatricul'];
echo $nom;
echo $prenom;
echo $date_naissance;
echo $lieu_naissance;
echo $commune;
echo $dayra;
echo $willaya;
echo $proffession;
echo $Num_per;
echo $date_obt;
echo $date_deliv;
echo $date_eff;
echo $date_exp;
echo $numserie;
echo $type;
echo $marque;
echo $aces_asies;
echo $num_matricul;
?>
<title>assurence</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- <link rel="stylesheet" href="css/bootstrap.min.css">-->
<link rel="stylesheet" href="assurance1css.css">
</head>
<body>
<div>
<form method="POST">
<div class="button">
<img src="lll.jpg" class="rounded" width="170px" height="170px">
<button type="submit" name="suivantn" class="btn button1 " data-toggle="modal" data-target="#myModal">
Nouveau-Client
</button>
<button type="button" class="btn button1 " data-toggle="modal" data-target="#myModal">
Ancien Client
</button>
</div>
<!-- information de client -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Informations personnelle </h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<form method="POST" class="needs-validation" novalidate>
<!-- Modal body -->
<div class="modal-body">
<p> --------------------------------------------------------- </p>
<input type="radio" name="gender" value="male"> Mr
<input type="radio" name="gender" value="female"> Meme
<input type="radio" name="gender" value="unknown" > Melle
<p> --------------------------------------------------------- </p>
<div class="form-group">
<label for="nauto">Nom du client:</label>
<input type="text" class="form-control" id="nauto" placeholder="Entrer le Nom du client" name="nom_client" required >
<div class="valid-feedback">Valide.</div>
<div class="invalid-feedback">Veuillez remplir ce champ.</div>
</div>
<div class="form-group">
<label for="nauto">Prenom du client :</label>
<input type="text" class="form-control" id="dateverif" placeholder="Entrer le Prenom du client" name="pernomclient" required >
<div class="valid-feedback">Valide.</div>
<div class="invalid-feedback">Veuillez remplir ce champ.</div>
</div>
<div class="form-group">
<label for="nauto">Date de naissance :</label>
<input type="Date" class="form-control" id="datefin" placeholder=" " name="datenaiss" value="<?php echo $date; ?>"
required >
<div class="valid-feedback">Valide.</div>
<div class="invalid-feedback">Veuillez remplir ce champ.</div>
</div>
<div class="form-group">
<label for="nauto">Lieu de naissance:</label>
<input type="text" class="form-control" id="nauto" placeholder="Entrer le Lieu de naissance" name="lieunaiss" required >
<div class="valid-feedback">Valide.</div>
<div class="invalid-feedback">Veuillez remplir ce champ.</div>
</div>
<div class="form-group">
<label for="nauto">Commune du client:</label>
<input type="text" class="form-control" id="nauto" placeholder="Entrer la Commune du client" name="commune" required >
<div class="valid-feedback">Valide.</div>
<div class="invalid-feedback">Veuillez remplir ce champ.</div>
</div>
<div class="form-group">
<label for="nauto">Daira du client:</label>
<input type="text" class="form-control" id="nauto" placeholder="Entrer la Daira du client" name="daira" required >
<div class="valid-feedback">Valide.</div>
<div class="invalid-feedback">Veuillez remplir ce champ.</div>
</div>
<div class="form-group">
<label for="nauto">Willaya du client:</label>
<input type="text" class="form-control" id="nauto" placeholder="Entrer la Willaya du client" name="wilaya" required >
<div class="valid-feedback">Valide.</div>
<div class="invalid-feedback">Veuillez remplir ce champ.</div>
</div>
<div class="form-group">
<label for="nauto">Sa proffesion:</label>
<input type="text" class="form-control" id="nauto" placeholder="Entrer Sa proffesion" name="proffesion" required >
<div class="valid-feedback">Valide.</div>
<div class="invalid-feedback">Veuillez remplir ce champ.</div>
</div>
<script>
// Disable form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Get the forms we want to add validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('a été validé');
}, false);
});
}, false);
})();
</script>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<h4 class="modal-title text-left "> .</h4>
<button type="submit" class="btn btn-primary" name="suivant1" data-toggle="modal" data-dismiss="modal" data-target="#myModal2" >Suivant</button>
</div>
</form>
</div>
</div>
</div>
<!-- Permis -->
<div class="modal" id="myModal2">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Permis :</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<form method="POST" class="needs-validation" novalidate>
<!-- Modal body -->
<div class="modal-body">
<div class="form-group">
<label for="nauto">NUM-Permi:</label>
<input type="number" class="form-control" id="nauto" placeholder="Entrer le NUM-Permi" name="numpermis" required >
<div class="valid-feedback">Valide.</div>
<div class="invalid-feedback">Veuillez remplir ce champ.</div>
</div>
<div class="form-group">
<label for="nauto">Date Obtention :</label>
<input type="Date" class="form-control" id="dateverif" placeholder=" " name="dateobt" required >
<div class="valid-feedback">Valide.</div>
<div class="invalid-feedback">Veuillez remplir ce champ.</div>
</div>
<div class="form-group">
<label for="nauto">Deliver le :</label>
<input type="Date" class="form-control" id="datefin" placeholder=" " name="delivre" required="" >
<div class="valid-feedback">Valide.</div>
<div class="invalid-feedback">Veuillez remplir ce champ.</div>
</div>
<div>
<p><u><strong> Permis Categorie</strong></u> </p>
<select >
<option id="one"><strong>Type A </strong></option>
<option id="two"><strong>Type B </strong></option>
<option id="three"><strong>Type C </strong></option>
</select>
</div>
<script>
// Disable form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Get the forms we want to add validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('a été validé');
}, false);
});
}, false);
})();
</script>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<h4 class="modal-title text-left "> .</h4>
<button type="submit" class="btn btn-primary" name="suivant2" data-toggle="modal" data-dismiss="modal" data-target="#myModal3">Suivant</button>
</div>
</form>
</div>
</div>
</div>
<div class="modal" id="myModal3">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Durée :</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<form method="POST" class="needs-validation" novalidate>
<!-- Modal body -->
<div class="modal-body">
<div class="form-group">
<label for="nauto">Durée :</label>
<select onclick="modal1()" id="durée">
<option value="volvo">3mois</option>
<option value="saab">6mois</option>
<option value="mercedes">12mois</option>
</select>
<div class="form-group">
<label for="nauto">Effet:</label>
<input type="text" class="form-control" id="eff" name="effet" required readonly>
<div class="valid-feedback">Valide.</div>
<div class="invalid-feedback">Veuillez remplir ce champ.</div>
</div>
<div class="form-group">
<label for="nauto">Expiration</label>
<input type="text" class="form-control" id="exp" name="expiration" required readonly >
<div class="valid-feedback">Valide.</div>
<div class="invalid-feedback">Veuillez remplir ce champ.</div>
</div>
</div>
<script>
// Disable form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Get the forms we want to add validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('a été validé');
}, false);
});
}, false);
})();
</script>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<h4 class="modal-title text-left "> .</h4>
<button type="submit" class="btn btn-primary" name="suivant3" data-toggle="modal" data-dismiss="modal" data-target="#myModal4" >Suivant</button>
</div>
</form>
</div>
</div>
</div>
<div class="modal" id="myModal4">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Information de voiture:</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<form method="POST" class="needs-validation" novalidate>
<div class="modal-body">
<div class="form-group">
<label for="nauto">NUM-dans la serie du type :</label>
<input type="number" class="form-control" id="nauto" placeholder="Entrer NUM-dans la serie du type " name="numserie" required >
<div class="valid-feedback">Valide.</div>
<div class="invalid-feedback">Veuillez remplir ce champ.</div>
</div>
<div class="form-group">
<label for="nauto">Type :</label>
<input type="number" class="form-control" id="dateverif" placeholder="Entrer type d voiture" name="typevoi" required >
<div class="valid-feedback">Valide.</div>
<div class="invalid-feedback">Veuillez remplir ce champ.</div>
</div>
<div class="form-group">
<label for="nauto">Marque :</label>
<input type="text" class="form-control" id="dateverif" placeholder="Entrer la marque " name="marque" required >
<div class="valid-feedback">Valide.</div>
<div class="invalid-feedback">Veuillez remplir ce champ.</div>
</div>
<div class="form-group">
<label for="nauto">Aces assise:</label>
<input type="number" class="form-control" id="dateverif" placeholder="Entrer nmbr d places" name="acesass" required >
<div class="valid-feedback">Valide.</div>
<div class="invalid-feedback">Veuillez remplir ce champ.</div>
</div>
<div class="form-group">
<label for="nauto">Energie:</label>
<select >
<option id="ess" value="Ess"><strong>Ess</strong></option>
<option id="gaz" value="Gaz"><strong>Gaz</strong></option>
<option id="dsl" value="Dsl"><strong>Dsl</strong></option>
</select>
</div>
<div class="form-group">
<label for="nauto">Num d'immatriculation:</label>
<input type="number" class="form-control" id="dateverif" placeholder="Entrer Num d'immatriculation" name="immatricul" required >
<div class="valid-feedback">Valide.</div>
<div class="invalid-feedback">Veuillez remplir ce champ.</div>
</div>
<script>
// Disable form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Get the forms we want to add validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('a été validé');
}, false);
});
}, false);
})();
</script>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<h4 class="modal-title text-left "> .</h4>
<button type="submit" class="btn btn-success" name="enregistrer">Enregistrer</button>
</div>
</form>
</div>
</div>
</div>
<script>
function modal1() {
var select=document.getElementById('durée');
var strUser = select.options[select.selectedIndex].value;
if(strUser=="volvo"){
document.getElementById("eff").defaultValue = "<?php echo $date;?>";
document.getElementById("exp").defaultValue = "<?php echo $date3;?>";
}
else if(strUser=="saab"){
document.getElementById("eff").defaultValue = "<?php echo $date;?>";
document.getElementById("exp").defaultValue = "<?php echo $date6;?>";
}
else if(strUser=="mercedes"){
document.getElementById("eff").defaultValue = "<?php echo $date;?>";
document.getElementById("exp").defaultValue = "<?php echo $date12;?>";
}
}
</script>
</form>
</div>
</body>
</html>

You can use JQuery ajax to achieve this. Sample code given below
<!-- include JQuery if not added already -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$('#myModal1 form, #myModal2 form, #myModal3 form, #myModal4 form').submit(function() {
$.ajax({
url : '',
type : 'POST',
data : $('#myModal1 form, #myModal2 form, #myModal3 form, #myModal4 form').serialize(),
success : function() {
window.location = '';
}
});
return false;
});
</script>

Submit form with jquery ajax + parsley validation in modal

The below is my modal code:
<div class="modal fade" id="offline-payment">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Offline Payment</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form" id="offlinepaymentform">
<div class="form-group">
<label class="col-sm-3 control-label">Payment Due Amount</label>
<label class="col-sm-6 control-label text-left" >$ <xsl:value-of select="payload/responseBody/com.alacriti.eippmodel.vo.InvoiceDetailsVO/paymentDueAmount"></xsl:value-of></label>
<input name="paymentDueAmount" type="hidden" class="form-control" value="{payload/responseBody/com.alacriti.eippmodel.vo.InvoiceDetailsVO/paymentDueAmount}" />
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Payment Date</label>
<div class="col-sm-6 validation-parsley">
<div class="col-sm-12 input-group date dp1" data-date="" data-date-format="dd-mm-yyyy">
<input name="paymentDate" class="form-control" size="16" readonly="true" type="text" data-parsley-required-message="Select date" required="true"/>
<div class="add-on input-group-addon"><span class="glyphicon glyphicon-calendar"></span> </div>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Payment Method</label>
<div class="col-sm-6 validation-parsley">
<select name="fundingSourceTypeId" class="form-control" data-parsley-required-message="Select payemnet method" required="true" >
<option value="">Select Payment Method</option>
<xsl:for-each select="payload/responseBody/fundingSourceTypeVOList/com.alacriti.eippmodel.vo.FundingSourceTypeVO">
<xsl:if test="fundingSourceTypeId != 1">
<xsl:element name="option">
<xsl:attribute name="value"><xsl:value-of select="fundingSourceTypeId" /></xsl:attribute>
<xsl:value-of select="fundingSourceType"/>
</xsl:element>
</xsl:if>
</xsl:for-each>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Payment Amount</label>
<div class="col-sm-6 validation-parsley">
<input name="paymentAmount" type="text" class="form-control" data-parsley-required-message="Please enter amount" required="true" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Payment Details</label>
<div class="col-sm-6">
<input name="offlinePaymentdetails" class="form-control" type="text" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Memo Details</label>
<div class="col-sm-6">
<textarea name="notes" class="form-control"></textarea>
</div>
</div>
<input name="invoiceIntID" type="hidden" class="form-control" value="{payload/responseBody/com.alacriti.eippmodel.vo.InvoiceDetailsVO/invoiceInternalId}" />
<input name="invoiceID" type="hidden" class="form-control" value="{payload/responseBody/com.alacriti.eippmodel.vo.InvoiceDetailsVO/invoiceID}" />
<input name="offlinePaymentVendorPartyId" type="hidden" class="form-control" value="{payload/responseBody/com.alacriti.eippmodel.vo.InvoiceDetailsVO/vendorPartyId}" />
<input name="offlinePaymentCustomerPartyId" type="hidden" class="form-control" value="{payload/responseBody/com.alacriti.eippmodel.vo.InvoiceDetailsVO/customerVo/customerId}" />
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">Cancel</button>
<button id="submit-offline-payment" type="button" class="btn btn-primary pull-right" >Save</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
My jquery for parsley validation and ajax form submit:
$(document).ready(function(){
$("#submit-offline-payment").click(function(){
$('#offlinepaymentform').parsley('validate');
if($('#offlinepaymentform').parsley().isValid())
{
var finalUrl = '/payment/offlinePayment';
var formData = $('#offlinepaymentform').serialize();
$.ajax({
type:'post',
url: finalUrl,
data : formData,
dataType: 'text',
success: function(data){
$('#offline-payment').empty();
$('#offline-payment').append(data);
},
error: function(){
alert('error');
}
});
}
});
});
I am able to get the ul attached to the input box after parsley validation. But error messages are not being displayed in the parsley ul tags. Please help me out

Jquery .html wont load the css

Says, i write this code :
<div class="modal fade" id="addnewevent">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
<h4 class="modal-title">
New Event
</h4>
</div>
<div class="modal-body">
<form name="newevent" id="newevent" action="" method="post">
<div class="form-group">
<label for="eName">Title</label>
<input name="eName" id="eName" class="form-control" type="text">
</div>
<div class="form-group">
<label for="eDate">Date</label>
<div class="input-group date datepicker" data-date-autoclose="true" data-date-format="dd-mm-yyyy">
<input name="eDate" id="eDate" class="form-control" type="text" value="<?=date("d-m-Y",$now)?>"><span class="input-group-addon"><i class="icon-calendar"></i></span></input>
</div>
</div>
<div class="form-group">
<label for="eLevel">Event Level</label>
<select name="eLevel" id="eLevel" class="select2able" >
<option value=""></option>
<option value="1">Normal</option>
<option value="2">Urgent</option>
</select>
</div>
<div class="form-group">
<label for="eDesc">Deskripsi</label>
<textarea name="eDesc" id="eDesc" class="form-control" rows="3" maxlength="150"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" id="add" type="button">Add</button><button class="btn btn-default-outline" data-dismiss="modal" type="button">close</button>
</div>
</div>
</div>
</div>
This will gave me result like this picture :
http://imageshack.com/a/img542/7466/okj7.png
Then, i use :
function change(id) {
$.post('ajax/change.php', {
data: id,
rand: Math.random()
},
function (html) {
$('#changeform').html(html);
$("#modalchange").modal('show');
});
}
triggered from this button :
<a class="table-actions" href="#" onClick="change('<?=$tm['id']?>');return false;"><i class="icon-pencil"></i></a>
The code for html (from change.php) is like this :
<?php
if(isset($_POST['data'])) {
$id = $_POST['data'];
$evt = mysql_query("select * from cal_event where id = '$id'");
$evt = mysql_fetch_array($evt);
$dt = explode(",",$evt['date']);
?>
<input type="hidden" value="<?=$id?>" name="uid" />
<div class="form-group">
<label for="eName">Title</label>
<input name="eName" id="eName" class="form-control" type="text" value="<?=$evt['title']?>">
</div>
<div class="form-group">
<label for="eDate">Date</label>
<div class="input-group date datepicker" data-date-autoclose="true" data-date-format="dd-mm-yyyy">
<input name="eDate" id="eDate" class="form-control" type="text" value="<?=$dt[2]."-".($dt[1]+1)."-".$dt[0]?>"><span class="input-group-addon"><i class="icon-calendar"></i></span></input>
</div>
</div>
<div class="form-group">
<label for="eLevel">Event Level</label>
<select name="eLevel" id="eLevel" class="select2able" >
<option value=""></option>
<option <?=($evt['level']==1)?"selected":""?> value="1">Normal</option>
<option <?=($evt['level']==2)?"selected":""?> value="2">Urgent</option>
</select>
</div>
<div class="form-group">
<label for="eDesc">Deskripsi</label>
<textarea name="eDesc" id="eDesc" class="form-control" rows="3" maxlength="150"><?=$evt['deskripsi']?></textarea>
</div>
<?php
}
?>
this is modal change
<div class="modal fade" id="modalchange">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
<h4 class="modal-title">Change Event</h4>
</div>
<div class="modal-body" >
<form name="changeform" id="changeform" action="" method="post">
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" id="change" type="button">Change</button><button class="btn btn-default-outline" data-dismiss="modal" type="button">Close</button>
</div>
</div>
</div>
</div>
but the result is different, it's give me like this :
http://imageshack.com/a/img89/3892/tpo5.png
So, how can i solve this problem?
and sorry for my bad in english.

From the picture you posted, the select element should not be just styled with css, there should be some javascript magic (which transform the select element to something else and hide the select element).
So you have to apply the javascript to the new html content again.