How to reset a form after form submission using ajax or how to empty the input fields in magento 2

Question

How to reset a form after submission (which is submitted using ajax)?

Answer 1

You can place this code in your AJAX response success

$(':input','#YourFormId')
     .not(':button, :submit, :reset, :hidden')
     .val('')
     .removeAttr('checked')
     .removeAttr('selected');

Answer 2

You can reset it with jquery.

Use Below code

$("#form_id").reset();

You can do this with simple javascript as well.

document.getElementById("form_id").reset(); 

You can call this in ajax success method. so once your ajax call will be success it will reset the form.

Answer 3

Following code works fine for me to clear form data after submission using ajax.

Please add below the jquery code after ajax success response.

$('#your-form-id')[0].reset();

Full Sample Code

    $('#quote-request-form').submit(function (event) {
        $("#suc_msg").html('');
        $("#err_msg").html('');                
        event.preventDefault();
        var form = $(this);
        var formData = form.serialize();

        $.ajax({
            type: 'POST',
            url: '<?php echo $block->getUrl("quoterequest/index/quoterequest"); ?>',
            data: formData,
            showLoader: true,
            cache: false,
            success: function (response) {
                console.log(response);
                $('#quote-request-form')[0].reset(); //Clear form data
                if(response.success != '')
                {
                   $("#suc_msg").show();
                   $("#suc_msg").html(response.success);
                }
                else
                {
                  $("#error_msg").show();
                  $("#suc_msg").html(response.error);
                }                       
            },
            error: function (xhr, status, error) {
                console.error(error);
            }
        });
    });