Question

I am a newbie at Javascript and Jquery. I have a form that I would like to submit and on submission it display a “Thank You!” message below the form. I have been able to get the form to submit into our database and display the thank you message. The only issue is that the thank you message displays regardless if the fields are filled out or not. I have tried Jquery’s .show() to show a hidden div with a thank you message and the replaceWith() way also. Any help would be nice. Thanks.

Here is the script:

<script type="text/javascript">
$(document).ready(function() {
    $("#My-Form").submit(function(event) {
        event.preventDefault();
        submitform();
    })

    $("#My-Form").validate({
        rules: {
            firstname: {
                required: true
            },
            lastname: {
                required: true
            },
            phone: {
                required: true
            },
            email: {
                required: true,
                email: true
            },
            address: {
                required: true
            },
            city: {
                required: true
            },
            state: {
                required: true
            },
            zip: {
                required: true,
                number: true
            }
        },
    });
});

function submitform() {
    $.post('URL', $("#My-Form").serialize(), returnResults, 'json');
    $("#MyForm").replaceWith("<p><h2>Thank You!</h2></p>");
}

function returnResults() {
    //SHOW THANK YOU MESSAGE
}
</script>

Answer 1

Just so i am getting you correctly. I think your saying the thank you message is displaying regardless of correct input. So to prevent that, look into the jquery.validate.js method of valid()

in your returnResults() method you could do this.

function returnResults() {
    if ($("#mobile-landing").valid()) {
        //show thank you
    }
}