错误填写后如何清理表格？

Question

I have a filling form, when user enter № of invoice, for example IN-111111/11, so in the next form shows the amount, here the photo of successful check, here the photo of unsuccessful check

So in my case, when user enter IN-111111/11, it returns amount 10, and if i change the № of invoice, amount 10 still remains in the second form. How to automatically clean the second form, if user enter the wrong № of invoice?

html code of form:

<label class="label2 invoice"><?php echo _("№ of invoice");?></label>
<input class=" field only-numeric input1 invoice" type="text" name="invoice" value="<?php ?>"/>

<p class="field-set__message invoice-note" style="display: none">Loading</p>
<p class="field-set__message invoice-errnote" style="display: none; color: red"> Please check the correctness</p>

<label class="label2"><?php echo _("Amount(Euro)");?></label>
<input class="field only-numeric input1" type="text" name="order[calcSum]" id="summ" value="<?php echo htmlspecialchars($order->getCalcSum()); ?>"/>

ajax code, how to connect to api:

<script>
    $(document).on('change', '.invoice', '.sum',  function() {
        var loading = $('.invoice-note'),
            _this = $(this),
            err = $('.invoice-errnote');

        err.hide();

        if(_this.val().length > 3) {
            $.ajax({
                url: 'engine/ajax/invoice.php',
                type: 'POST',
                dataType: 'JSON',
                data: {
                    action: 'invoice',
                    invoice: _this.val()
                },
                beforeSend: function() {
                    loading.show();
                },
                success: function(data) {
                    if(data.error) {
                        _this.css('border', '1px solid red');
                        err.show();                     
                    } else {
                        _this.css('border', '1px solid green');
                        $('#summ').val(data.summ);
                    }
                    loading.hide();
                }
            });
        }
    });

    $.ajax({
        url:'engine/ajax/invoice.php',
        type:'POST',
        dataType: 'JSON',
        data:{
            action:'sum',
        }
    })

Answer 1

You can try this method:

$('#myForm').trigger("reset");

or this way answered other here Resetting a multi-stage form with jQuery

function resetForm($form) {
    $form.find('input:text, input:password, input:file, select, textarea').val('');
    $form.find('input:radio, input:checkbox')
         .removeAttr('checked').removeAttr('selected');
}

// to call, use:
resetForm($('#myform')); // by id, recommended
resetForm($('form[name=myName]')); // by name

Hope it helps.