Display value in a modal - javascript

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:

Related

jquery submit function that does not work

My jQuery function does not work and I do not know where the problem comes from here is my code:
$(document).ready(function(){
console.log("document prêt !!!");
$("#f").on("submit",function(e){
recuperer_valeur_reservation();
console.log('submit f1...');
});
});
The message from my console.log is not displayed in the browser, just the first console that appears as you can see here:
message console
here is all my jquery code:
<script>
function recuperer_valeur_reservation(){
var nom_local=$('#nom_local').val();
var numero_place=$('#numeroplace').val();
var prix_place=$('#prixplace').val();
var taille_place=$('#tailleplace').val();
var cin=$('#Cinlocataire').val();
var heure_debut=$('#heure_debut').val();
var heure_fin=$('#heure_fin').val();
$('#nom_localhidden').val(nom_local);
$('#numeroplacehidden').val(numero_place);
$('#prixplacehidden').val(prix_place);
$('#tailleplacehidden').val(taille_place);
$('#cinlocatairehidden').val(cin);
$('#heure_debut_hidden').val(heure_debut);
$('#heure_fin_hidden').val(heure_fin);
}
$(document).ready(function(){
console.log("document prêt !!!");
$("#f").on("submit",function(e){
recuperer_valeur_reservation();
console.log('submit f1...');
});
});
</script>
and this is my html code :
<div class="modal" id="reservation">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Information</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<form method="POST" id="f" action="Acceuil_locataire">
<div class="form-group">
<label class='labelproprietaire'>Nom du local approprié à la place :</label>
<input type="hidden" class="form-control" id="nom_localhidden" name="nom_localhidden">
<input type="text" class="form-control" id="nom_local" name="nom_local" disabled>
</div>
<div class="form-group">
<label class='labelproprietaire'>Numéro place :</label>
<input type="hidden" class="form-control" id="numeroplacehidden" name="numeroplacehidden">
<input type="number" class="form-control" id="numeroplace" name="numeroplace" disabled>
</div>
<div class="form-group">
<label class='labelproprietaire'>Prix par heure:</label>
<input type="hidden" class="form-control" id="prixplacehidden" name="prixplacehidden">
<input type="text" class="form-control" id="prixplace" placeholder="Entrer le prix de la place" name="prixplace" disabled>
</div>
<div class="form-group">
<label class='labelproprietaire'>Taille de la place :</label>
<input type="hidden" class="form-control" id="tailleplacehidden" name="tailleplacehidden">
<input type="text" class="form-control" id="tailleplace" placeholder="Entrer la taille de la place" name="tailleplace" disabled>
</div>
<div class="form-group">
<label class='labelproprietaire'>Votre Cin :</label>
<input type="hidden" class="form-control" id="cinlocatairehidden" name="cinlocatairehidden">
<input type="text" class="form-control" id="Cinlocataire" placeholder="Entrer votre cin" name="cinlocataire" required>
</div>
<div class="form-group">
<label class='labelproprietaire'>Heure début de la réservation :</label>
<input type="hidden" class="form-control" id="heure_debut_hidden" name="heure_debut_hidden">
<input type="time" class="form-control" id="heure_debut" placeholder="Entrer l'heure de début" name="heure_debut" required>
</div>
<div class="form-group">
<label class='labelproprietaire'>Heure fin de la réservation :</label>
<input type="hidden" class="form-control" id="heure_fin_hidden" name="heure_fin_hidden">
<input type="time" class="form-control" id="heure_fin" placeholder="Entrer l'heure de fin" name="heure_fin" required>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<div id='divbtnaddplace'>
<button type="submit" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#paiement" data-dismiss="modal" id='btnreserver' style='vertical-align: 0; margin-right: 220px;'>Réserver</button>
<button type="button" class="btn btn-danger btn-lg" data-dismiss="modal">Fermer</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="modal" id="paiement">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Information</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<form method="POST" id="f1" action="Acceuil_locataire">
<div class="form-group">
<label class='labelproprietaire'>Votre Cin :</label>
<input type="text" class="form-control" id="Cin" name="cin">
</div>
<div class="form-group">
<label class='labelproprietaire'>Type paiement :</label>
<div class="row">
<div class="col-md-6 select-outline">
<select class="mdb-select md-form md-outline colorful-select dropdown-primary btn-lg" style="width: 465px;" name="typepaiement">
<option value="" disabled selected>Choose your option</option>
<option value="Paypal">Paypal</option>
<option value="Carte bancaire">Carte bancaire</option>
<option value="Payonner">Payonner</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<label class='labelproprietaire'>Prix :</label>
<br>
<input type='hidden' id='prixtotalhidden' name="prixtotalhidden">
<input type='text' class="form-control" id="prix" name="prixtotal" style='font-size: 20px; color: red;' disabled="">
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="submit" class="btn btn-primary btn-lg" id="buttonpayer" name="action" value="payer" style="margin-right: 250px;">Payer</button>
<button type="button" class="btn btn-danger btn-lg" data-dismiss="modal">Fermer</button>
</div>
</form>
</div>
</div>
</div>
</div>
function recuperer_valeur_reservation() {
var nom_local = $('#nom_local').val();
var numero_place = $('#numeroplace').val();
var prix_place = $('#prixplace').val();
var taille_place = $('#tailleplace').val();
var cin = $('#Cinlocataire').val();
var heure_debut = $('#heure_debut').val();
var heure_fin = $('#heure_fin').val();
$('#nom_localhidden').val(nom_local);
$('#numeroplacehidden').val(numero_place);
$('#prixplacehidden').val(prix_place);
$('#tailleplacehidden').val(taille_place);
$('#cinlocatairehidden').val(cin);
$('#heure_debut_hidden').val(heure_debut);
$('#heure_fin_hidden').val(heure_fin);
}
$(document).ready(function() {
console.log("document prêt !!!");
$("#f").on("submit", function(e) {
recuperer_valeur_reservation();
console.log('submit f1...');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal" id="reservation">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Information</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<form method="POST" id="f" action="Acceuil_locataire">
<div class="form-group">
<label class='labelproprietaire'>Nom du local approprié à la place :</label>
<input type="hidden" class="form-control" id="nom_localhidden" name="nom_localhidden">
<input type="text" class="form-control" id="nom_local" name="nom_local" disabled>
</div>
<div class="form-group">
<label class='labelproprietaire'>Numéro place :</label>
<input type="hidden" class="form-control" id="numeroplacehidden" name="numeroplacehidden">
<input type="number" class="form-control" id="numeroplace" name="numeroplace" disabled>
</div>
<div class="form-group">
<label class='labelproprietaire'>Prix par heure:</label>
<input type="hidden" class="form-control" id="prixplacehidden" name="prixplacehidden">
<input type="text" class="form-control" id="prixplace" placeholder="Entrer le prix de la place" name="prixplace" disabled>
</div>
<div class="form-group">
<label class='labelproprietaire'>Taille de la place :</label>
<input type="hidden" class="form-control" id="tailleplacehidden" name="tailleplacehidden">
<input type="text" class="form-control" id="tailleplace" placeholder="Entrer la taille de la place" name="tailleplace" disabled>
</div>
<div class="form-group">
<label class='labelproprietaire'>Votre Cin :</label>
<input type="hidden" class="form-control" id="cinlocatairehidden" name="cinlocatairehidden">
<input type="text" class="form-control" id="Cinlocataire" placeholder="Entrer votre cin" name="cinlocataire" required>
</div>
<div class="form-group">
<label class='labelproprietaire'>Heure début de la réservation :</label>
<input type="hidden" class="form-control" id="heure_debut_hidden" name="heure_debut_hidden">
<input type="time" class="form-control" id="heure_debut" placeholder="Entrer l'heure de début" name="heure_debut" required>
</div>
<div class="form-group">
<label class='labelproprietaire'>Heure fin de la réservation :</label>
<input type="hidden" class="form-control" id="heure_fin_hidden" name="heure_fin_hidden">
<input type="time" class="form-control" id="heure_fin" placeholder="Entrer l'heure de fin" name="heure_fin" required>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<div id='divbtnaddplace'>
<button type="submit" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#paiement" data-dismiss="modal" id='btnreserver' style='vertical-align: 0; margin-right: 220px;'>Réserver</button>
<button type="button" class="btn btn-danger btn-lg" data-dismiss="modal">Fermer</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="modal" id="paiement">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Information</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<form method="POST" id="f1" action="Acceuil_locataire">
<div class="form-group">
<label class='labelproprietaire'>Votre Cin :</label>
<input type="text" class="form-control" id="Cin" name="cin">
</div>
<div class="form-group">
<label class='labelproprietaire'>Type paiement :</label>
<div class="row">
<div class="col-md-6 select-outline">
<select class="mdb-select md-form md-outline colorful-select dropdown-primary btn-lg" style="width: 465px;" name="typepaiement">
<option value="" disabled selected>Choose your option</option>
<option value="Paypal">Paypal</option>
<option value="Carte bancaire">Carte bancaire</option>
<option value="Payonner">Payonner</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<label class='labelproprietaire'>Prix :</label>
<br>
<input type='hidden' id='prixtotalhidden' name="prixtotalhidden">
<input type='text' class="form-control" id="prix" name="prixtotal" style='font-size: 20px; color: red;' disabled="">
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="submit" class="btn btn-primary btn-lg" id="buttonpayer" name="action" value="payer" style="margin-right: 250px;">Payer</button>
<button type="button" class="btn btn-danger btn-lg" data-dismiss="modal">Fermer</button>
</div>
</form>
</div>
</div>
</div>
</div>
I really do not know where the mistake comes if someone wants to help me I will be really grateful and thank you in advance!

Please try to insert jQuery before your code. Does the first log entry appear?
When jQuery is implemented right, your code works for form $("#f") - that's the first form in your html part.

You need to prevent the submit if you want both to submit, but THEN what do you want to do?
function recuperer_valeur_reservation() {
var nom_local = $('#nom_local').val();
var numero_place = $('#numeroplace').val();
var prix_place = $('#prixplace').val();
var taille_place = $('#tailleplace').val();
var cin = $('#Cinlocataire').val();
var heure_debut = $('#heure_debut').val();
var heure_fin = $('#heure_fin').val();
$('#nom_localhidden').val(nom_local);
$('#numeroplacehidden').val(numero_place);
$('#prixplacehidden').val(prix_place);
$('#tailleplacehidden').val(taille_place);
$('#cinlocatairehidden').val(cin);
$('#heure_debut_hidden').val(heure_debut);
$('#heure_fin_hidden').val(heure_fin);
}
$(document).ready(function() {
console.log("document prêt !!!");
$("#f").on("submit", function(event) {
event.preventDefault();
recuperer_valeur_reservation();
console.log('submit f1...');
alert('Default prevented NOW WHAT?');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal" id="reservation">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Information</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<form method="POST" id="f" action="Acceuil_locataire">
<div class="form-group">
<label class='labelproprietaire'>Nom du local approprié à la place :</label>
<input type="hidden" class="form-control" id="nom_localhidden" name="nom_localhidden">
<input type="text" class="form-control" id="nom_local" name="nom_local" disabled>
</div>
<div class="form-group">
<label class='labelproprietaire'>Numéro place :</label>
<input type="hidden" class="form-control" id="numeroplacehidden" name="numeroplacehidden">
<input type="number" class="form-control" id="numeroplace" name="numeroplace" disabled>
</div>
<div class="form-group">
<label class='labelproprietaire'>Prix par heure:</label>
<input type="hidden" class="form-control" id="prixplacehidden" name="prixplacehidden">
<input type="text" class="form-control" id="prixplace" placeholder="Entrer le prix de la place" name="prixplace" disabled>
</div>
<div class="form-group">
<label class='labelproprietaire'>Taille de la place :</label>
<input type="hidden" class="form-control" id="tailleplacehidden" name="tailleplacehidden">
<input type="text" class="form-control" id="tailleplace" placeholder="Entrer la taille de la place" name="tailleplace" disabled>
</div>
<div class="form-group">
<label class='labelproprietaire'>Votre Cin :</label>
<input type="hidden" class="form-control" id="cinlocatairehidden" name="cinlocatairehidden">
<input type="text" class="form-control" id="Cinlocataire" placeholder="Entrer votre cin" name="cinlocataire" required>
</div>
<div class="form-group">
<label class='labelproprietaire'>Heure début de la réservation :</label>
<input type="hidden" class="form-control" id="heure_debut_hidden" name="heure_debut_hidden">
<input type="time" class="form-control" id="heure_debut" placeholder="Entrer l'heure de début" name="heure_debut" required>
</div>
<div class="form-group">
<label class='labelproprietaire'>Heure fin de la réservation :</label>
<input type="hidden" class="form-control" id="heure_fin_hidden" name="heure_fin_hidden">
<input type="time" class="form-control" id="heure_fin" placeholder="Entrer l'heure de fin" name="heure_fin" required>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<div id='divbtnaddplace'>
<button type="submit" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#paiement" data-dismiss="modal" id='btnreserver' style='vertical-align: 0; margin-right: 220px;'>Réserver</button>
<button type="button" class="btn btn-danger btn-lg" data-dismiss="modal">Fermer</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="modal" id="paiement">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Information</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<form method="POST" id="f1" action="Acceuil_locataire">
<div class="form-group">
<label class='labelproprietaire'>Votre Cin :</label>
<input type="text" class="form-control" id="Cin" name="cin">
</div>
<div class="form-group">
<label class='labelproprietaire'>Type paiement :</label>
<div class="row">
<div class="col-md-6 select-outline">
<select class="mdb-select md-form md-outline colorful-select dropdown-primary btn-lg" style="width: 465px;" name="typepaiement">
<option value="" disabled selected>Choose your option</option>
<option value="Paypal">Paypal</option>
<option value="Carte bancaire">Carte bancaire</option>
<option value="Payonner">Payonner</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<label class='labelproprietaire'>Prix :</label>
<br>
<input type='hidden' id='prixtotalhidden' name="prixtotalhidden">
<input type='text' class="form-control" id="prix" name="prixtotal" style='font-size: 20px; color: red;' disabled="">
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="submit" class="btn btn-primary btn-lg" id="buttonpayer" name="action" value="payer" style="margin-right: 250px;">Payer</button>
<button type="button" class="btn btn-danger btn-lg" data-dismiss="modal">Fermer</button>
</div>
</form>
</div>
</div>
</div>
</div>

I found the error in the error come from the code bootstrap that one: data-target = "# payment" data-dismiss = "modal"
when I click on the button it is automatically closed without the submit send so here is the solution I found, I removed data-target = "# payment" data-dismiss = "modal" in the button and I put in my jquery code:
$(document).ready(function(){
$("#reservation").on("submit",'#f',function(e){
e.preventDefault();
alert('submit f1!');
$("#reservation").modal('hide');
$("#paiement").modal("show");
recuperer_valeur_reservation();
console.log("hello toufik");
});
});
thank you very much to all of you for helping me!

Form inside Boostrap Modal does not reset

I am using below click event to reset Form.
'click .resetBulkAssignForm' : function(events, template){
console.log('Reset', $(".bulkAssignForm")[0]);
$(".bulkAssignForm")[0].reset();
$(".bulkAssignForm").find("select").val("");
$('#firmName').select2('data', null);
},
I also tried most of the answers available on SO to solve this issue.
Question: How to reset form inside Bootstrap Modal?
Below is the image of the modal with console output.
NOTE: I am using AdminLTE 2.3.11, Select2. Also kindly take a note that I have already tried solutions in SO links like how-to-clear-all-input-fields-in-bootstrap-modal-when-clicking-data-dismiss-butt, how-to-reset-form-body-in-bootstrap-modal-box
Adding HTML Code in case you need to see.
<div id="myBulkModal" class="modal fade modal-primary" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h2 class="modal-title">Bulk Assignment</h2>
</div>
<div class="modal-body">
<section class="content">
<form class="bulkAssignForm">
<fieldset>
<div class="row">
<input type="hidden" id="taskIdInput" value="{{getTaskId}}" />
</div>
<div class="row">
<div class="input-group col-sm-12">
<label for="firmName">Firms</label><br />
<select id="firmName" multiple class="form-control input-lg" required>
{{#each firmNamesFromAssignment}}
<option value="{{value}}">{{label}}</option>
{{/each}}
</select>
</div>
</div>
<br />
<div class="row">
<div class="input-group col-sm-12">
<label for="assignee">Assignee</label><br />
<select id="assignee" class="form-control input-lg" required>
<option selected="selected" value="">Select Option</option>
{{#each usersSelect2}}
<option value="{{value}}">{{label}}</option>
{{/each}}
</select>
</div>
</div>
<br />
<div class="row">
<div class="input-group col-sm-12">
<label for="reviewedBy">Reviewer</label><br />
<select id="reviewedBy" class="form-control input-lg" required>
<option selected="selected" value="">Select Option</option>
{{#each usersSelect2}}
<option value="{{value}}">{{label}}</option>
{{/each}}
</select>
</div>
</div>
<br />
<div class="row">
<!-- buttons -->
<button type="submit" class="btn btn-outline">
<span class="glyphicon glyphicon-ok"></span> Assign
</button>
<button type="button" class="btn btn-outline resetBulkAssignForm">
<span class="glyphicon glyphicon-off"></span> Reset
</button>
<button type="button" class="btn btn-outline" data-dismiss="modal">
<span class="glyphicon glyphicon-refresh"></span> Close
</button>
</div>
</fieldset>
</form>
</section>
</div>
</div>
</div>
</div>

After changing value of Select2's underlying <select> or <input> you have to trigger change event so this change will be handled by Select2 code and rendered appropriately:
$(".bulkAssignForm").find("select").val("").trigger("change");
Successfully tested on AutoForm Demo test page.

Validating data in bootstrap modal using JQuery not working

I have been stuck on this issue since a week. I am not able to validate bootstrap modal using jQuery validator function. I have searched lots of stuff, also I have used exactly the same method as mentioned in here: How to correctly validate a modal form . I have been using django framework. Here is my HTML code:
<div class="modal fade" id="myModalHorizontal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<form class="form-horizontal" id="myForm" role="form" action="{% url 'apply:add' %}" method="POST">
{% csrf_token %}
<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" id="myModalLabel">
Apply Leave
</h4>
</div>
<!-- Modal Body -->
<div class="modal-body">
<div class="form-group">
<label class="control-label col-sm-3" for="e_id">Employee-Id</label>
<div class="col-sm-9">
<select class="form-control" id="e_id" name="e_id" class="required">
{% for entry in emp_data %}
<option value="{{ entry.emp_id }}">{{ entry.emp_id }} - {{ entry.emp_name}} </option>
{% endfor %}
</select>
</div>
</div>
<style>
.datepicker {
z-index: 1600 !important;
border-color: black;
}
</style>
<div class="form-group">
<label class=" control-label col-sm-3" for="s_dt">Start Date</label>
<div class="col-sm-9" >
<input type='text' class="form-control" id="s_dt" placeholder="Start Date" name="s_dt"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="e_dt">End Date</label>
<div class="col-sm-9" >
<input type='text' class="form-control" id="e_dt" placeholder="End Date" name="e_dt" require/>
</div>
</div>
<p class="col-sm-9 col-sm-offset-3" > Enter Start Date = End Date if leave is applied for a single day </br></p>
<div class="form-group">
<label class="col-sm-3 control-label" for="l_type">Leave Type</label>
<div class="col-sm-9">
<select class="form-control" id="l_type" name="l_type">
<option value="S">Sick Leave</option>
<option value="V">Vacation Leave</option>
<option value="M">Maternity Leave</option>
<option value="P">Paternity Leave</option>
<option value="C">Casual Leave</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="desc">Description</label>
<div class="col-sm-9">
<textarea class="form-control" id="desc" rows="3"></textarea>
</div>
</div>
<!-- Modal Footer -->
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">
Close
</button>
<button type="submit" class="btn btn-primary" name="save" id="save" value="Save changes" data-dismiss="modal">
Save changes
</button>
</div>
</form>
</div>
</div>
</div>
</div>
Here is my javascript:
$(function() {
$("#myForm").validate({
rules: {
s_dt: "required",
e_dt: "required"
},
messages: {
s_dt: "Please provide a date",
e_dt: "Please provide a date"
}
});
});
Thanks in advance..

Get selected text from drop down list using name attribute jQuery

I am trying to get the selected value from the dropdown.
I am creating the controls dynamically. I am not using ID attribute to avoid the problem of having multiple controls with the same ID/ duplicate IDs.
Here is how I am able to get the values of the textbox controls
$('.btn-success').off('click').on('click', function (e) {
e.preventDefault();
var row = $(this).closest(".row");
var lnameval = row.find("input[name='ContactLastName']").val();
});
Is it possible to get the selected value of the dropdown using the name attribute.
something like : var titleVal = row.find("input[name='ContactTitle']").val();
HTML :
<form id="formAddContact" role="form" class="form-horizontal">
<div class="modal-body">
<div id="errorMessageContainer2" class="alert alert-danger" role="alert" style="display:none;">
<ul id="messageBox2" class="list-unstyled"></ul>
</div>
#foreach (string cInfo in Model.emailList)
{
<div class="row" id="#cInfo.Replace("#","")" style="display: none;">
<div class="col-md-6">
<div class="form-group">
<div class="col-md-3 control-label">
<label>Title:</label>
</div>
<div class="col-md-3">
<select class="form-control ToCapture" name="ContactTitle">
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Ms">Ms</option>
<option value="Miss">Miss</option>
<option value="Dr">Dr</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-md-3 control-label">
<label id="lblfname">First Name:</label>
</div>
<div class="col-md-3">
<input maxlength="50" name="ContactFirstName" type="text" value="">
</div>
</div>
<div class="form-group">
<div class="col-md-3 control-label">
<label id="lbllname">Last Name:</label>
</div>
<div class="col-md-3">
<input maxlength="50" name="ContactLastName" type="text" value="">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<input type="button" value="Add Contact" class="btn btn-success">
<input type="button" value="Cancel" class="btn btn-default">
</div>
<br/>
}
<hr />
</div>
</form>

Just a little change needed :
row.find("select[name='ContactTitle']").val();
It's not an input.

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.

Categories

Resources