Форма (Ajax) Опубликовать внутри шаблона KendoUI

Question

Мне нужно создать пост формы (Ajax) внутри шаблона KendoUI, к сожалению, безуспешно.

<form id="commentSubmit">
  <div class="form-group">
   <textarea class="form-control k-textbox" name="body" id="bodyComment"></textarea>
   <input type="hidden" name="post_id" id="post_idComment" value="#= id #" />
  </div>
  <div class="form-group">
   <button class="k-button k-primary" type="submit">Add Comment</button>
  </div>
</form>

У нас есть скрипт для поста Ajax с id #commentSubmit, но он не работает.

$(document).ready(function() {
$('#commentSubmit').submit(function() {
$.ajax({
   url: "url.to.post",
   method: "POST",
   dataType: "json",
   data: {
   "body": $("#bodyComment").val(),
    "post_id" : $("#post_idComment").val()
   },
....

Мы нашли в интернете что-то вроде

<form action="http://url.to.post" data-ajax="true" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-update="\#template" id="form0" method="post"> 

Но он перенаправляет на URL, и мы этого не хотим.

Любой совет, пожалуйста?

Answer 1

Измените это:

1. id на class:

   <form class="commentSubmit">
   

2. Здесь также:

   $(document).on('submit', '.commentSubmit', function() {
   

3. Предотвращение отправки формы:

   $(document).on('submit', '.commentSubmit', function(e) {
       e.preventDefault();
   

Это должно сделать добавление любой формы добавленным с шаблоном с классом commentSubmit для перехвата и обработки с помощью ajaxrequest.

Совет: используйте jQuery's serialize, чтобы получить данные всей формы:

$.ajax({
    data: $(this).serialize() // Being 'this' the form when inside the 'submit' event

Answer 2

Попробуйте это:

<form method="post" id="commentSubmit" name="commentSubmit" action="#" autocomplete="off" enctype="multipart/form-data">
  <div class="form-group">
    <textarea class="form-control k-textbox" name="body" id="bodyComment"></textarea>
    <input type="hidden" name="post_id" id="post_idComment" value="#= id #" />
    <button type="submit" class="k-button k-primary" id="btnSubmit" form="commentSubmit">Add Comment</button>
  </div>
</form>                                             

$("#commentSubmit").submit(function (e) {
    e.preventDefault();
    $.ajax({
        url: "url.to.post",
        type: "POST",
        data: {
            "body": $("#bodyComment").val(),
            "post_id": $("#post_idComment").val()
        }
    });
}