I have a “little” problem with my bootstrap modal. I’m loading into myModal a form created in temp.php file. Then I try to send this form to the save.php file using AJAX. Everything is OK but form validation doesn’t works ( didn’t checked if is empty before submitting the form). If I hard coding my form in the modal-body everything works fine. The problem occurs only when I load this form from external .php file… Any suggestions how to make form validation works in the right way? Thanks in advance!
My index.php file:
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
<script src="../jquery/jquery.min.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<button class="btn btn-success btn-sm" data-toggle="modal" data-target="#myModal" data-backdrop="static" onClick="fillModal('temp.php', 'modalTitle');">Open modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog" style="width:1650px;">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" id="modal-header">
</h4>
</div>
<div class="modal-body my_container-fluid" id="modal-body">
</div>
<div class="modal-footer">
<button type="submit" form="myForm" class="btn btn-success btn-sm" id="save">Save</button>
<button type="button" class="btn btn-danger danger btn-sm" data-dismiss="modal" id="cancel">Close</button>
</div>
</div>
</div>
</div>
<script>
function fillModal(str, title) {
var xhttp;
document.getElementById("modal-body").innerHTML = "";
document.getElementById("modal-header").innerHTML = title;
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("modal-body").innerHTML = this.responseText;
}
};
xhttp.open("POST", str, true);
xhttp.send();
}
//Submit form with AJAX
$(document).ready(function(){
$("#save").click(function(event){
event.preventDefault(); //prevent default action
// AJAX request
$.ajax({
url : "save.php", //form action url
type: 'POST', //form method
data : $("#myForm").serialize(), //encode form elements for submission
success: function(response){
$('.modal-body').html(response);
},
error: function(){
$('.modal-body').html('Error...');
}
});
});
});
</script>
</body>
</html>
This is my temp.php file:
<?php
echo "<form name="myForm" id="myForm" data-target="#myModal">n";
echo "<table class="table table-bordered table-condensed" style="width:1240px;">n";
echo "<thead>n";
echo " <tr>n";
echo " <th class="bg-success th" style="width: 170px; max-width: 170px;">Sample 1</th>n";
echo " <th class="bg-success th" style="width: 170px; max-width: 170px;">Sample 2</th>n";
echo " <th class="bg-primary th" style="width: 130px; max-width: 130px;">Sample 3</th>n";
echo " <th class="bg-primary th" style="width: 130px; max-width: 130px;">Sample 4</th>n";
echo " <th class="bg-primary th" style="width: 130px; max-width: 130px;">Sample 5</th>n";
echo " <th class="bg-primary th" style="width: 50px; max-width: 50px;">Sample 6n";
echo " <th class="active th" style="width: 130px; max-width: 130px;">Sample 7</th>n";
echo " <th class="active th" style="width: 100px; max-width: 100px;">Sample 8</th>n";
echo " <th class="active th" style="width: 200px; max-width: 200px;">Sample 9</th>n";
echo " </tr>n";
echo "</thead>n";
echo " <tr>n";
echo " <td style="width: 170px; max-width: 170px;"><input class="form-control input-sm" type="text" name="Sample_1" placeholder="Sample 1..." reguired></td>n";
echo " <td style="width: 170px; max-width: 170px;"><input class="form-control input-sm" type="text" name="Sample_2" placeholder="Sample 2..." reguired></td>n";
echo " <td style="width: 130px; max-width: 130px;"><input class="form-control input-sm" type="text" name="Sample_3" placeholder="Sample 3..."></td>n";
echo " <td style="width: 130px; max-width: 130px;"><input class="form-control input-sm" type="text" name="Sample_4" placeholder="Sample 4..."></td>n";
echo " <td style="width: 130px; max-width: 130px;"><input class="form-control input-sm" type="text" name="Sample_5" placeholder="Sample 5..."></td>n";
echo " <td style="width: 50px; max-width: 50px;"><input class="form-control input-sm" type="text" name="Sample_6" placeholder="Sample 6..."></td>n";
echo " <td style="width: 130px; max-width: 130px;"><input class="form-control input-sm" type="number" name="Sample_7" placeholder="Sample 7..."></td>n";
echo " <td style="width: 100px; max-width: 100px;"><input class="form-control input-sm"type="text" name="Sample_8" placeholder="Sample 8..."></td>n";
echo " <td style="width: 200px; max-width: 200px;"><input class="form-control input-sm" type="text" name="Sample_9" placeholder="Sample 9..."></td>n";
echo " </tr>n";
echo "</tale>n";
echo "<input type="hidden" name="act" value="addNew">n";
echo "</form>n";
?>
Advertisement
Answer
xmlhttprequest IS ajax. $.ajax is the same as xhttp….
element.load(url) does ajax too
- Replace
reguired
withrequired
(spelling) - give the required fields an empty value
- replace
$("#save").click(function(event) {
with
$("#modal-body").on("submit","#myForm", function(event) {
because you need to submit the form to execute the validation – the e.preventDefault stops the submission so you can do the ajax - Replace
function fillModal(str, title) {
var xhttp;
document.getElementById("modal-body").innerHTML = "";
document.getElementById("modal-header").innerHTML = title;
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("modal-body").innerHTML = this.responseText;
}
};
xhttp.open("POST", str, true);
xhttp.send();
}
with this jquery
$('[data-target="#myModal"]').on("click", function() {
$("#modal-header").html($(this).data("title"));
$("#modal-body").empty().load($(this).data("url"))
}
and change the button from
<button class="btn btn-success btn-sm" data-toggle="modal" data-target="#myModal" data-backdrop="static" onClick="fillModal('temp.php', 'modalTitle');">Open modal</button>
to
<button class="btn btn-success btn-sm" data-toggle="modal" data-target="#myModal" data-backdrop="static" data-title="modalTitle" data-url="temp.php">Open modal</button>
$(function() {
$('[data-target="#myModal"]').on("click", function() {
$("#modal-header").html($(this).data("title"));
// $("#modal-body").load($(this).data("url"));
// the code below is an example - uncomment above and delete below
$("#modal-body").html(`<form name="myForm" id="myForm" data-target="#myModal">
<table class="table table-bordered table-condensed" style="width:1240px;">
<thead>
<tr>
<th class="bg-success th" style="width: 170px; max-width: 170px;">Sample 1</th>
<th class="bg-success th" style="width: 170px; max-width: 170px;">Sample 2</th>
<th class="bg-primary th" style="width: 130px; max-width: 130px;">Sample 3</th>
<th class="bg-primary th" style="width: 130px; max-width: 130px;">Sample 4</th>
<th class="bg-primary th" style="width: 130px; max-width: 130px;">Sample 5</th>
<th class="bg-primary th" style="width: 50px; max-width: 50px;">Sample 6
<th class="active th" style="width: 130px; max-width: 130px;">Sample 7</th>
<th class="active th" style="width: 100px; max-width: 100px;">Sample 8</th>
<th class="active th" style="width: 200px; max-width: 200px;">Sample 9</th>
</tr>
</thead>
<tr>
<td style="width: 170px; max-width: 170px;"><input class="form-control input-sm" type="text" name="Sample_1" placeholder="Sample 1..." required value=""></td>
<td style="width: 170px; max-width: 170px;"><input class="form-control input-sm" type="text" name="Sample_2" placeholder="Sample 2..." required value=""></td>
<td style="width: 130px; max-width: 130px;"><input class="form-control input-sm" type="text" name="Sample_3" placeholder="Sample 3..."></td>
<td style="width: 130px; max-width: 130px;"><input class="form-control input-sm" type="text" name="Sample_4" placeholder="Sample 4..."></td>
<td style="width: 130px; max-width: 130px;"><input class="form-control input-sm" type="text" name="Sample_5" placeholder="Sample 5..."></td>
<td style="width: 50px; max-width: 50px;"><input class="form-control input-sm" type="text" name="Sample_6" placeholder="Sample 6..."></td>
<td style="width: 130px; max-width: 130px;"><input class="form-control input-sm" type="number" name="Sample_7" placeholder="Sample 7..."></td>
<td style="width: 100px; max-width: 100px;"><input class="form-control input-sm"type="text" name="Sample_8" placeholder="Sample 8..."></td>
<td style="width: 200px; max-width: 200px;"><input class="form-control input-sm" type="text" name="Sample_9" placeholder="Sample 9..."></td>
</tr>
</tale>
<input type="hidden" name="act" value="addNew">
</form>`)
})
$("#modal-body").on("submit","#myForm", function(event) {
event.preventDefault(); //prevent default action
// AJAX request
$.ajax({
url: "save.php", //form action url
type: 'POST', //form method
data: $("#myForm").serialize(), //encode form elements for submission
success: function(response) {
$('.modal-body').html(response);
},
error: function() {
$('.modal-body').html('Error...');
}
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<button class="btn btn-success btn-sm" data-toggle="modal" data-target="#myModal" data-title="modal title 1" data-url="temp..php" data-backdrop="static">Open modal 1</button>
<button class="btn btn-success btn-sm" data-toggle="modal" data-target="#myModal" data-title="modal title 2" data-url="temp..php" data-backdrop="static">Open modal 2</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog" style="width:1650px;">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="modal-header"></h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body my_container-fluid" id="modal-body">
</div>
<div class="modal-footer">
<button type="submit" form="myForm" class="btn btn-success btn-sm" id="save">Save</button>
<button type="button" class="btn btn-danger danger btn-sm" data-dismiss="modal" id="cancel">Close</button>
</div>
</div>
</div>
</div>