Я пытаюсь показать bootstrap модальное сообщение, используя ajax в php. Я могу получить предупреждение под ajax, но не модально. Когда я использую ajax внутри javascript. Он работал, но с той же структурой, он не работает сейчас. Я думаю, что это связано с кнопкой отправки. Я установил тип тега кнопки для подтверждения html 5. но он плохо взаимодействует с bootstrap модальным. Когда я меняю тип на кнопку, модал работает, но html5 не работает. Есть ли способ решить эту проблему? Я провел так много часов сейчас, но не повезло. Любая помощь будет оценена. Спасибо в авансом.
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/shop-homepage.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/mystyle.css">
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script>
$(document).ready(function(){
$('#submit').click(function(){
if($("form")[0].checkValidity()) {
var params = jQuery("#frm").serialize();
jQuery.ajax({
url:'join_process.php',
type:'POST',
data:params,
dataType:"text",
error:function(){
alert('join fails!');
},
success:function(data){
if(data==true){
alert("test");
$('.modal-body').html("<center>member join success</center>");
// Display Modal
$('#empModal').modal('show');
// Add response in Modal body
}else{
$('.modal-body1').html(data);
// Display Modal
$('#empModal1').modal('show');
}
}
});
}else{ console.log("invalid form");}
});
});
</script>
</head>
<body>
<?php
headerNav();
?>
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="col-lg-3">
<?php
sideMenu();
?>
</div>
<!-- /.col-lg-3 -->
<div class="col-lg-9 text-center mt-1">
<?php
// $bookinfo= get_book_info($new);
?>
<br/>
<div class="row">
<div class="col-lg-3"></div>
<div class="col-lg-6">
<table class="table table-bordered text-center" id="test">
<form id="frm">
<tr>
<th colspan="2" bgcolor="#d2e6f7">Membership</th>
</tr>
<tr>
<td><label for="name">name:</label></td>
<td style="text-align:left;"><input type="text"
id="name" name="name" value="" maxlength="20" size="20" required/></tr>
<tr>
<td><label for="id">id:</label></td>
<td style="text-align:left;"><input type="text"
id="id" name="id" value="" maxlength="20" size="20" required/>
<div id="id_chk"></div>
</tr>
<tr>
<td><label for="pass">password:</label></td>
<td style="text-align:left;"><input type="password"
id="pass" name="pass" maxlength="20" size="20" required/></td>
</tr>
<td><label for="pass_confirm">password confirm:</label></td>
<td style="text-align:left;"><input type="password"
id="pass_confrm" name="pass_confrm" maxlength="20" size="20" required/></td>
</tr>
<tr>
<td><label for="email">email:</label></td>
<td style="text-align:left;"><input type="email"
id="email" name="email" value="" maxlength="20" size="20" required/></tr>
<tr>
<td><label for="addr">address:</label></td>
<td style="text-align:left;"><input type="text"
id="addr" name="addr" value="" maxlength="20" size="20" required/></tr>
<tr>
<td><label for="cellphone">cellphone:</label></td>
<td style="text-align:left;">
<input type="tel" id="cellphone" name="cellphone"
placeholder="01091112333" required>
</td>
</tr>
<tr>
<td>Want to be administrator:</td>
<td style="text-align:left;"><input type="radio"
name="isadmin" value="Y">
<label for="y">Yes</label>
<input type="radio" name="isadmin" value="N" checked>
<label for="n">No</label>
</tr>
<tr>
<td colspan='2'>
<button type="submit" id="submit" class="btn btn-
primary">가입</button>
</td>
</tr>
</form>
</table>
<!-- Modal -->
<div class="modal fade" id="empModal1" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"></h4>
<button type="button" class="close" data-dismiss="modal"
id="close">×</button>
</div>
<div class="modal-body1">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-
dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="empModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"></h4>
<button type="button" class="close" data-dismiss="modal" id="close"
onclick="location.href='index.php'">×</button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal"
onclick="location.href='index.php'">Close</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3"></div>
</div>
</div>
</div>
</div>