0

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} 

0
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>');

} 
2
  • awesome dude, appreciate the help this evening, had a look at the midwestern site that is linked to your profile, really nice job! – Sam Crowe Mar 29 '14 at 21:17
  • Appreciate that, let me know if you ever need help in the future. @mattsidjohn – mattsidjohn Mar 29 '14 at 23:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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