Maximum Call Stack Size Exceeded At Htmlformelement.tostring Using Modal Form Ajax

I want to submit a form using ajax request which is in a modal window. The modal is opened by clicking this link:

Solution 1:

Your issue is here:

....'review-comment':$('#review-comment')},

Change that to:

.....'review-comment': $('#review-comment').val()

$('#send-review').on('click', function (e) {
  e.preventDefault();
  var form = $('#review-form');
  $.ajax({
      url: form.attr('action'),
      type: 'POST',
      dataType: 'json',
      data: {
          'review-name': $('#review-name').val(),
          'review-email': $('#review-email').val(),
          'review-title': $('#review-title').val(),
          'review-comment': $('#review-comment').val()
      },
      success: function (response) {
          if (!response.error) {
              console.log(response.msg);
          } else {
              console.log(response.msg);
          }
      },
      error: function(response, textStatus, errorThrown) {
            $('#modal-review').modal('hide');
            console.log(response);
      }
  });
});

<linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><scriptsrc="https://code.jquery.com/jquery-2.1.1.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><aclass="btn btn-primary"data-target="#modal-review"data-toggle="modal"><iclass="fa fa-edit"></i> Write a review
</a><divclass="modal  fade"id="modal-review"tabindex="-1"role="dialog"><divclass="modal-dialog"><divclass="modal-content"><divclass="modal-header"><buttontype="button"class="close"data-dismiss="modal"aria-hidden="true">&times;</button><h3class="modal-title-site text-center">PRODUCT REVIEW </h3></div><divclass="modal-body"><h3class="reviewtitle uppercase">Product: {{ $product->Name }}</h3><formid="review-form"method="post"action="{{ route('add-review') }}">
                    {{ csrf_field() }}

                    <divclass="form-group"><labelfor="review-name">Name</label><inputtype="text"class="form-control"id="review-name"required></div><divclass="form-group"><labelfor="review-email">Email</label><inputtype="text"class="form-control"id="review-email"required></div><divclass="form-group "><labelfor="review-title">Title: (optional)</label><inputtype="text"class="form-control"id="review-title"required></div><divclass="form-group "><labelfor="review-comment">Review</label><textareaclass="form-control"rows="3"id="review-comment"required></textarea></div><buttontype="button"id="send-review"class="btn btn-primary">Send review</button><divid="review-response"></div></form></div></div></div></div>

Solution 2:

using names in form and the old form.serialize() works!

 $.ajax({
        url: form.attr('action'),
        type: 'POST',            
        data: form.serialize(),            
        success: function(response) {
            if(!response.error){
                console.log(response.msg);                    
            } else {
                console.log(response.msg);                    
            }
        }
    });

Share