how can i make it work resetAll in un form with JQuery

Question

I want to activate the link resetAll when i click (to clear all 6 inputs in fields of form). Like this code https://jsfiddle.net/fm1y5c8v/3/:

ACC.multiLogin = {
     _autoload: [
        "resetAllFields",

     ],

 resetAllFields: function() {
    $(".resetFieldJs").on("click", function(){
            $("#multilogin-search input").each(function(){
                var input = $(this);
                input.val("");

                });
            });
    },
    }

Thanks for helping

Answer 1

jQuery doesn't have a reset() method on its own, but native JavaScript does. So what we can do is to convert the jQuery element to a JavaScript object by using one of the below option.

$("#multiLogin-search")[0].reset();
OR
$("#multiLogin-search").get(0).reset();

$(".resetFieldJs").on("click", function(){
  $("#multiLogin-search")[0].reset();
  //$("#multiLogin-search").get(0).reset();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="multiLogin-search" class="d-none">
  <div class="column">
    <div class="text-input-wrap">
      <p> Customer number <p>
      <p> <input class="text-input" type="text" name="customerCode"  > <p>
    </div>
    <div class="text-input-wrap">
      <p> Country <p>
      <p> <input class="text-input" type="text" name="country"  > <p>
    </div>
    <div class="text-input-wrap">
      <p> Postal Code <p>
      <p> <input class="text-input" type="text" name="postalCode"  > <p>
    </div>
   </div>
    <div class="column">
        <div class="text-input-wrap">
            <p> Customer Name <p>
<p> <input class="text-input" type="text" name="customerName" > <p>
        </div>
        <div class="text-input-wrap">
            <p> City <p>
<p> <input class="text-input" type="text" name="city" > <p>
        </div>
        <div class="text-input-wrap">
            <p> Address <p>
<p> <input class="text-input" type="text" name="address"><p>
        </div>
    </div>

  <div class="emptyFieldsLink" >
    <a class="resetFieldJs" >ResetAll<spring:theme code="multilogin.search.link.emptyfields"/></a>
   </div>
</form>