Automatically delete inputs afterwards

3

I have this code to send data by POST method, but then it does not clean the 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>

In addition to this example I've already tried changing this line $("#feedback_form").find('input').val(''); //clear text by:

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

by:

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

by:

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

by:

$('#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><sectionclass="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> 
    
asked by anonymous 27.05.2018 / 21:11

5 answers

1

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

You need to use Ajax's callbacks to check whether the return was a valid JSON or not: success and error respectively. And to clear the fields you use 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 
        } 
    }); 
});
    
27.05.2018 / 23:19
1

Change this line:

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

For this, using trigger() of Jquery:

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

Take a look here: link

    
27.05.2018 / 21:43
1

As your inputs are only of type text , try:

$('#myForm input[type=text]').val("");
    
27.05.2018 / 22:06
1

Two options:

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

});

Or take field to 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>
    
27.05.2018 / 21:47
0

Probably your script is before HTML.

  

You have two options:

  • Placing the script before the BODY closing tag
  • Or wrap it in the function $(document).ready(function(){ from there 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 fast as possible after loading the document, without having to wait for all the content to be loaded.

      

    @Initiative, sure to have a trucker strike inside your script! I put your code on this page and it works fine. I just changed the url to point to my online file. See your code working by clicking here

  • If none of the above works, then your workbench should be baked. Restart it!
  • 27.05.2018 / 22:30