Question

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

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

这是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>

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

Answer 1

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

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

Answer 2

您应该通过添加一个ID来从from重置

 <form role="form" id ="myFrom">

然后从中重置，一旦您收到服务器的答复并想清除表格值

document.getElementById('myFrom').reset();

您可以在finishAjax函数中添加此重置逻辑

  function finishAjax(id, response) {
            $('#loading').hide();
            $('#'+id).html(unescape(response));
            $('#'+id).fadeIn();
            document.getElementById('myFrom').reset();
        }

成功提交后，我将如何使数据消失

2 个答案: