时间戳

首页 > 解决方案 > 提交成功后如何让数据消失

javascript - 提交成功后如何让数据消失

问题描述

我希望用户插入的数据在成功提交时从输入字段中消失，如果提交失败，它应该在字段中，例如数据重复。

我有一个可以接受用户输入并将其提交到数据库的表单，我使用 JavaScript 与我的表单和 PHP 脚本进行通信，所以现在我希望当数据成功提交时它应该消失，当它失败时它应该在那里。

这是 HTML 代码

<form role="form">
        <div class="box-body">

        <div class="form-group">
        <label for="inputClass">Class Title</label>
    <input type="class" class="form-control" id="inputClass" placeholder="Class Title">
    </div>

    <div class="form-group">
    <label for="selectSection">Class Section</label>
    <select name="selectSection" id="selectSection" class="form-control" required="required">
    <option selected disabled>Class Section</option>
    <?php echo(getSection()); ?>
    </select>
    </div>

    <span id="loading"><img src="../assets/images/loading.gif" height="40px" width="100%" alt="Ajax Indicator" /></span>
    </div>
    <!-- /.box-body -->

    <div class="box-footer">
    <button type="submit" class="btn btn-primary" id="registerClass">Submit</button>
    </div>
    </form>

JavaScript 代码是

<script type="text/javascript">
$(document).ready(function() {
    $('#loading').hide();
        $('#registerClass').click(function(){
    $('#loading').show();
        $.post("check-class.php", {
            inputClass: $('#inputClass').val(),  
            selectSection: $('#selectSection').val()          
        }, function(response){
            $('#resultInfo').fadeOut();
            setTimeout("finishAjax('resultInfo', '"+escape(response)+"')", 2000);
        });
        return false;
    });
});

function finishAjax(id, response) {
    $('#loading').hide();
    $('#'+id).html(unescape(response));
    $('#'+id).fadeIn();
}
</script>

我希望成功时会消失，但不幸的是它仍然存在

标签： javascripthtmlforms

解决方案

在表单标签中添加 id 属性并使用该 id 在 finishAjax 函数中重置表单数据，例如：

document.getElementById(' ID THAT MENTIONED IN FORM TAG ').reset();

推荐阅读