Manu Krishna Manu Krishna - 7 months ago 54
Javascript Question

How to clear input fields after form submit

I am trying to clear the input fields after submit the form. But the input data still there even after submit the form every time. I am using ajax jquery form. How can I fix it? Thanks in advance.

Code

function sent dContact() {
var valid;
valid = validateContact();
if (valid) {
jQuery.ajax({
url: "contact_mail.php",
data: 'userName=' + $("#userName").val() +
'&userEmail=' + $("#userEmail").val() + '&subject=' + $("#subject")
.val() + '&content=' + $("#content").val() + '&captcha=' + $("#captcha").val(),
type: "POST",
success: function(data) {
$(".mail-status").html(data);
},
error: function() {}
});
}
}

function validateContact() {
var valid = true;
$(".demoInputBox").css('background-color', '');
$(".info").html('');

if (!$("#userName").val()) {
$("#userName-info").html("(required)");
$("#userName").css('background-color', '#FFFFDF');
valid = false;
}
if (!$("#userEmail").val()) {
$("#userEmail-info").html("(required)");
$("#userEmail").css('background-color', '#FFFFDF');
valid = false;
}
if (!$("#userEmail").val().match(/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/)) {
$("#userEmail-info").html("(invalid)");
$("#userEmail").css('background-color', '#FFFFDF');
valid = false;
}
if (!$("#subject").val()) {
$("#subject-info").html("(required)");
$("#subject").css('background-color', '#FFFFDF');
valid = false;
}
if (!$("#content").val()) {
$("#content-info").html("(required)");
$("#content").css('background-color', '#FFFFDF');
valid = false;
}
if (!$("#captcha").val()) {
$("#captcha-info").html("(required)");
$("#captcha").css('background-color', '#FFFFDF');
valid = false;
}

return valid;
}

function refreshCaptcha() {
$("#captcha_code").attr('src', 'captcha_code.php');
}


php

<?php
session_start();
if($_POST["captcha"]==$_SESSION["captcha_code"]){
$toEmail = "web.instamarc@gmail.com";
$mailHeaders = "From: " . $_POST["userName"] .
"<". $_POST["userEmail"] .">\r\n";
if(mail($toEmail, $_POST["subject"], $_POST["content"], $mailHeaders)) {
print "<p class='success'>Email Sent Successfully</p>";
} else {
print "<p class='Error'>Problem in Sending Mail.</p>";
}
} else {
print "<p class='Error'>Enter Correct Captcha Code.</p>";
}
?>


Html

<div id="frmContact">
<div class=row>
<div class="col-md-12">
<div id="mail-status"><?php echo $result; ?></div>
</div>
<div class="col-md-4 col-sm-4">
<span id="userName-info" class="info"></span>
<input type="text" name="userName" id="userName" class="form-control"
placeholder="Name">

</div>
<div class="col-md-4 col-sm-4">
<span id="userEmail-info" class="info"></span>
<input type="text" name="userEmail" id="userEmail"
class="form-control" placeholder="Email">
</div>
<div class="col-md-4 col-sm-4">
<span id="subject-info" class="info"></span>
<input type="text" name="subject" id="subject"
class="form-control" placeholder="Phone Number">
</div>
<div class="col-md-12">
<span id="content-info" class="info"></span>
<textarea name="content" id="content"
class="form-control"
placeholder="Your message" cols="60" rows="6"> </textarea>
</div>
<div class="col-md-6 col-sm-6">
<div class="col-md-6 col-sm-6">
<span id="content-info" class="info"></span>
<input type="text" name="captcha" id="captcha"
placeholder="Captcha" class="form-control">
</div>
<div class="col-md-6 col-sm-6 capcha">
<img id="captcha_code" src="captcha_code.php" />
</div>

</div>
<div class="col-md-6 col-sm-6">
<button name="submit"
class="border-button" onClick="sendContact();">Send</button>
</div>
</div>
</div>

Answer

You are to clear the fields thru JavaScript. I see you are using jQuery so you can do:

    $("#userName, #userEmail").val("")

In your function would be:

//..Ajax function
success: function(data) {
    $(".mail-status").html(data);
    $("#userName, #userEmail").val("")
  },

And so forth.

I suggest using a FORM tag and you can easily reset it by doing:

$('#myformid')[0].reset();
Comments