Magento – How to display success message after ajax form summit

ajaxformsmagento-1.9

I've been working on this code I found somewhere. I use it to submit the Send to Friend form from a popup. It works but I can't get it to display the success message after it submits the form. Right now after it submits the form it just disappears. Maybe someone good at ajax can see what's the matter with it. Thanks

<script type="text/javascript">
    //<![CDATA[
        var formId = 'product_sendtofriend_form';
        var sendfriendForm = new VarienForm(formId, false);
        var postUrl = '<?php echo $this->getSendUrl() ?>';
        function doAjax() {
            if (sendfriendForm.validator.validate()) {
                new Ajax.Updater(
                    { success:'formSuccess' }, postUrl, {
                        method:'post',
                        asynchronous:true,
                        evalScripts:false,
                        onComplete:function(request, json) {
                            Element.hide(formId);
                            Element.show('formSuccess');
                        },
                        onLoading:function(request, json){
                            Element.show('formLoader');
                        },
                        parameters: $(formId).serialize(true),
                    }
                );
            }
        }

        new Event.observe(formId, 'submit', function(e){
            e.stop();
            doAjax();
        });
    //]]>
    </script>

Best Answer

Thanks to you pointing me in the right place to look I figured out something that worked. I changed Element.show('formSuccess'); to Element.show('formSuccess2'); and added the div like this <div id="formSuccess2" style="display:none">hello</div> 

<script type="text/javascript">
//<![CDATA[
    var formId = 'product_sendtofriend_form';
    var sendfriendForm = new VarienForm(formId, false);
    var postUrl = '<?php echo $this->getSendUrl() ?>';
    function doAjax() {
        if (sendfriendForm.validator.validate()) {
            new Ajax.Updater(
                { success:'formSuccess' }, postUrl, {
                    method:'post',
                    asynchronous:true,
                    evalScripts:false,
                    onComplete:function(request, json) {
                        Element.hide(formId);
                        Element.show('formSuccess2');
                    },
                    onLoading:function(request, json){
                        Element.show('formLoader');
                    },
                    parameters: $(formId).serialize(true),
                }
            );
        }
    }

    new Event.observe(formId, 'submit', function(e){
        e.stop();
        doAjax();
    });
//]]>
</script>
Related Topic