Replace HTML form on submit with jQuery

Question

So here's what I'm trying to do: in my webpage, I have a lot of HTML forms. If any individual form is submitted, I want the entire form to be replaced with something. However, I haven't been able to do this.

Below is my JavaScript code:

$("#commentreply").each(function() {
    var replace = false;
    $(this).submit(function() {
        // http://stackoverflow.com/q/16323360/1222411
        event.preventDefault();

        var url = $(this).attr('action');
        var nameValue = $(this).find('input[name="name"]').val();
        var commentValue = $('#commentEntry').val();
        var projectValue = $(this).find('input[name="project"]').val();
        var idValue = $(this).find('input[name="id"]').val();
        var posting = $.post(url, {
            project : projectValue,
            id : idValue,
            name : nameValue,
            comment : commentValue
        });

        posting.done(function(data) {
            $(this).replaceWith("(HTML content to replace form)");
        }).error(function(){
            alert("An error occurred. Be sure you entered a name and comment and try again");
        });
    });
});

The idea is that the following HTML code:

<form id="commentreply" name="reply" action="/lib/comments/addComment.php" method="post">
    <input type="hidden" name="project" value="project">
    <input type="hidden" name="id" value="-1">
    Name:<input type="text" id="nameEntry" name="name" size="100"><br>
    Comment:<br><textarea id="commentEntry" name="comment" size="255">
        Enter comment here</textarea><br>
    <input type="submit" value="Submit">
</form>

Will become this when the submit button is hit:

(HTML content to replace form)

Any advice? Would it be better to attach JavaScript to each form rather than use .each() to deal with addressing each form?

Solution 1

The code looks about right, assuming $("#commentreply").each(function() is temporary and you're going to select more than one form instead.

But currently the form is posting because

$(this).submit(function() {
    event.preventDefault();

you're not preventing anything.

$(this).submit(function(event) { // <-- You need to declare event
    event.preventDefault();

To answer your second question, if you can use each, use each rather than duplicate code.

Also, if there are many forms, you shouldn't bind the event until the user uses the form saves, slowing down your page.

Re the error Uncaught TypeError: Cannot call method "createDocumentFragment"

Without checking, this might be because of this:

posting.done(function(data) {
    $(this).replaceWith("(HTML content to replace form)");
}).error(function(){

$(this) is now posting, not the form.

Insert after this line

$("#commentreply").each(function() {
    var $form = $(this);

and replace

$(this).replaceWith("(HTML content to replace form)");

with

$form.replaceWith("<div>(HTML content to replace form)</div>");

making it an HTML element not just a string.

Solution 2

I would use another approach:

When submit triggers → replace the parent form:

$('form').submit(function(event){

    event.preventDefault();
    /* Fire your validation and $.post */

    $(this).replaceWith("<div>new HTML content to replace with</div>");
});

And you can even animate it:

$('form').submit(function(event){

    event.preventDefault();
    /* Fire your validation and $.post */

    $(this).slideUp(function(){
        $(this).replaceWith(
            $("<div style='display:none'>new HTML content to replace with</div>").slideDown()
        );
    });
});

It is not tested.