I have a popup form which is called using:
$(function() {
$('#add-company').click(function() {
$('#contactForm').fadeToggle();
})
});
I then submit the form via Ajax using:
jQuery(document).ready(function () {
$("#sbmt").click(function(e) {
e.preventDefault();
e.stopPropagation();
var one = document.getElementById("one").value;
var two = document.getElementById("two").value;
var DataForm = 'one1=' + one + '&two1=' + two;
if (one == '' || two == '') {
alert("Please Fill All Fields");
}
else {
// AJAX code to submit form.
jQuery.ajax({
type: "POST",
url: '/ajax.php',
data: DataForm,
dataType:"json",
success:function() {
$('#company-form').each(function(){
this.reset(); //Here form fields will be cleared.
});
},
complete: function(){
$('#contactForm3').fadeToggle();
}
});
return false;
}
});
});
I am looking to have the form close when the data has been updated, as you can see, I have added:
complete: function(){
$('#contactForm3').fadeToggle();
}
but no joy.
Which works fine for most fields but there are a couple of dropdown <select> fields which this does not clear so If I open the form again, the fields remain populated.
Form code incase needed
<div id="contactForm3">
<h1>Form</h1>
<form action="" method="POST" name="company-form" id="company-form">
<span>
<label>One</label>
<input id="one" name="one" placeholder="one" type="text" required />
</span>
<span>
<select id="two" name="two" class="limitedNumbChosen" multiple="false">
<option value="Y">Yes</option>
<option value="N">No</option>
</select>
<input id="sbmit" class="formBtn" type="submit" />
<input class="formBtn" type="reset" />
</span>
</form>
</div>
UPDATE
If I use
success: function() {
alert('Message sent');
},
complete: function(){
$('#dataForm3').each(function(){
this.reset(); //Here form fields will be cleared.
});
}
This clears the form which I suppose is a start...
I have tried using this.fadetoggle(); but is not an accepted function... I use the recent version of jQuery and it works to open the form but not close it?