Automatically delete inputs later

Question

I have this code to send data by POST method, but then does not clean inputs::

<script type="text/javascript">
$(".btn_contact").click(function () {

                $.ajax({
                    type: "POST",
                    url: "./inserir",
                    data: $("#feedback_form").serialize(), // serializes the form's elements.
                    dataType: "json",
                    success: function (data)
                    {
                        if ($.trim(data) == 'true') {
                            $("#feedback_form").find('input').val(''); //clear text
                            $(".success_messages").removeClass('hide'); // success message
                        } else {
                            $(".error_message").removeClass('hide'); // error message
                        }
                    }
                });

            });
</script>

Beyond this example I have tried changing this line $("#feedback_form").find('input').val(''); //clear text for:

$("#feedback_form")[0].reset('input').val(''); //clear text

for:

$("#feedback_form")[0].reset(); //clear text

for:

$('input').val(''); //clear text

for:

$('#feedback_form input').val(''); //clear text

but none of these alternatives cleaned the inputs.

Html and JS:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<section class="hide-section" id="produto_1"> 
<form class="form-validate" id="feedback_form">
    <div class="campo">
        <fieldset> 
            <h1>
                <legend>
                    <center>
                        <strong>Produtos de Higiene</strong>
            </center>
        </h1><br> 
        </div>
        <fieldset class="grupo">
    <div class="campo">
            <strong><label for="Nome do Produto">Nome do Produto</label></strong> 
            <input type="text" id="DescricaoProd" name="DescricaoProd" required="" style="width:350px">
        </div>
    <div class="campo"> 
        <strong><label for="Unidade">Unidade</label></strong> 
            <input type="text" id="DescricaoUnid" name="DescricaoUnid" style="width:160px" required="" size="120">
        </div>
        </fieldset>
        <button class="btn btn-success btn_contact" type="button">Registo</button>
        <div id="success_messages" class="hide">sucessso</div>
        <div id="error_message" class="hide">erro</div>
</form>

</section> 

Answer 1

The problem detected was that the if is never accessed because the expected return is a JSON (dataType: "json",) and not a "true".

Need to use the callbacks Ajax to check if the return was a valid JSON or not: success and error respectively. And to clear the fields you use the complete (will clear the fields in any situation):

$(".btn_contact").click(function () { 

    $.ajax({ 
        type: "POST", 
        url: "./inserir", 
        data: $("#feedback_form").serialize(), // serializes the form's elements. 
        dataType: "json", 
        success: function (data) 
        { 
            $(".success_messages").removeClass('hide'); // success message 
        }, 
        error: function(data){ 
            $(".error_message").removeClass('hide'); // error message 
        }, 
        complete: function() 
        { 
            $('input', "#feedback_form").val(''); //clear text 
        } 
    }); 
});

Answer 2

Exchange that line:

$("#feedback_form").find('input').val(''); //clear text

For this, using the trigger() jquery:

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

Take a look here: https://stackoverflow.com/questions/6653556/jquery-javascript-function-to-clear-all-the-fields-of-a-form

Answer 3

Two options:

$('form').submit(function(){
$(this)[0].reset();

});

Or take it field by field:

document.getElementById('IdDocampo').value=''; // Limpa o campo

Example:

 <form name="form">
  First name:<br>
  <input type="text" name="firstname" value="Mickey">
  <br>
  Last name:<br>
  <input type="text" id="lastname" value="Mouse">
  <br><br>
  <input type="button" value="Submit" onclick="document.getElementById('lastname').value=''; ">
</form>

USING YOUR CODE:

    <section class="hide-section" id="produto_1"> 
<form name="form" class="form-validate" id="feedback_form">
    <div class="campo">
        <fieldset> 
            <h1>
                <legend>
                    <center>
                        <strong>Produtos de Higiene</strong>
            </center>
        </h1><br> 
        </div>
        <fieldset class="grupo">
    <div class="campo">
            <strong><label for="Nome do Produto">Nome do Produto</label></strong> 
            <input type="text" id="DescricaoProd" name="DescricaoProd" required="" style="width:350px">
        </div>
    <div class="campo"> 
        <strong><label for="Unidade">Unidade</label></strong> 
            <input type="text" id="DescricaoUnid" name="DescricaoUnid" style="width:160px" required="" size="120">
        </div>
        </fieldset>
        <button class="btn btn-success btn_contact" id="bt" type="button">Registo</button>
        <div id="success_messages" class="hide">sucessso</div>
        <div id="error_message" class="hide">erro</div>
</form>

</section> 

<script type="text/javascript">
$("#bt").click(function () {
   document.getElementById('DescricaoProd').value=''; 

 document.getElementById('DescricaoUnid').value=''; 
});


</script>

Answer 4

As your inputs are only of the type text, try like this:

$('#myForm input[type=text]').val("");

Answer 5

Probably your script is before HTML.

You have two options:

1. Place the script before the BODY closing tag

2. Or involve him in the role $(document).ready(function(){ then you put it anywhere in your source code.

   $(document).ready(function(){ 
      $(".btn_contact").click(function () {
   
               $.ajax({
                   type: "POST",
                   url: "./inserir",
                   data: $("#feedback_form").serialize(), // serializes the form's elements.
                   dataType: "json",
                   success: function (data)
                   {
                       if ($.trim(data) == 'true') {
                           $("#feedback_form").find('input').val(''); //clear text
                           $(".success_messages").removeClass('hide'); // success message
                       } else {
                           $(".error_message").removeClass('hide'); // error message
                       }
                   }
               });
   
      });
   });
   

The purpose of ready is to execute something as quickly as possible after loading the document, without having to wait for all content to be loaded.

@Beginner, surely you must have a strike truck driver inside your script! I put your code on this page and it works well. I just switched the url to point to my file online. See your code working clicking here

3. If none of the above work, then your Workbench should be. Reboot!