[Fixed]-Multiple forms in one page update concrete block?

by

1👍

It’s invalid to use the same ID for multiple DOM elements. Using the same class name is valid, but will update all matching DOM elements.

My suggestion, add a unique ID to each form and comment box. If you don’t want to duplicate your JS code, then add an identifier in the form that you can use to decide which comment box to update.

For example

<form id="task-comment-form-1" data-comment="task-comments-1">

Then in your JS, you could do this

$(document).ready(function() {
    $('.submit').on("click", function() {
        event.preventDefault();
        console.log(event.preventDefault());
        var form = $(this).closest('form');
        var commentBoxId = form.data('comment');
        var commentBox = $('#'+commentBoxId);
        $.ajax({
            url: form.attr("action"),
            data: form.serialize(),
            type: form.attr("method"),
            dataType: 'json',
            success: function (data) {
                if (data.form_is_valid) {
                    commentBox.html(data.html_task_comment);
                }
                else {
                    form.html(data.html_task_comment_form);
                }
            }
        });
        form[0].reset();
        return false;
    });
});
👤Nostalg.io

Leave a comment