Отправить форму с несколькими кнопками, используя ajax

Question

У меня есть форма, которая имеет несколько кнопок для различных действий. У меня есть странная проблема, jquery onClick не срабатывает при нажатии кнопки. Отсюда и проблема. Это может быть простое решение, но, к сожалению, я новичок в материалах переднего конца, и ни один из вопросов о переполнении стека, казалось, ничем не помог. Ниже HTML:

<form id="create" action="/service/create" method="POST" style="margin: 0 0 0 0;"> 
<div class="col-sm-7 "> 
//Skipping to buttons directly 

<button type=submit class="btn btn-default" id="save">Save</button> 
<button type="submit" class="btn btn-default" id="preview">Preview</button> 
<button type="submit" class="btn btn-default" id="delete">Delete</button> 
</div> 
</form> 

Ниже приведен Jquery код

$(document).ready(function(){ 
    'use strict'; 
    $("#create").on('click', '#save', function (e) { 

     alert('Save Message'); 
     e.preventDefault(); 

      $.ajax({ 
       url: ADD_ENDPOINT, 
       data: {'form': $("create").serialize()}, 
       type: 'POST' 
      }); 
    }); 

    $(document).ajaxError(function(event, jqxhr, settings, thrownError) { 
     alert("ERROR: "+thrownError); 
    }); 

    function isErrorOccurred(data){ 
     if(data.indexOf("ERROR")>=0){ 
      alert(data); 
      return true; 
     } 
     else{ 
      return false; 
     } 
    } 
}); 

Многие из вас указывали, JQuery не загружается на моей странице, вот список всех CSS/JS включен в моем HTML, это выглядит нормально, или я что-то отсутствует

<link rel="stylesheet" href="../css/global-style.css"> 
<link rel="stylesheet" href="../css/create.css"> 
<link rel="stylesheet" href="../bootstrap/css/bootstrap.css" /> 
<link rel="stylesheet" href="../bootstrap/css/bootstrap-fileupload.css" /> 
<link rel="stylesheet" href="../bootstrap/css/datepicker.min.css" /> 
<link rel="stylesheet" href="../css/smoothness/jquery-ui-1.11.4.css" type="text/css"> 
<script src="../jquery/jquery-1.8.3.js" type="text/javascript"></script> 
<script src="../bootstrap/js/bootstrap.js" type="text/javascript"></script> 
<script src="../bootstrap/js/bootstrap-fileupload.js" type="text/javascript"></script> 
<script src="../bootstrap/js/bootstrap-datepicker.js" type="text/javascript"></script> 
<script src="../jquery/jquery-ui-1.11.4.js" type="text/javascript"></script> 
<script src="../jquery/plugin/jquery.cookie.js" type="text/javascript"></script> 
<script src="../js/util.js"></script> 
<script src="../js/create.js" type="text/javascript"></script> 

Answer 1

клик стреляют, но форма просто взять на свое нормальное действие и перейдя на страницу определенной в «акте ион». Удалите «type = submit» из кнопок, а затем вы можете обработать представление через jquery, щелкнув по кнопкам, используя $ («# create»). Serialize(); для получения данных.

EDIT

Scratch that! Ваш код в порядке, см. Эту скрипку. Его, вероятно, ошибка JQuery или ADD_ENDPOINT нигде не определено

https://jsfiddle.net/ay6494zv/

$(document).ready(function(){ 
    'use strict'; 
    $("#create").on('click', '#save', function (e) { 

     alert('Save Message'); 
     e.preventDefault(); 

      $.ajax({ 
       url: ADD_ENDPOINT, 
       data: {'form': $("create").serialize()}, 
       type: 'POST' 
      }); 
}); 
$(document).ajaxError(function(event, jqxhr, settings, thrownError) { 

     alert("ERROR: "+thrownError); 
    }); 

    function isErrorOccurred(data){ 
     if(data.indexOf("ERROR")>=0){ 
      alert(data); 
      return true; 
     } 
     else{ 
      return false; 
     } 
    } 

}); 

Answer 2

type="button" вместо type="submit" может быть все, что вам нужно, чтобы исправить это, с существующей Jquery «нажмите кнопку» обработчик.

Answer 3

EDIT: Похоже, что у вас были закрывающие теги: этот JSFiddle имеет ваш точный код, и он работает правильно: https://jsfiddle.net/zezpeyxk/1/. Я думаю, вы можете просто не включать jQuery на свою страницу. Я бы поднял консоль веб-разработчиков и проверил любые ошибки, такие как $ is not defined.

Единственное неправильный в том, что у вас есть небольшая ошибка упущения в коде - добавить в некоторых закрывающих тегах к вашей .on('click') функции, и вы должны быть хорошо идти:

$("#create").on('click', '#save', function (e) { 
    alert('Save Message'); 
    e.preventDefault(); 

    $.ajax({ 
     url: ADD_ENDPOINT, 
     data: {'form': $("create").serialize()}, 
     type: 'POST' 
    }); 
}); 

Проверьте это здесь: https://jsfiddle.net/zezpeyxk/