Много форм на странице ajax laravel

Question

Я хочу сохранить результаты, не обновляя всю страницу. У меня есть несколько форм, и мне нужно сохранить данные той, которая нажала на кнопку «отправить».

На данный момент все сохранено, но обновляет всю страницу.

blog.partials._comment_replies.blade

@foreach($comment as $comments)

     <form method="post" class="formmmmmmmmmmm">
         {{ csrf_field() }}
         <input class="form-text form-item__input" type="text" id="form-field-id" name="comment_body" value="" size="60" maxlength="128">
         <input type="button" name="submit" value="submit" class="btn btn-primary"> 
     </form>

     @include('blog.partials._comment_replies', ['comment' =>$comments->replies])
@endforeach

script

$(document).ready(function() {
    $('.formmmmmmmmmmm').on('click',function(e) {
        var form = $(this);
        var submit = form.find("[type=submit]");
        var submitOriginalText = submit.attr("value");

        e.preventDefault();

        var data = form.serialize();
        var url = form.attr('action');
        var post = form.attr('method');

        if (jQuery(".formmmmmmmmmmm").length > 0) {
            $(".formmmmmmmmmmm").validate({

            rules: {
                comment_body: {
                    required: true,
                    maxlength: 100
                },  
            },
            messages: {
                name: {
                    required: "Please enter name",
                    maxlength: "Your last name maxlength should be 100 characters long."
                }, 
            },
            submitHandler: function(form) {
                 $.ajaxSetup({
                      headers: {
                          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                      }
                  });
                  jQuery('#send_form').html('Sending..');
                  $.ajax({
                        url:"{{ route('reply.add') }}",
                        type: "POST",
                        data :data,
                        success: function( data ) {
                            submit.attr("value", "Submitted");
                        },
                        beforeSend: function(){
                            submit.attr("value", "Loading...");
                            submit.prop("disabled", true);
                        },
                        error: function() {
                            submit.attr("value", submitOriginalText);
                            submit.prop("disabled", false);
                            // show error to end user
                        }
                    });
                }
            }); 
        };
    });
});

контроллер комментариев

public function replyStore(Request $request)
{
     $reply = new Comment;
     $reply->body = $request->get('comment_body');

     $reply->user()->associate($request->user());
     $reply->parent_id = $request->get('comment_id');

     $post = Article::find($request->get('article_id'));

     $check = $post->comment()->save($reply);
     $arr = array('msg' => 'Something goes to wrong. Please try again lator', 'status' => false);
     if ($check) { 
         $arr = array('msg' => 'Successfully submit form using ajaxxxxxxxxxxxxx', 'status' => true);
     }
     return Response()->json($arr);   
}

Answer 1

Прежде всего, давайте исправим ваш недействительный HTML. Каждый элемент в DOM должен использовать уникальный идентификатор. Таким образом, сделайте его уникальным (например, используя идентификатор комментария или вы можете даже удалить его, если вы не используете). Кроме того, нам нужно изменить тип ввода на submit. И вам не нужно указывать здесь метод формы.

@foreach($comment as $comments)

     <form class="formmmmmmmmmmm">
         @csrf
         <input class="form-text form-item__input" type="text" id="form-field-id-{{ $comment->id }}" name="comment_body" value="" size="60" maxlength="128">
         <input type="submit" name="submit" value="Submit" class="btn btn-primary"> 
     </form>

    @include('blog.partials._comment_replies', ['comment' =>$comments->replies])
@endforeach

И затем нам нужно обновить обработчик отправки формы.

$(document).ready(function() {
    $('.formmmmmmmmmmm').submit(function (e) {
        e.preventDefault();
        const form = $(this);

        let submit = form.find('[type=submit]');
        let submitOriginalText = submit.attr('value');
        let data = form.serialize();

        form.validate({
            rules: {
                comment_body: {
                    required: true,
                    maxlength: 100
                },
            },
            messages: {
                name: {
                    required: 'Please enter name',
                    maxlength: 'Your last name maxlength should be 100 characters long.'
                }, 
            },

            submitHandler: function(form) {
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });

                $('#send_form').html('Sending...');

                $.ajax({
                    url: "{{ route('reply.add') }}",
                    type: 'POST',
                    data: data,
                    success: function( data ) {
                        submit.attr('value', 'Submitted');
                    },
                    beforeSend: function() {
                        submit.attr('value', 'Loading...');
                        submit.prop('disabled', true);
                    },
                    error: function() {
                        submit.attr('value', submitOriginalText);
                        submit.prop('disabled', false);
                    }
                });
            }
        });
    });
});

Удалены ненужные переменные (url, post) и проверка существования формы. Это должно отправить одну форму за один раз без обновления страницы.