Maximum Call Stack Size Exceeded At HTMLFormElement.toString Using Modal Form Ajax

Question

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()

Baca Juga

$('#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);
      }
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<a class="btn btn-primary" data-target="#modal-review" data-toggle="modal">
    <i class="fa fa-edit"></i> Write a review
</a>

<div class="modal  fade" id="modal-review" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> &times;</button>
                <h3 class="modal-title-site text-center">PRODUCT REVIEW </h3>
            </div>
            <div class="modal-body">
                <h3 class="reviewtitle uppercase">Product: {{ $product->Name }}</h3>

                <form id="review-form" method="post" action="{{ route('add-review') }}">
                    {{ csrf_field() }}

                    <div class="form-group">
                        <label for="review-name">Name</label>
                        <input type="text" class="form-control" id="review-name" required>
                    </div>
                    <div class="form-group">
                        <label for="review-email">Email</label>
                        <input type="text" class="form-control" id="review-email" required>
                    </div>
                    <div class="form-group ">
                        <label for="review-title">Title: (optional)</label>
                        <input type="text" class="form-control" id="review-title" required>
                    </div>
                    <div class="form-group ">
                        <label for="review-comment">Review</label>
                        <textarea class="form-control" rows="3" id="review-comment" required></textarea>
                    </div>
                    <button type="button" id="send-review" class="btn btn-primary">Send review</button>
                    <div id="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);                    
            }
        }
    });

Html5 Coding

Maximum Call Stack Size Exceeded At HTMLFormElement.toString Using Modal Form Ajax

Solution 1:

Solution 2:

Post a Comment for "Maximum Call Stack Size Exceeded At HTMLFormElement.toString Using Modal Form Ajax"