onChange function of jQuery on dropdown not working - javascript

I am trying to use some simple jQuery, I want to apply onto first dropdown,, I gave some values and when the dropdown values changes it changes the textboxes. but its not working, and below is my jQuery code. This form is in the model, but the jQuery I applied is in the footer of page.
$("#ddl").change(function() {
var end = this.value;
alert(end);
var f = $('#ddl').val();
if (f == 10) {
$("#cl").css("display", "none");
$("#cl1").css("display", "none");
}
if (f == 11) {
$("#cl").css("display", "block");
$("#cl1").css("display", "none");
}
if (f == 12) {
$("#cl1").css("display", "block");
$("#cl").css("display", "none");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Modal Starts Here -->
<div class="modal fade" id="myModal<?php echo $i;?>" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×
</button>
<h4 class="modal-title">Payment Details</h4>
</div>
<div class="modal-body">
<form method="POST">
<input type="hidden" name="std_id" value="<?php echo
$data['id']; ?>">
<div class="input-group">
<span class="input-group-addon">Payment Method</span>
<select name="method" class="form-control" id="ddl">
<option value="">select payment method</option>
<option value="10">Cash</option>
<option value="11">Check</option>
<option value="12">Online</option>
</select>
</div>
<br>
<div style="display: none;" id="cl">
<div class="input-group">
<span class="input-group-addon">Bank Name</span>
<input type="text" name="bank" placeholder="bank name" class="form-control">
</div>
<br>
<div class="input-group">
<span class="input-group-addon">Cheque Number</span>
<input type="text" name="amount" placeholder="cheque
number here" class="form-control">
</div>
<br>
</div>
<div style="display: none;" id="cl1">
<div class="input-group">
<span class="input-group-addon">Transaction
Number</span>
<input type="text" name="trans" placeholder="transaction number here" class="form-control">
</div>
<br>
</div>
<button class="btn btn-success" type="submit" name="pay">Add</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data- dismiss="modal">Close</button>
</div>
</div>
</div>
</div>


Change if == 10 to if === '10'. Same for other if conditions. This is because the option value are in string
$("#ddl").change(function() {
var end = this.value;
alert(end);
var f = $('#ddl').val();
if (f === '10') {
console.log('10 selected')
$("#cl").css("display", "none");
$("#cl1").css("display", "none");
}
if (f === '11') {
$("#cl").css("display", "block");
$("#cl1").css("display", "none");
}
if (f === '12') {
$("#cl1").css("display", "block");
$("#cl").css("display", "none");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Modal Starts Here -->
<div class="modal fade" id="myModal<?php echo $i;?>" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×
</button>
<h4 class="modal-title">Payment Details</h4>
</div>
<div class="modal-body">
<form method="POST">
<input type="hidden" name="std_id" value="<?php echo
$data['id']; ?>">
<div class="input-group">
<span class="input-group-addon">Payment Method</span>
<select name="method" class="form-control" id="ddl">
<option value="">select payment method</option>
<option value="10">Cash</option>
<option value="11">Check</option>
<option value="12">Online</option>
</select>
</div>
<br>
<div style="display: none;" id="cl">
<div class="input-group">
<span class="input-group-addon">Bank Name</span>
<input type="text" name="bank" placeholder="bank name" class="form-control">
</div>
<br>
<div class="input-group">
<span class="input-group-addon">Cheque Number</span>
<input type="text" name="amount" placeholder="cheque
number here" class="form-control">
</div>
<br>
</div>
<div style="display: none;" id="cl1">
<div class="input-group">
<span class="input-group-addon">Transaction
Number</span>
<input type="text" name="trans" placeholder="transaction number here" class="form-control">
</div>
<br>
</div>
<button class="btn btn-success" type="submit" name="pay">Add</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data- dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

Related

Bootstrap Datepicker not Working on Server but works locally

My Datepicker in modal does not work on server but works properly on localhost. Below is my html and js code:
Html:
<div class="modal fade" id="CreateAppointmentModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Create Appointment</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body" id="CreateAppointmentBody">
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
JS
$(document).on("click", ".AppointmentItem", function () {
var row = $(this).closest("tr");
idOfCust = row.find("td:first-child").text();
var url = '/Home/Create_AppointmentAdmin';
console.log(url);
$('#CreateAppointmentModal').modal('show');
$('#CreateAppointmentBody').load(url);
});
$('#CreateAppointmentModal').on('shown.bs.modal', function (e) {
console.log('Entered');
$('.daterangepicker').css('z-index', '1600');
$(".daterangepicker").datepicker({
dateFormat: 'dd-mm-yy',
//onSelect: PopulateDropDown,
minDate: 0
});
});
Modal Body:
<div class="alert" role="alert" id="alertBox" style="display:none">
</div>
<div class="row">
<div class="col-md-12">
<form asp-action="Create_AppointmentAdmin" autocomplete="off">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<input asp-for="Userid" type="hidden" id="CustId" />
<div class="form-group">
<label asp-for="AppointmentDay" class="control-label">Appointment Day</label>
<input asp-for="AppointmentDay" class="form-control daterangepicker" id="Calendar_Admin" type="text" autocomplete="off"/>
<span asp-validation-for="AppointmentDay" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="AppointmentTime" class="control-label">Appointment Time</label>
<select asp-for="AppointmentTime" class="form-control" id="AppointmentTime">
<option value="">Select</option>
</select>
<span asp-validation-for="AppointmentTime" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Comment" class="control-label">Comments</label>
<input asp-for="Comment" class="form-control" id="Comment" />
<span asp-validation-for="Comment" class="text-danger"></span>
</div>
<div class="form-group">
<input type="button" value="Create Appointment" class="btn btn-success" id="CreateAppointmentAdmin" />
</div>
</form>
</div>
</div>
Have tried multiple solutions availabe here but none seem to work.
Is there some mistake that I am doing? The same code seems to work fine on server when it is a full fledged page.
Any solution to this issue?

Exploit JSON values coming from a get mapping

I trying to find in my database an order via a webservice integrated in the order controller like below :
#GetMapping("/view" )
#ResponseBody
public Optional<Ordre> view(String id) {
return ordreRepository.findById(id) ;
}
Then display the details of the order in a modal by using a javascript code like below :
$('.view').on('click', function(e) {
e.preventDefault();
var href2 = $(this).attr('href2');
$.get(href2, function(ordre, status) {
$('#Modalview #num_ord').val(ordre.num_ord);
$('#Modalview #dte_ord').val(ordre.dte_ord);
$('#Modalview #dir_ord').val(ordre.dir_ord);
$('#Modalview #ref_ord').val(ordre.ref_ord);
$('#Modalview #pap_ord').val(ordre.pap_ord);
$('#Modalview #boss_ord').val(ordre.boss_ord);
$('#Modalview #suj_ord').val(ordre.suj_ord);
});
$('#Modalview').modal();
});
<div class="modal fade" id="Modalview" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="padding-left: 10px;">×</button>
</div>
<div class="modal-body" style="padding-bottom: 50px;">
<form class="form-horizontal" id="formview">
<div class="form-group">
<div class="col-sm-10">
<input type="text" class="form-control pull-right" id="num_ord" name="num_ord" />
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<input class="form-control pull-right" type="date" id="dte_ord" name="dte_ord" />
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<input type="text" class="form-control pull-right" id="dir_ord" name="dir_ord" />
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<input type="text" class="form-control pull-right" id="ref_ord" name="ref_ord" />
</div>
</div>
<div class="form-inline">
<div class="form-group pull-right">
</div>
</div>
<br/>
<br/>
<div class="form-group " id="pap">
<div class="col-sm-6 col-sm-push-3">
<select class="form-control" id="pap_ord">
<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>
</select>
</div>
</div>
<br/>
<div class="form-group" id="boss">
<div class="col-sm-8 col-sm-push-1">
<input class="form-control pull-right" type="text" id="boss_ord" name="boss_ord" />
</div>
</div>
<div class="form-group" id="suj" style="padding-top: 10px;">
<div class="col-sm-10">
<textarea class="form-control pull-right" id="suj_ord" name="suj_ord"></textarea>
</div>
</div>
<div class="modal-footer" style="margin-right: -15px;">
<button type="button" class="btn btn-default" data-dismiss="modal">Return Back</button>
</div>
</form>
<!--/modal-body-collapse -->
<!--/modal-footer-collapse -->
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
But nothing displayed in the modal i don't know and there is no error or crash in the console in my editor . any one can help me and thanks .

Have a try like below and bind your form object using th:field or th:value
$('.view').on('click', function(e) {
e.preventDefault();
$.ajax({
type: 'get',
url: /*[[ #{'/view'} ]]*/,
success: function(returnedData){
$('#formview').html(returnedData)
$('#Modalview').modal('show');
},
error: function(xhr, exception) {
console.log(xhr);
}
});
});

How to replace the append content before the edition on modal

I have the append div listing some values and I need to edit them using a modal, I already can edit but the content appended in list doesn't change at all.
My JS:
var creatingModal = false;
canvas.on('mouse:up', function (){
creatingModal = true;
jQuery('#modal').modal('show').trigger('shown');
//get values from obs form
jQuery(document).on("click", "#submitObservacao", function(e){
e.preventDefault();
var denteNumero = jQuery("#dente").val();
var procedimentos = jQuery("#procedimentos").val();
var observacao = jQuery("#observacoes").val();
jQuery("#anotacoes").append(
'<div class="thumbnail mark" id="itemObs" data-toggle="modal" data-target="#EditMod"><b>Dente</b>:<span id="anotacaoDente" class="anotDent">'+ denteNumero +'</span> <i class="fa fa-trash f-right" id="removerNow" aria-hidden="true"></i> <br> <b>Procedimentos:</b> <span id="anotacaoProcedimentos">'+ procedimentos +'</span><br> <b>Observações:</b> <span id="anotacaoObservacao">'+ observacao +'</span><br> </div>'
);
//refreshing values
jQuery(denteNumero).val('');
jQuery("#dente").val('');
jQuery(procedimentos).val('');
jQuery(observacao).val('');
jQuery("#observacoes").val('');
jQuery('#modal').modal('hide').unique();
});
jQuery(document).on("click", "#removerNow", function(e){
e.preventDefault();
jQuery(this).parent().remove();
var canvas_objects = canvas._objects;
console.log(canvas_objects);
if(canvas_objects.length !== 0){
var last = canvas_objects[canvas_objects.length -1]; //Get last object
canvas.remove(last);
canvase.renderAll();
}
});
});
jQuery(document).on("click", ".mark", function(e){
e.preventDefault();
var numDente = jQuery(this).find("#anotacaoDente").html();
var numObservacoes = jQuery(this).find("#anotacaoObservacao").html();
var numProcedimentos = jQuery(this).find("#anotacaoProcedimentos").html();
jQuery("#obsModalEdit input[name=dente]").val(numDente);
jQuery("#obsModalEdit select[name=procedimentos]").val(numProcedimentos);
jQuery("#obsModalEdit textarea[name=observacoes]").val(numObservacoes);
//Edit on click
jQuery(document).on("click", "#submitEditar", function(e){
e.preventDefault();
var numDente = jQuery("#denteEdit").val();
var numProcedimentos = jQuery("#procedimentosEdit").val();
var numObservacoes = jQuery("#observacoesEdit").val();
//Edit the append contente here
jQuery('#EditMod').modal('hide');
});
});
})();
The HTML that i want to edit the content is generated by the append in JS above, thank you.
The HTML
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-12 ">
<canvas id="c" width="840" height="590" style="border:1px solid #aaa"></canvas>
</div>
<div class="col-lg-4 col-md-4 col-sm-3 col-xs-12 ">
<div style="display: inline-block; margin-left: 10px">
<button style="visibility: hidden;" id="drawing-mode" class="btn btn-info">Cancel drawing mode</button><br>
<button style="visibility: hidden;" id="clear-canvas" class="btn btn-info">Clear</button><br>
<div id="drawing-mode-options">
<label style="visibility: hidden;" for="drawing-mode-selector">Mode:</label>
<select style="visibility: hidden;" id="drawing-mode-selector">
<option>Pencil</option>
<option>Circle</option>
<option>Spray</option>
<option>Pattern</option>
<option>hline</option>
<option>vline</option>
<option>square</option>
<option>diamond</option>
<option>texture</option>
</select><br>
<div class="thumbnail od-thumb">
<label for="drawing-line-width">Expessura da Linha:</label>
<span class="info">2</span><input type="range" value="2" min="0" max="150" id="drawing-line-width"><br>
<label for="drawing-color">Cor da Linha:</label>
<input type="color" value="#005E7A" id="drawing-color"><br>
</div>
<label style="visibility: hidden;" for="drawing-shadow-color">Shadow color:</label>
<input style="visibility: hidden;" type="color" value="#005E7A" id="drawing-shadow-color">
<label style="visibility: hidden;" for="drawing-shadow-width">Shadow width:</label>
<span style="visibility: hidden;" class="info">0</span><input style="visibility: hidden;" type="range" value="0" min="0" max="50" id="drawing-shadow-width">
<label style="visibility: hidden;" for="drawing-shadow-offset">Shadow offset:</label>
<span style="visibility: hidden;" class="info">0</span><input style="visibility: hidden;" type="range" value="0" min="0" max="50" id="drawing-shadow-offset">
</div>
</div>
<!-- close col-panel first-->
</div>
<!-- fecha row -->
</div>
<!-- jumbotron -->
<div class="row">
<div class="">
</div>
<div class="col-lg-12">
<div class="tron" id="anotacoes">
</div>
</div>
</div>
<!-- Modal -->
<div id="modal" class="modal fade" tabindex="-1" role="dialog" data-backdrop="static" >
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-backdrop="static" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Adicionar Região</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" id="obsModal">
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Dente:</label>
<div class="col-md-4">
<input id="dente" name="textinput" type="text" placeholder="Número do dente" class="form-control input-md" required="">
</div>
</div>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label" for="selectbasic">Procedimentos:</label>
<div class="col-md-4">
<select id="procedimentos" name="selectbasic" class="form-control">
<option value="122">122 - Tramua 1</option>
<option value="123">123 - Trauma 2</option>
</select>
</div>
</div>
<!-- Textarea -->
<div class="form-group">
<label class="col-md-4 control-label" for="textarea">Observações:</label>
<div class="col-md-4">
<textarea class="form-control" id="observacoes" placeholder="Digite sua observação aqui" name="textarea"></textarea>
</div>
</div>
<button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
<button type="button" id="submitObservacao" class="btn btn-primary">Salvar Anotações</button>
</form>
</div>
<div class="modal-footer">
<!-- <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
<button type="button" class="btn btn-primary">Salvar Anotações</button> -->
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- EDIT MODAL -->
<div id="EditMod" class="modal fade" tabindex="-1" role="dialog" data-backdrop="static" >
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-backdrop="static" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Editar Anotação</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" id="obsModalEdit">
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Dente:</label>
<div class="col-md-4">
<input id="denteEdit" name="dente" type="text" placeholder="Número do dente" class="form-control input-md" required="">
</div>
</div>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label" for="selectbasic">Procedimentos:</label>
<div class="col-md-4">
<select id="procedimentosEdit" name="procedimentos" class="form-control">
<option value="122" name="procedimentos">122 - Tramua 1</option>
<option value="123" name="procedimentos">123 - Trauma 2</option>
</select>
</div>
</div>
<!-- Textarea -->
<div class="form-group">
<label class="col-md-4 control-label" for="textarea">Observações:</label>
<div class="col-md-4">
<textarea class="form-control" id="observacoesEdit" placeholder="Digite sua observação aqui" name="observacoes"></textarea>
</div>
</div>
<button type="button" class="btn btn-default refresh" data-dismiss="modal">Cancelar</button>
<button type="button" id="submitEditar" class="btn btn-primary">Editar Anotação</button>
</form>
</div>
<div class="modal-footer">
<!-- <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
<button type="button" class="btn btn-primary">Salvar Anotações</button> -->
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

It is bit difficult without having your HTML code. Anyway I copied the last part of your JS and added few lines with comments. Hope this helps.
//Edit on click
jQuery(document).on("click", "#submitEditar", function(e){
e.preventDefault();
var numDente = jQuery("#denteEdit").val();
var numProcedimentos = jQuery("#procedimentosEdit").val();
var numObservacoes = jQuery("#observacoesEdit").val();
//Edit the append contente here
//Can't you changed the value of the relevant controller like this.
jQuery('#yourElementToModify').val(numProcedimentos);
//Or if you want to change the DIV fully,
jQuery('#itemObs')[0].innerHTML = 'append content';
jQuery('#EditMod').modal('hide');

How to show the modal in without reloading the page

Here i did form validation ,after form validation all fields filled and click the INVITE QUOTES button means i want show modal, and i want to fill the modal form after filled all field means i want to close that modal,but dont want to refresh the page,Here i click INVITE QUOTES button means page is refreshing and modal is not showing how can do this?
<script>
/*$('#businessForm').submit(function (e) {
e.preventDefault();
validateForm();
});*/
function validateForm() {
var ratesfor = document.forms["myForm"]["ratesfor"].value;
if (ratesfor == null || ratesfor == "") {
document.getElementById("rate_err").innerHTML = "Field is empty";
}
var no = document.forms["myForm"]["no"].value;
if (no == null || no == "") {
document.getElementById("no_err").innerHTML = "Field is empty";
}
var breath = document.forms["myForm"]["breath"].value;
if (breath == null || breath == "") {
document.getElementById("b_t_err").innerHTML = "Field is empty";
}
var height = document.forms["myForm"]["height"].value;
if (height == null || height == "") {
document.getElementById("height_err").innerHTML = "Field is empty";
}
var truck_type = document.forms["myForm"]["truck_type"].value;
if (truck_type == null || truck_type == "") {
document.getElementById("truck_type_err").innerHTML = "Field is empty";
}
var datepicker = document.forms["myForm"]["datepicker-13"].value;
if (datepicker == null || datepicker == "") {
document.getElementById("pickup_err").innerHTML = "Field is empty";
}
var myTime = document.forms["myForm"]["myTime"].value;
if (myTime == null || myTime == "") {
document.getElementById("time_err").innerHTML = "Field is empty";
}
var from = document.forms["myForm"]["from"].value;
if (from == null || from == "") {
document.getElementById("from_err").innerHTML = "Field is empty";
}
var to = document.forms["myForm"]["to"].value;
if (to == null || to == "") {
document.getElementById("to_err").innerHTML = "Field is empty";
return false;
}
else{
$('#businessForm').submit(function (e) {
e.preventDefault();
})
$.ajax({
url:'search_truck.php',
type:'POST',
data : { 'state_id' : city},
success:function(data){
//var res=jQuery.parseJSON(data);// convert the json
console.log(data);
},
});
}
}
</script>
<script>
$(document).ready(function(){
$("#myBtn").click(function(){
$("#myModal").modal();
});
});
$(document).ready(function(){
$("#Register").click(function(){
$("#myModal").hide();
$("#myModal_Register").modal();
});
});
</script>
<form id="businessForm" method="POST" onsubmit="return validateForm()" name="myForm" enctype="multipart/form-data">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="experience">Rates For</label>
<input type="ratesfor" class="form-control" id="ratesfor" name="ratesfor" placeholder="weight(kg)">
<span id="rate_err"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="length">Length</label>
<input type="text" class="form-control" id="no" name="no" placeholder="Length"><span id="no_err"></span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="length"> </label>
<select class="form-control form-design col-lg-6 col-md-6 col-sm-12 col-xs-12" autocomplete="off" name="length" id="length" style="margin-top:25px;">
<option value="">feet</option>
<option value="">mm</option>
<option value="">mtr</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="breadth">Breadth</label>
<input type="text" class="form-control" id="breath" name="breath" placeholder="Breadth"><span id="b_t_err"></span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="breadth"> </label>
<select class="form-control form-design col-lg-6 col-md-6 col-sm-12 col-xs-12" autocomplete="off" name="b_type" id="b_type" style="margin-top:25px;">
<option value="">feet</option>
<option value="">mm</option>
<option value="">mtr</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="height">Height</label>
<input type="text" class="form-control" id="height" name="height" placeholder="Height"><span id="height_err"></span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="height"> </label>
<select class="form-control form-design col-lg-6 col-md-6 col-sm-12 col-xs-12" autocomplete="off" name="type" id="h_t" name="h_t" style="margin-top:25px;">
<option value="">feet</option>
<option value="">mm</option>
<option value="">mtr</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="experience">Type Of Truck</label>
<select id="truck_type" name="truck_type" autocomplete="off" class="form-control form-design col-lg-6 col-md-6 col-sm-12 col-xs-12">
<option value="feet">feet</option>
<option value="mm">mm</option>
<option value="mtr">mtr</option>
</select><span id="truck_type_err"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="date">Date of PickUp</label>
<br>
<input type="text" placeholder="DD-MM-YY" id="datepicker-13" name="datepicker-13" style="width:100%;height:35px;">
<span id="pickup_err"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="time">Time of PickUp</label>
<br>
<input type="time" class="form-control" id="myTime" name="myTime" placeholder="Time">
<span id="time_err"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="experience">Destination</label>
<select class="form-control form-design col-lg-6 col-md-6 col-sm-12 col-xs-12" autocomplete="off" id="from" name="from">
<option value="">From</option>
<option value="1">Ahmedabad</option>
<option value="2">Bangalore</option>
</select>
</div>
<span id="from_err"></span>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="experience"> </label>
<select class="form-control form-design col-lg-6 col-md-6 col-sm-12 col-xs-12" autocomplete="off" name="to" id="to" style="margin-top:25px;">
<option value="">To</option>
<option value="1">Guragon</option>
<option value="2">Hyderabad</option>
</select>
</div>
<span id="to_err"></span>
</div>
</div>
<br>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<button type="submit" class="btn btn-primary btn-lg btn-block">INVITE QUOTES</button>
</div>
</div>
</div>
</form>
<div class="container">
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog" style="z-index: 9999;">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="padding:5px 50px;">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4>Login</h4>
</div>
<div class="modal-body" style="padding:40px 50px;">
<form role="form">
<div class="form-group">
<label for="usrname">Username</label>
<input type="text" class="form-control" id="usrname" placeholder="Enter Name">
</div>
<div class="form-group">
<label for="psw"> Password</label>
<input type="text" class="form-control" id="psw" placeholder="Enter password">
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="" checked>Remember me</label>
</div>
<button type="submit" class="btn btn-info btn-block">Login </button>
</form>
</div>
<div class="modal-footer">
<p>Not a member? <b>Sign Up</b>
</p>
<!--<p>Forgot Password?</p>-->
</div>
</div>
</div>
</div>
<!--######
Login From End
#######--->
<!--#####
Register From Start
#####--->
<div class="modal fade" id="myModal_Register" role="dialog">
<div class="modal-dialog" style="z-index: 9999;">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="padding:5px 50px;">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4>Registration</h4>
</div>
<div class="modal-body" style="padding:40px 50px;">
<form role="form">
<div class="form-group">
<label for="usrname"> Username</label>
<input type="text" class="form-control" id="usrname" placeholder="Enter name">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="text" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="psw">Password</label>
<input type="text" class="form-control" id="psw" placeholder="Enter password">
</div>
<div class="form-group">
<label for="psw"> Confirm Password</label>
<input type="text" class="form-control" id="psw" placeholder="Confirm password">
</div>
<button type="submit" class="btn btn-info btn-block">Submit</button>
</form>
</div>
<!-- <div class="modal-footer">
<p>Not a member? Sign Up</p>
<p>Forgot Password?</p>
</div>-->
</div>
</div>
</div>
</div>

Bro check this line:
<button type="submit" class="btn btn-primary btn-lg btn-block">INVITE QUOTES</button>
here you are using button type submit, submit button will submit the form and reloads the page. Instead use:
<button type="button" class="btn btn-primary btn-lg btn-block">INVITE QUOTES</button>

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