如何使用jQuery/Ajax响应特定的提交按钮

How to response specific submit button using jQuery/Ajax?

本文关键字：提交 按钮 响应 何使用 jQuery Ajax      更新时间：2023-09-26

我有一个网页，其中有4个提交按钮。这4个提交按钮正在使用jQuery/Ajax调用相同的php页面process.php。我使用onClick事件调用这个php页面。如下所示：

<div class="col-md-12">
    <input type="hidden" name="_token" value="<?php echo $create_menu_token; ?>">
    <a onclick="menu_creation(this,event);" href="#menudetails" data-toggle="tab" class="btn btn-booking next">NEXT STEP</a>
</div>
<div class="col-md-12">
    <input type="hidden" name="_token" value="<?php echo $create_menu_token; ?>">
    <a class="btn btn-booking btn-save-color back">BACK</a>                         
    <a onclick="menu_creation(this,event);" href="#uploadimage" data-toggle="tab" class="btn btn-booking next">NEXT STEP</a>
</div>
<div class="col-md-12">
    <input type="hidden" name="_token" value="<?php echo $create_menu_token; ?>">
    <a class="btn btn-booking btn-save-color back">BACK</a>
    <a  onclick="menu_creation(this,event);"  href="#date" data-toggle="tab" class="btn btn-booking next">NEXT STEP</a>
</div>
<div class="col-md-12">
    <input type="hidden" name="_token" value="<?php echo "?key=".$create_menu_token; ?>">
    <input type="hidden" name="chef_id" value="<?php echo $chef_id; ?>">
    <a class="btn btn-booking btn-save-color back">BACK</a>                     
    <a href="#" data-toggle="tab" class="btn btn-booking btn-save-color">PREVIEW MENU</a>
    <input type="submit" name="submit" value="FINISH" onclick="menu_creation(this, event);" class="btn btn-booking">
</div>

我想在用户单击Finish button（最后一个）时显示不同的消息从php页面，我如何知道用户是否按下此Finish button？

JS代码：

function menu_creation (element,event){
    e= $(element);
    event.preventDefault();
    var formData = new FormData(e.parents('form')[0]);     
    $.ajax({
      url: <?php echo "'menu-creation?key=$create_menu_token'"; ?>,
      type: 'POST',
      xhr: function() {
        var myXhr = $.ajaxSettings.xhr();
        return myXhr;
      },
      beforeSend: function () {        
        $("#form-bottom").attr("disabled", true);        
      },
      success: function (data) {                          
        $('.menu-validation-message').html(data);          
        //$('.menu-validation-message').show().delay(3000).hide('slow');
      },          
      data: formData,
      cache: false,
      contentType: false,
      processData: false
  }); 
}

更新：

在php页面中，我现在使用以下代码来检查用户是否按下了FINISH按钮。

if(isset($_POST['submit']) && $_POST['submit'] == 'FINISH') {
    echo 'Hello Finish';
} else {
    echo 'Not detecting';
}

但没有检测到。。。

使用此示例作为参考。。。。

$( "#target" ).click(function() {
  alert( "Handler for .click() called." ); //do your code here
});

还有一件事，不要忘记在按钮上添加带有"target"的id

您可以使用Jquery来解决这个

首先，您需要为完成按钮指定id或class

在这种情况下，我将使用id

<input id="finish_button" type="submit" name="submit" value="FINISH" class="btn btn-bookingt">
function menu_creation (element,event){
      e= $(element);
      event.preventDefault();
      var formData = new FormData(e.parents('form')[0]);     
      $.ajax({
          url: <?php echo "'menu-creation?key=$create_menu_token'"; ?>,
          type: 'POST',
          xhr: function() {
          var myXhr = $.ajaxSettings.xhr();
          return myXhr;
      },
      beforeSend: function () {        
          $("#form-bottom").attr("disabled", true);        
      },
      success: function (data) {                          
      $('.menu-validation-message').html(data);          
          //$('.menu-validation-message').show().delay(3000).hide('slow');
      },          
      data: formData,
      cache: false,
      contentType: false,
      processData: false
  }); 
}
$("input#finish_button").click(function(e){
     alert("HELLO FINISH");
     menu_creation(this, e);
});
相关文章：