Bengt
Reputation: 75
jquery ajax modal problem firing validate and submithandler
Think i'm lost in my code... can't figure out the problem. I have a modal that opens different forms, setting name and id on the form and submit button accordingly, but nothing happens when pressing submit button. My javascript knowledge is limited and based on try and fail and try and fail and try and sometimes achieving results :)
Back to the issue here... The modal opens fine but nothing happens when hitting submit... Nothing visible to me at least...
Hope i have explained my problems ok.
This calls the modal
<span class="stedModal" data-type="sted" title="Legg til sted" style="cursor: pointer"> <i class="fas fa-plus"></i></span>
The modal:
<!-- Modal - Legg til sted -->
<div class="modal fade" id="Modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Legg til sted</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<!-- name and id is set to sendStedForm in the script that calls the modal -->
<form action="javascript: void(0)" name="none" id="none" class="modalForm">
<div class="main"></div>
<!-- addSted.php is inserted here -->
<div class="text-end">
<!-- button name and id is set by the script that calls the modal to submitSted -->
<button type="submit" name="none1" id="none1" class="btn btn-sm btn-info submitButton" ><i class="far fa-trash-alt"></i> Lagre</button>
<button type="button" class="btn btn-sm btn-success" data-bs-dismiss="modal" aria-label="Close"><i class="fas fa-times"></i> Lukk</button>
</div>
</form>
</div>
</div>
</div>
</div>
calls addSted.php
<input type="hidden" name="lag_id" id="slag_id" value="<?= session()->get('lag_id'); ?>">
<div class="container">
<div class="row">
<div class="col">
<div class="form-group">
<label for="sted">Sted<span class="text-danger fw-bold">*</span></label>
<input type="text" name="sted" id="ssted" class="form-control required" placeholder="Sted">
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="form-group">
<label for="oppmote">Oppmøte<span class="text-danger fw-bold">*</span></label>
<input type="text" name="oppmote" id="soppmote" class="form-control" placeholder="Oppmøtested">
</div>
</div>
</div>
<div class="row mb-3">
<div class="col">
<div class="form-group">
<label for="sted">Oppmøte tid<span class="text-danger fw-bold">*</span><small class="text-muted">Timer før oppdrag starter</small></label>
<input type="text" name="oppmote_tid" id="soppmote_tid" class="form-control" placeholder="Oppmøte tid">
</div>
</div>
</div>
</div>
The scripts
<script>
function goBack() {
window.history.back();
}
$('#alert').hide();
$('.stedModal').click(function() {
var typet = $(this).data('type');
if (typet == 'type') {
var url = '/vakter/ajaxAddType';
$('.modalForm').attr('id', 'sendTypeForm');
$('.modalForm').attr('name', 'sendTypeForm');
$('.submitButton').attr('id', 'submitType');
$('.submitButton').attr('name', 'submitType');
$('.modal-title').html('Legg til Type');
} else if (typet == 'sted') {
var url = '/vakter/ajaxAddSted';
$('.modalForm').attr('id', 'sendStedForm');
$('.modalForm').attr('name', 'sendStedForm');
$('.submitButton').attr('id', 'submitSted');
$('.submitButton').attr('name', 'submitSted');
$('.modal-title').html('Legg til Sted');
}
// AJAX request
$.ajax({
url: url,
type: 'post',
success: function(response){
// Add response in Modal body
$('#alert').hide();
$('.main').html(response);
// Display Modal
$('#Modal').modal('show');
}
});
});
if ($("#sendStedForm").length > 0) {
$("#sendStedForm").validate({
rules: {
sted: {
required: true,
maxlength: 100,
},
oppmote: {
required: true,
maxlength: 100,
},
oppmote_tid: {
pattern: /^[0-9,]+$/,
maxlength: 4,
}
},
messages: {
sted: {
required: "<small class=\"text-danger\">Legg inn sted</small>",
maxlength: "<small class=\"text-danger\">Sted bør ikke være så langt. 100 tegn er maks</small>",
},
oppmote: {
required: "<small class=\"text-danger\">Legg inn en kort beskrivelse</small>",
maxlength: "Beskrivelsen bær ikke være så lang. Maks 100 tegn</small>",
},
oppmote_tid: {
pattern: "<small class=\"text-danger\">Skriv inn ett gyldig nr</small>",
maxlength: "<small class=\"text-danger\">Oppmøte tid er for langt. Maks 3 tegn</small>",
},
},
submitHandler: function(form) {
alert('hi');
$('#submitSted').html('lagrer..');
// var lag_id = $("#slag_id").val();
// var sted = $("#ssted").val();
// var oppmote = $("#soppmote").val();
// var oppmote_tid = $("#soppmote_tid").val();
// if (!oppmote_tid) { oppmote_tid = '0';}
// oppmote_tid = oppmote_tid.replace(/,/g, '.');
$.ajax({
url: "<?php echo base_url('/vakter/ajaxAddSted/post') ?>",
type: "POST",
// data: $('#ajax_form').serialize(),
dataType: "json",
// data: { lag_id : lag_id, sted : sted, oppmote : oppmote, oppmote_tid : oppmote_tid },
data: $('#sendStedForm').serialize(),
success: function( response ) {
console.log(response);
console.log(response.success);
$('#submitSted').html('Submit');
$('#alert').html(response.msg);
$('#alert').addClass(response.typemsg);
$('#alert').show();
// $('#res_message').removeClass('d-none');
// document.getElementById("ajax_form").reset();
// alert("User record updated successfully with ID: "+response.id);
$("#sted").append('<option value="'+ response.id +'">'+ sted + ' - ' + oppmote + ' - ' + oppmote_tid + ' timer</option>')
$('#stedModal').modal('hide');
$('#submitSted').html('<i class="far fa-trash-alt"></i> Lagre');
setTimeout(function(){
$('#alert').hide();
$('#alert').html('');
},10000);
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(thrownError);
}
});
}
});
}
Upvotes: 1
Views: 212
Answers (1)
Yeasir Muhmmad Pervej
Reputation: 161
Try to wrap the sendStedForm inside a function and call it after the dom actually has the sendStedForm id to work with which is after ajax data is loaded and placed inside html. Although I have not tested this, but I hope this should work.
function goBack() {
window.history.back();
}
$('#alert').hide();
$('.stedModal').click(function() {
var typet = $(this).data('type');
if (typet == 'type') {
var url = '/vakter/ajaxAddType';
$('.modalForm').attr('id', 'sendTypeForm');
$('.modalForm').attr('name', 'sendTypeForm');
$('.submitButton').attr('id', 'submitType');
$('.submitButton').attr('name', 'submitType');
$('.modal-title').html('Legg til Type');
} else if (typet == 'sted') {
var url = '/vakter/ajaxAddSted';
$('.modalForm').attr('id', 'sendStedForm');
$('.modalForm').attr('name', 'sendStedForm');
$('.submitButton').attr('id', 'submitSted');
$('.submitButton').attr('name', 'submitSted');
$('.modal-title').html('Legg til Sted');
}
// AJAX request
$.ajax({
url: url,
type: 'post',
success: function(response){
// Add response in Modal body
$('#alert').hide();
$('.main').html(response);
// Display Modal
$('#Modal').modal('show');
process_sendStedForm();
}
});
});
function process_sendStedForm(){
if ($("#sendStedForm").length > 0) {
$("#sendStedForm").validate({
rules: {
sted: {
required: true,
maxlength: 100,
},
oppmote: {
required: true,
maxlength: 100,
},
oppmote_tid: {
pattern: /^[0-9,]+$/,
maxlength: 4,
}
},
messages: {
sted: {
required: "<small class=\"text-danger\">Legg inn sted</small>",
maxlength: "<small class=\"text-danger\">Sted bør ikke være så langt. 100 tegn er maks</small>",
},
oppmote: {
required: "<small class=\"text-danger\">Legg inn en kort beskrivelse</small>",
maxlength: "Beskrivelsen bær ikke være så lang. Maks 100 tegn</small>",
},
oppmote_tid: {
pattern: "<small class=\"text-danger\">Skriv inn ett gyldig nr</small>",
maxlength: "<small class=\"text-danger\">Oppmøte tid er for langt. Maks 3 tegn</small>",
},
},
submitHandler: function(form) {
alert('hi');
$('#submitSted').html('lagrer..');
// var lag_id = $("#slag_id").val();
// var sted = $("#ssted").val();
// var oppmote = $("#soppmote").val();
// var oppmote_tid = $("#soppmote_tid").val();
// if (!oppmote_tid) { oppmote_tid = '0';}
// oppmote_tid = oppmote_tid.replace(/,/g, '.');
$.ajax({
url: "<?php echo base_url('/vakter/ajaxAddSted/post') ?>",
type: "POST",
// data: $('#ajax_form').serialize(),
dataType: "json",
// data: { lag_id : lag_id, sted : sted, oppmote : oppmote, oppmote_tid : oppmote_tid },
data: $('#sendStedForm').serialize(),
success: function( response ) {
console.log(response);
console.log(response.success);
$('#submitSted').html('Submit');
$('#alert').html(response.msg);
$('#alert').addClass(response.typemsg);
$('#alert').show();
// $('#res_message').removeClass('d-none');
// document.getElementById("ajax_form").reset();
// alert("User record updated successfully with ID: "+response.id);
$("#sted").append('<option value="'+ response.id +'">'+ sted + ' - ' + oppmote + ' - ' + oppmote_tid + ' timer</option>')
$('#stedModal').modal('hide');
$('#submitSted').html('<i class="far fa-trash-alt"></i> Lagre');
setTimeout(function(){
$('#alert').hide();
$('#alert').html('');
},10000);
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(thrownError);
}
});
}
});
}
}
Upvotes: 1
Related Questions
- Ajax Call on submit handler Jquery Validation
- jQuery modal not showing after submitting form
- jQuery validate submitHandler not firing
- jQuery validate with rules and submitHandler, via AJAX issue
- Ajax submitHandler not executing
- POST not sent after jQuery form validation
- Cannot Submit Form with Ajax and jQuery Validate
- jquery validation with modal formwith ajax submitHandler
- jQuery and Ajax Submits + Modal Dialog
- Jquery Ajax Validation Not Functioning On Submit