Question

我有一个带模态的简单html表单，我用ajax方法保存数据。现在，我想显示成功消息几秒钟。我从stackoverflow尝试了很多方法，但没有用。请有人帮助我。这是我的表格和ajax代码。 HTML：

      <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">&times;</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：

＆＃13;

<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(){
                
		$("#info").show();
		$("#info").delay(5000).fadeOut(); // Will hide after 5 seconds
            //window.location.assign('student_att_index.php')
            }
        })
    };
 });
 
 });
</script>

＆＃13;

Answer 1

成功在html中显示你的msg。 5秒后，它将加载'student_att_index.php'

    success: function() {
            //display success message for a few seconds
            setTimeout(function() {
                window.location.assign('student_att_index.php')
            }, 5000);
        }

Answer 2

您可以在HTML中添加一个div，其ID为：

<div id="info" style="display: none;">
 Your text
</div>

在你的JS代码中添加：

$("#info").show();
$("#info").delay(5000).fadeOut(); // Will hide after 5 seconds

在表单提交ajax后显示成功消息

2 个答案: