how do I clear my text fields after sending a message

Question

I'm trying to use an ajax contact form to send me emails but i'd like to clear the text fields after the successful sending of the email. I've tried setting the value to val("") but it didnt seem to work. How can I get this to work?

$(document).ready(function(){
$("#ajax-contact-form").submit(function(){

// 'this' refers to the current submitted form
var str = $(this).serialize();

   $.ajax({
   type: "POST",
   url: "inc/contact.php",
   data: str,
   success: function(msg){

$("#note").ajaxComplete(function(event, request, settings){

if(msg == 'OK') // Message Sent? Show the 'Thank You' message 
{
result = '<div class="notification_ok">Your message has been sent. Thank you!</div>';
$("#fields").val("");
}
else
{
result = msg;
}

$(this).html(result);

});

}

 });

return false;

});

});

<-------------------------HTML-------------------------->

<center>

<center><h3>A Tableless Contact Form (JQuery & AJAX)</h3></center>

<div align="left" style="width: 500px;">

<fieldset class="info_fieldset"><legend>Contact</legend>

<div id="note"></div>
<div id="fields">

<form id="ajax-contact-form" action="javascript:alert('success!');">

<INPUT class="textbox" type="text" name="name" value=""><br />

<INPUT class="textbox" type="text" name="email" value=""><br />

<INPUT class="textbox" type="text" name="subject" value=""><br />

<TEXTAREA class="textbox" NAME="message" ROWS="5" COLS="25"></TEXTAREA><br />

<INPUT class="button" type="submit" name="submit"  value="Send Message">
</form>

</div>

</fieldset>

</div>

 </center>

Please post the relevant HTML markup. It's very hard to give you help if you don't show the code. — Linus Thiel, Mar 02 '12 at 11:35
If I understand your question then you should call your $("#fields").val(""); inside success callback function. — The Alpha, Mar 02 '12 at 11:40

score 3 · Accepted Answer · answered Mar 02 '12 at 11:43

I'd suggest that your selector $('#fields') is the problem. Without looking at your HTML it's hard to know but the selector '#fields' will only match tags with an ID of fields - of which there should only be 1 (IDs within a document should be unique).

Based on your javascript (and assuming that the AJAX part works), then the following should work as a replacement for $("#fields").val("");

$("#ajax-contact-form").find('input, textarea').val("");

That should target all the input and textarea tags within the ajax-contact-form form and reset their values. You'll probably have to something a bit more sophisticated to reset any select tags to their default values.

how do I clear my text fields after sending a message

1 Answers1