javascript - Replace HTML form on submit with jQuery - Stack Overflow

admin管理员组

文章数量:1417363

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:

$("#mentreply").each(function() {
    var replace = false;
    $(this).submit(function() {
        // 
        event.preventDefault();

        var url = $(this).attr('action');
        var nameValue = $(this).find('input[name="name"]').val();
        var mentValue = $('#mentEntry').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,
            ment : mentValue
        });

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

The idea is that the following HTML code:

<form id="mentreply" name="reply" action="/lib/ments/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="mentEntry" name="ment" size="255">
        Enter ment here</textarea><br>
    <input type="submit" value="Submit">
</form>

Will bee 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?

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:

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

        var url = $(this).attr('action');
        var nameValue = $(this).find('input[name="name"]').val();
        var mentValue = $('#mentEntry').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,
            ment : mentValue
        });

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

The idea is that the following HTML code:

<form id="mentreply" name="reply" action="/lib/ments/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="mentEntry" name="ment" size="255">
        Enter ment here</textarea><br>
    <input type="submit" value="Submit">
</form>

Will bee 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?

• javascript
• php
• jquery
• html

Share Improve this question Follow edited Jul 19, 2020 at 11:16 Peter Mortensen 31.6k2222 gold badges110110 silver badges133133 bronze badges asked Oct 20, 2013 at 23:50 ScoWaltScoWalt 42133 gold badges88 silver badges1010 bronze badges 1

• 1 $("#mentreply").each(function()? There should be only one element with that id. $("#mentreply, #anotherform, #etc").each(function() yes. – Popnoodles Commented Oct 21, 2013 at 0:04

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

The code looks about right, assuming $("#mentreply").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

$("#mentreply").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.

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.

本文标签： javascriptReplace HTML form on submit with jQueryStack Overflow