Closing form Popup window on submit

Viewed 111

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?

0 Answers
Related