Form Submission

Question

I am using malsup's form.js to help write an AJAX commenting feature for an application. The form.js is working for the contact form, although when I try to implement it for comments section the posts are successful, although the page always refreshes. Below is my script and EE tags, any feedback would be appreciated

---

// prepare the form when the DOM is ready 
$(document).ready(function() { 
    $('#output2').hide();
    var options = { 
        target:        '#output2',   // target element(s) to be updated with server response 
        success:       showResponse  // post-submit callback 
    }; 

    // bind to the form's submit event 
    $('#review_submit').submit(function(event) { 
        e.preventDefault();
        e.stopImmediatePropagation();
        $(this).ajaxSubmit(options); 
        return false; 
    }); 
}); 

function showResponse(responseText, statusText, xhr, $form)  { 

    $('#output2').show();
    $('#output2').fadeIn(300).append('<p>Thanks for your interest, we have emailed you an issue pack!</p>');
} 

---

{exp:comment:form form_id="review_submit" channel="accounts" entry_id="{entry_id}" dynamic="no" rating:enabled="yes" rating:allow_guests="yes" rating:allow_multiple="yes"} Name

                                                                    <div id="rating_it">
                                                                        <label>Rating</label>
                                                                        <select name="rating[default]">
                                                                            <option value="1">1</option>
                                                                            <option value="2">2</option>
                                                                            <option value="3">3</option>
                                                                            <option value="4">4</option>
                                                                            <option value="5">5</option>
                                                                        </select><br />
                                                                    </div>        
                                                                    <div class="review_text">
                                                                        <label>Review</label>
                                                                        <textarea id="mycomment" name="comment" cols="70" rows="2"></textarea> 
                                                                        <input type="submit" value="Submit Rating  &raquo;">
                                                                    </div>

                                                        {/exp:comment:form} 

---

Answer 1

Try this, and instead of hiding output2 after the dom has loaded add style="display:none;" to #output2 in the html.

$(document).ready(function() { 
    var options = { 
        target:        '#output2',   // target element(s) to be updated with server response 
        beforeSubmit:  showRequest,  // pre-submit callback 
        success:       showResponse  // post-submit callback 
    }; 

    // bind form using 'ajaxForm' 
    $('#review_submit').ajaxForm(options); 
}); 

// pre-submit callback 
function showRequest(formData, jqForm, options) { 
// Form validation stuff if you need it.
    return true; 
} 

function showResponse(responseText, statusText, xhr, $form)  { 

    $('#output2').show();
    $('#output2').fadeIn(300).append('<p>Thanks for your interest, we have emailed you an issue pack!</p>');

}