Добавление элементов в таблицу в jquery

Question

У меня есть поле ввода, которое я использую для добавления элементов в таблицу в БД.

Это выглядит так:

<td>
  <form class="insCat" action="#" name="insertCat">
    <input name="categorienaam" type="text"> 
    <input class="insert" type="submit" value="nieuwe categorie">
  </form>
</td>

И я справляюсь с этим в jquery

jQuery(".insert").click(function(){

  str = jQuery("form.insCat").serialize();
  console.log(str);

  jQuery.ajax({
    type: "POST",
    data: str + "&cmd=insert",
    url: "ajax_handler.php",
    success: function(msg){}
  });

  jQuery("div.result").empty();

}); 

Но я ничего не вижу в своем журнале, так как страница обновляется после каждой вставки. Который я не хочу.

Есть ли способы обойти это?

Answer 1

Необходимо запретить событие по умолчанию для кнопки отправки:

    jQuery(".insert").click(function(e){
            e.preventDefault();

            ...your code...    

            return false;
    });

Answer 2

Вы присоединяете обработчик события к кнопке отправки и не останавливаете выполнение события по умолчанию. Таким образом, JS запускается, а затем форма отправляется как обычно.

Во-первых, установите более разумное действие, чем "#" (ссылка на верхнюю часть страницы), если форма отправляется без JS.

Затем прикрепите событие к форме, а не к кнопке. Таким образом, если он будет отправлен другим способом (например, нажатием клавиши ввода при вводе текста), он все равно будет работать.

jQuery("form.insCat").bind("submit", yourFunction);

Затем отредактируйте свою функцию, чтобы она прекратила действие события по умолчанию.

var yourFunction = function(event){
  // do whatever you like then...
  event.preventDefault();
};