1

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>

2 Answers 2

0

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>
0

Change code

onComplete:function(request, json) {
                            Element.hide(formId);
                            Element.show('formSuccess');
                        }

to:

onComplete:function(request, json) {                            
                            $('formSuccess').show();
                        }
2
  • It works that way but not how it needs to work. If I put `<div id="formSuccess" style="display:none">hello</div>' it replaces the div with the whole products details page and tries to put that into the popup. I would like it to show "hello" or go get another html document. I've tried everything I can think of. Thanks
    – Freejoy
    Commented Apr 13, 2016 at 18:48
  • updated answer check it Commented Apr 13, 2016 at 20:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.