how can i clear inputs after insert into database with ajax and php?

Question

I would like to clear the inputs after the user submit the form using ajax.

My code works fine, i made based tutorials and after send fields are still with values. I want to clean them.

<script type="text/javascript">
$(document).ready(function(){

$("#inserir").click(function(){
    $('#loadingDiv')
        .hide()  
        .ajaxStart(function() {
            $(this).show();
        })
        .ajaxStop(function() {
            $(this).hide();
        })
    ;
var nome=$("#nome").val();
var email=$("#email").val();
var confirmacao=$("#confirmacao").val();
var acompanhantes=$("#acompanhantes").val();
// loading image
$("#message").html('<center><img src="images/ajax.gif" /></center>');

$.post('inserir.php', {nome: nome, email: email, confirmacao: confirmacao, acompanhantes: acompanhantes},
function(data){
$("#message").html(data);
$("#message").hide();
$("#message").fadeIn(500); 
});
return false;
});
});
</script>

Php

 $nome = $_POST['nome'];
 $email = $_POST['email'];
 $confirmacao = $_POST['confirmacao'];
 $acompanhantes = $_POST['acompanhantes'];
//Insert Data into mysql
$query=mysql_query("INSERT INTO cadastro_rsvp(nome,email,confirmacao,acompanhantes,id) VALUES('$nome','$email','$confirmacao','$acompanhantes','')");
 mysql_close($con);

if($query){
echo "Dados enviados";
}
else{ echo "Erro!"; }
}

abhiklpm · Accepted Answer · 2013-11-13 17:09:17Z

2

This will clear all textbox, textarea, radio button, checkbox values: replace "#myFormId" with your form id.

$('input:text, input:password, input:file, select, textarea', '#myFormId').val('');
$('input:checkbox, input:radio', '#myFormId').removeAttr('checked').removeAttr('selected');

you must add it after this line in your code:

$("#message").fadeIn(500);

answered Nov 13, 2013 at 17:09

abhiklpm

1,6532 gold badges16 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Márcio Over a year ago

I used your code, the only field that is not cleared is the email. you can tell me why? Thanx very much!

abhiklpm Over a year ago

If u are using html5 input types the u must add that also, for email will be like input:text, input:email

Márcio Over a year ago

My input is <input placeholder="Seu email" type="email" name="email" id="email" required> and i change to $('input:text, input:email, input:file, select, textarea', '#myFormId').val(''); but not cleared. Is right? The other fields are Ok.

abhiklpm Over a year ago

if that is not working u can use $("#email").val(""); after the code I gave.

user399666 · Accepted Answer · 2013-11-13 17:02:17Z

1

An example using one of your fields:

$("#nome").val('');

The above code will basically blank whatever is in the textfield.

answered Nov 13, 2013 at 17:02

user399666

20k7 gold badges49 silver badges68 bronze badges

Comments

caionitro · Accepted Answer · 2013-11-13 17:06:51Z

0

I use HTML to do it.

<button type="reset" value="Reset">Reset</button>

answered Nov 13, 2013 at 17:06

caionitro

11 bronze badge

1 Comment

caionitro Over a year ago

or use $().val('') each field.

Leonardo Barbosa · Accepted Answer · 2013-11-13 17:20:51Z

If you want to clear your fields AFTER you save it into the database, you'll have to clear your inputs AFTER you get a response from the server, in this case, in the success of your $.post.

$.post('inserir.php',
  {nome: nome, email: email, confirmacao: confirmacao, acompanhantes: acompanhantes},
  function(data){
    $("#message").html(data);
    $("#message").hide();
    $("#message").fadeIn(500);
    //HERE YOU PERFORM THE RESET (I suppose that they are input text fields):
    $("#nome").val('');
    $("#email").val('');
    $("#confirmacao").val('');
    $("#acompanhantes").val('');
  });
  return false;
});

Also, check the jQuery.post documentation for more information to work directly with a success callback function.

Collectives™ on Stack Overflow

how can i clear inputs after insert into database with ajax and php?

4 Answers 4

4 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related