Как сделать так, чтобы данные исчезали при успешной отправке?

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 в тег формы и используйте этот идентификатор для сброса данных формы в функции finishAjax, например:

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

Answer 2

Вы должны сбросить с, добавив Id к как

 <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();
        }