AJAX/JSON functionality for Newsletter Subscription Form

Question

Okay so we have Newsletter subscription form where we would like to implement this functionality using steps shown here - http://demo.businesscatalyst.com/json-form.
We used following code and it didn't work:
<script type="text/javascript">
                            function jqsub() {
                            var $f = $('#newsletter_signup');
                            var $m = $('#newsletter_form_result');
                            $f.find('.btn').prepend('<i class="icon-spinner icon-spin"></i>').addClass('disabled').attr('disabled', 'disabled');
                            $.ajax({
                              type: 'POST',
                              url: $f.attr('action') + '&amp;JSON=1',
                              data: $f.serialize(),
                              success: function(msg) {
                                var formResponse = eval(msg);
                                    if (formResponse.FormProcessV2Response.success) {
                                            $f.fadeOut(function(){ //Hide the form
                                                    $m.addClass('success').fadeIn().html("<p>Thank you for signing up to receive updates and offers.</p>");
                                error: function(msg) {
                                alert('error'+msg);
                                return false;
                            </script>
Then we noticed that user gets automated message and also we can see admin area that he has subscribed to newsletter, that means although there is no movement on the page, form gets submitted. That means the "if" argument is not working. That leads us to the question what would form newsletter subscription return upon submission - would it retuern "FormProcessV2Response"? Then we took off  "var formResponse = eval(msg);  if (formResponse.FormProcessV2Response.success)" and modified code as below.
<script type="text/javascript">
                            function jqsub() {
                            var $f = $('#newsletter_signup');
                            var $m = $('#newsletter_form_result');
                            $f.find('.btn').prepend('<i class="icon-spinner icon-spin"></i>').addClass('disabled').attr('disabled', 'disabled');
                            $.ajax({
                              type: 'POST',
                              url: $f.attr('action') + '&amp;JSON=1',
                              data: $f.serialize(),
                              success: function(msg) {
                                            $f.fadeOut(function(){ //Hide the form
                                                    $m.addClass('success').fadeIn().html("<p>Thank you for signing up to receive updates and offers.</p>");
                                error: function(msg) {
                                alert('error'+msg);
                                return false;
                            </script>
This code worked in terms of triggering fadding in and out animations, but now our concern is if this is a right way of tackling this issue. Would it be processed correctly when any error occured? Should we have any if argument similar to what we had in previous code?
If someone can guide us on this one, then it would be really great.
Thanks

Answer 1

Dear vora,
Its very simple, matter of adding simpel jQuery related code. I mean something like Ajax submitting form without page refresh and getting JSON response back.
For instance have a look over this example..
http://www.java4s.com/jquery-tutorials/submit-form-without-refreshing-page-in-javajsp-with -jquery/
Even the newsletter they are using is based on jQuery/JSON, in fact they applied through PHP, however you can use in any technology.
Regards