私はモーダルを持つ単純なhtmlフォームを持っており、ajaxメソッドでデータを保存しています。今、私は数秒間成功メッセージを表示したいと思います。私はstackoverflowから多くの方法を試みたが、うまくいきませんでした。誰か助けてください。私のフォームとアヤックスコードはここにあります。 HTML: フォーム送信後に成功メッセージを表示するajax
<button data-toggle="modal" data-target="#add" class="btn btn-primary btn-sm">
<span class="glyphicon glyphicon-plus"></span>New
</button>
<div id="add" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<form id="save" method="post" enctype="" name="myForm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<strong>Add+</strong>
</div>
<div class="modal-body">
<table class="table table-bordered">
<tr>
<td>
<label>Student ID:</label>
<select name="student_id" id="student_id" onChange="names('student_id')" onkeyup="names('student_id')">
<option value="">select id</option>
<?php
include 'connect.php';
$sqlst="Select * from student_info";
$queryst=mysqli_query($connect,$sqlst);
while($rowst=mysqli_fetch_array($queryst)){
?>
<option value="<?php echo $rowst[1]?>"><?php echo $rowst[1]?>
</option>
<?php } ?>
</select>
</td>
<td>
<label>Date:</label>
<input type="text" name="att_date" id="att_date" class="selector" onChange="names('att_date')" onkeyup="names('att_date')"/>
</td>
</tr>
<tr>
<td id="student_id_error" style="color:#FF0000"></td>
<td id="att_date_error" style="color:#FF0000"></td>
</tr>
<tr>
<td>
<label>Sign In Time:</label><input type="text" name="sign_in" id="sign_in" onChange="names('sign_in')" onkeyup="names('sign_in')"/>
</td>
<td>
<label>Sign Out Time:</label>
<input type="text" name="sign_out" id="sign_out" onChange="names('sign_out')" onkeyup="names('sign_out')" disabled/>
</td>
</tr>
</table>
</div>
</div>
<div class="modal-footer">
<input type="submit" name="save" value="Submit" class="btn btn-primary" />
<button type="button" data-dismiss="modal" class="btn btn-danger">
Close
</button>
</div>
</form>
<div id="info" style="display: none;">
Data Successfully inserted!
</div>
</div>
</div>
JS:成功し
<script>
$(document).ready(function(){
var base_url="http://localhost/school/";
$('#save').submit(function(e){
e.preventDefault();
var student_id=$('#student_id').val();
var att_date=$.trim($('#att_date').val());
var sign_in=$.trim($('#sign_in').val());
var note=$.trim($('#note').val());
if(student_id===''||att_date===''||sign_in===''){
if(student_id==''){
$('#student_id_error').html('Please enter Student ID');
$('#student_id').css("border-color","red");
}
if(att_date==''){
$('#att_date_error').html('Please enter attendance date');
$('#att_date').css("border-color","red");
}
if(sign_in==''){
$('#sign_in_error').html('Please enter signIn time');
$('#sign_in').css("border-color","red");
}
}else{
$.ajax({
url:base_url+'student_att_insert.php',
method:'post',
data:new FormData(this),
processData: false,
contentType: false,
success: function(){
\t \t $("#info").show();
\t \t $("#info").delay(5000).fadeOut(); // Will hide after 5 seconds
//window.location.assign('student_att_index.php')
}
})
};
});
});
</script>
あなたが試したことを私たちに見せて、その問題の内容を説明する必要があります。 – CBroe
z.indexに問題はありませんか?あなたは開いているモーダルで、divを開こうとしています。このdivの位置は絶対ですか、Z-インデックスですか? – Roy
このdivには何もありません:absoluteとz-index.Nowどうすればいいですか? –