Question

我有一个Jquery函数，我希望在表单提交时运行。以下是应该检测表单提交时的Jquery，阻止表单运行它的默认值，然后运行我的代码：

    $( ".submit-button" ).submit(function( event ){
         event.preventDefault();

        var button = $(this).attr("id");       

       var url = 'https://myurl.com/AddAppointment.php';
        $.ajax({
  type: "POST",
  url: url,
  data: $('#SchedulePosition').serialize(),
  success:function(){   
        if(button == 'SaveandReturn'){
            window.location.href = "Photography and Editing Jobs.html";
        }else if(button == 'SaveandView'){
            window.location.href = "Photography and Editing Jobs.html";
        }
    }

});


      });

以下是用于提交表单的提交按钮：

<input class="btn btn-primary submit-button" style="width:50%; height:60px; float:left; font-size:18px; white-space:normal;"
id="SaveandReturn" type="submit" value="Save and Return to Photoshoot List">


<input class="btn btn-primary submit-button" style="width:50%; height:60px; float:right; font-size:18px; white-space:normal;"
id="SaveandView" type="submit" value="Save and View My Photoshoots">

最后，这是我的表格标题：

<form id="SchedulePosition" action="#" method="POST">

每当我点击其中一个按钮时，页面就会刷新，这意味着代码没有运行，但我无法弄清楚它为什么不能运行。控制台中没有弹出错误，没有什么奇怪的事情发生，它只是没有触发Jquery。

Answer 1

$( ".submit-button" ).submit(...

按钮没有提交事件，但表单执行：

$( "#SchedulePosition" ).submit(...

Answer 2

包含在脚本顶部和

  <input onclick="myFunction()" class="btn btn-primary submit-button" style="width:50%; height:60px; float:left; font-size:18px; white-space:normal;"
id="SaveandReturn" type="submit" value="Save and Return to Photoshoot List">

  function myFunction() {
    your Login......
 }

Answer 3

除了David的回答，另一种选择是使用：

$( ".submit-button" ).click(function( event ){

因此，当单击按钮时，触发该功能。

请确保删除按钮上的type="submit"，以便在使用此功能时不会触发提交。

Jquery没有在表单提交上运行

3 个答案: