Luca Luca - 2 months ago 9
Ajax Question

Can't get confirmation from AJAX form submit

I'm starting to learn some jQuery, and I'm not very good at it at the moment. But I needed a way to submit a form in my website with no refresh. I found a popular example to submit a form with AJAX.

This is my form:

<form id="contact-form" action="envio.php" method="post" name="contact-form">

<label for="message" class="contact-form-label font-open italic small-size" id="lang13">
Message
</label>
<textarea class="text-big font-open regular medium-size" name="message"></textarea>

<input onclick="openSubmitPopup()" type="image" id="arrowsubmit" src="images/icons/Icons_navigation-07.png" name="submit">
</form>


And this is the jQuery code:

<script language="javascript">// <![CDATA[
$(document).ready(function() {
$('#contact-form').submit(function(ev) {
ev.preventDefault();

$.ajax({
type: 'POST',
url: 'envio.php', //$(this).attr('action')'',
data: $(this).serialize(),
success: function(data) {
}
});
ev.preventDefault();
return false;
});
})
// ]]></script>


This sends the form correctly. However, I don't know how to make a confirmation
<div>
to pop when it sends the form.

Answer

In your success callback function call the method to show pop up

<script language="javascript">// <![CDATA[
$(document).ready(function() {
    $('#contact-form').submit(function(ev) {
        ev.preventDefault();

        $.ajax({
            type: 'POST',
            url: 'envio.php', //$(this).attr('action')'',
            data: $(this).serialize(),
            success: function(data) {
               openSubmitPopup(); //Assume, the function to show pop up works perfectly :)
            }
        });    
        ev.preventDefault();
        return false;
    }); 
})
// ]]></script>