How to response specific submit button using jQuery/Ajax?

Question

I have a web page where 4 submit button exist. These 4 submit button is calling same php page process.php using jQuery/Ajax. I am calling this php page using onClick event. Like following :

<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>

I want to show a different message when user click on Finish button (last one). From php page, How can I know If user press this Finish button ?

JS Code :

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
  }); 
}

Update :

In php page now I am using following code to check if user press the FINISH BUTTON or not .

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

But not detecting...

use ID of submit button with jquery to uniquely identify click... — Kunal, May 05 '16 at 09:55
All 4 submit button are same. If user click on `Next` button I am showing a message. BUT If user click on `Finish Button` I want to show different message in php page. — shibbir ahmed, May 05 '16 at 09:56
Try this: `var index = $(element).index(); var len = $('[onclick^="menu_creation"]').length; if (index == len) { alert('Last Item'); }` — Rayon, May 05 '16 at 10:00

Natsathorn · Answer 1 · 2016-05-05T10:28:31.347

0

You can use Jquery to solve this

First you need to specified id or class to your finish button

In this case, I will use 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);
});

edited May 05 '16 at 10:28

answered May 05 '16 at 09:57

Natsathorn

1,530
1
12
26

I want to know it from PHP page. – shibbir ahmed May 05 '16 at 10:02
May be. I need to pass any parameter to php page to identify finish button ! – shibbir ahmed May 05 '16 at 10:03
@shibbir ahmed you have to do Ajax send post parameter to a page. – Natsathorn May 05 '16 at 10:06
I am using onClick Event. How Can I do this ? Should I pass any parameter to last function call ? – shibbir ahmed May 05 '16 at 10:09
Yeah,I do onclick function like you do. but i'm wrote it in script tag. `this` = `element that was clicked` `e` = `event` It's same like you do. – Natsathorn May 05 '16 at 10:11
Your purpose is to show something after user click on finish button and send ajax to some php page right ? – Natsathorn May 05 '16 at 10:25
In SAME php page I want to show e.g "HELLO FINISH" message when user click on FINISH button . – shibbir ahmed May 05 '16 at 10:27
Did you try my code ? I already pass variable to `menu_creation()`. – Natsathorn May 05 '16 at 10:31
Do you understand my purpose ? – shibbir ahmed May 05 '16 at 10:32
I'm not good with English but i think you want to trigger message "Hello Finish" when user click on `finish button` then send ajax. – Natsathorn May 05 '16 at 10:33
I want to detect if user click on Finish button from php page not server side or html page. If I detect it from php page then I will do something – shibbir ahmed May 05 '16 at 10:34
You can pass some parameter to help you detect that user click on `finish button`. Then you do ajax. In php you do `if($_POST['somename']) echo "Hello Finish";` now you can detect when you user click – Natsathorn May 05 '16 at 10:42
can you do `console.log(formData);` to make sure your data is correct. and send it to me if possible – Natsathorn May 05 '16 at 11:11

Kunal · Answer 2 · 2016-05-05T10:04:59.307

0

Use this example as a reference....

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

AND one thing don't forget to add id having "target" on that button

edited May 05 '16 at 10:04

answered May 05 '16 at 10:02

Kunal

604
10
18

I want to know if Finish button is press FROM php page not html page. – shibbir ahmed May 05 '16 at 10:04
if you have used form and post properly you will get all the submitted data on submit click....print_r($_POST); – Kunal May 05 '16 at 10:11
Yes I can get all submit data from php page but I wrap the whole form in one . So when any button is submitted then I can get all post data. I need to specify If FINISH button is pressed or not – shibbir ahmed May 05 '16 at 10:14
i hope this answer may help you out... http://stackoverflow.com/a/11699545/3446440 @shibbirahmed – Kunal May 05 '16 at 10:22
Okey. It's a one kind of solution but for this I have to use 2 php page. – shibbir ahmed May 05 '16 at 10:25

How to response specific submit button using jQuery/Ajax?

2 Answers2