Handling two submit button on the same form

Question

I have two submit buttons on one form. I am using serialize method (so it will not refresh the page) to send the form data to php page. If the two buttons send data to one php page, how can I tell which part of the php script to be processed depending on the button that was pressed? Similar questions I saw on this site did not help me. My code is shown below.

HTML

<form id='form_id' action='my_page.php' method='post'>

   <input type='text' name='quest1' value='$question'>
   <input type='text' name='test1_id' value='$test_idq'>
   <input type='text' name='test_code1' value='$code'>
   <input type='text' name='class_name1' value='$class_name' >
   <input type='text' name='test_name1' value='$test_nameq'>

   <button  id='response' class='btn btn-danger'>Response</button>
   <button id='subm' class='btn btn-success''><b>Save</b></button>

  </form>

Javascript

//This script processes the button with the id=subm

$('body').on('click', '#subm', function(){
    $.post($("#form_id").attr("action"), $("#form_id").serialize(), function(info){ $("#msg").html(info); } );
    $("html, body").animate({ scrollTop: 0 }, "slow");
});
$('body').on('submit', '#form_id', function(event){
    return false;
$('#subm').click(function(){
})
});

//This script processes the button with the id=response

$('body').on('click', '#response', function(){
    $.post($("#form_id").attr("action"), $("#form_id").serialize(), function(info){ $("#msg").html(info); } );
    $("html, body").animate({ scrollTop: 0 }, "slow");
});
$('body').on('submit', '#form_id', function(event){
    return false;
$('#response').click(function(){
})
});

PHP

<?php
include("includes/db.php");
$questn1 = $_POST['quest1'];
$class1 = $_POST['class_name1'];
$test_id1 = $_POST['test1_id'];
$t_code1 = $_POST['test_code1'];
$t_name1 = $_POST['test_name1'];

//php code continues
}
?>

*"how can I tell which part of the php script to be processed depending on the button that was pressed?"* - you would use `isset()` with a conditional statement. — Funk Forty Niner, Oct 18 '17 at 13:56
Thanks @Fred, but that will refresh my page which I don't want. — Oponjous, Oct 18 '17 at 13:59
@Fred-ii- LUL that's what you get for being a smarta** to new coders. For the record I thought it was funny. — bassxzero, Oct 18 '17 at 14:03
@bassxzero sorry but I'm not quite grasping the "smarta\*\*" thing. I must be having a blond moment *lol* — Funk Forty Niner, Oct 18 '17 at 14:04

score 1 · Answer 1 · answered Oct 18 '17 at 14:04

1

You can give each input a different value:

<input type="submit" name="action" value="Update" />
<input type="submit" name="action" value="Delete" />

You can find the whole answer in this question: Two submit buttons in one form

answered Oct 18 '17 at 14:04

Mohamed ALi

13
6

Thanks @Mohamed, but I don't want page refresh that is why I am using jQuery and php to submit the form – Oponjous Oct 18 '17 at 16:12

score 0 · Answer 2 · answered Oct 18 '17 at 13:59

0

You can add a <input type='hidden' name='action' value='-'> And then in your button click function set the value of this hidden input before serializing the form values.

answered Oct 18 '17 at 13:59

teldri

316
1
6

score 0 · Answer 3 · answered Oct 18 '17 at 14:00

Set the value of a hidden input based on what submit button is pressed then process the form based on that input.

HTML

<input type='hidden' id="action" name='action' value=''>

   <button type="submit"  id='response' value="response" class='btn btn-danger'>Response</button>
   <button  type="submit" id='subm' value="subm" class='btn btn-success''><b>Save</b></button>

Javascript

$('body').on('click', '[type="submit"]', function(){
    $('#action').val($(this).val());
});

PHP

<?php
include("includes/db.php");


if($_POST['action'] == 'response' ){
    // do something
}
else if($_POST['action'] == 'subm' ){
    // do something else
}

could you please show me how to merge your javascript with mine, because I places yours before mine and it did not work. — Oponjous, Oct 20 '17 at 17:16

score 0 · Answer 4 · answered Oct 18 '17 at 14:04

You can do it in diferents way one is to make two php page scripts.
example: save.php

    <?php
include("includes/db.php");
$questn1 = $_POST['quest1'];
$class1 = $_POST['class_name1'];
$test_id1 = $_POST['test1_id'];
$t_code1 = $_POST['test_code1'];
$t_name1 = $_POST['test_name1'];

//php code continues
}
?>

response.php

       <?php
    include("includes/db.php");
    $questn1 = $_POST['quest1'];
    $class1 = $_POST['class_name1'];
    $test_id1 = $_POST['test1_id'];
    $t_code1 = $_POST['test_code1'];
    $t_name1 = $_POST['test_name1'];

    //php code continues
echo $response;
    }
    ?>

Javascript

//This script processes the button with the id=subm

$('body').on('click', '#subm', function(){
    $.post('save.php', $("#form_id").serialize(), function(info){ $("#msg").html(info); } );
    $("html, body").animate({ scrollTop: 0 }, "slow");
});
$('body').on('submit', '#form_id', function(event){
    return false;
$('#subm').click(function(){
})
});

//This script processes the button with the id=response

$('body').on('click', '#response', function(){
    $.post('response.php', $("#form_id").serialize(), function(info){ $("#msg").html(info); } );
    $("html, body").animate({ scrollTop: 0 }, "slow");
});
$('body').on('submit', '#form_id', function(event){
    return false;
$('#response').click(function(){
})
});

Note that the form has only one action attribute which tells which page that the form handling will take place.So how will I tell which php page to go when a button is clicked? — Oponjous, Oct 18 '17 at 15:34
$.post('response.php', $("#form_id").serialize(), function(info){ $("#msg").html(info); } ); the first params of this function means the url action just put the action there like in my example — Fermin Perdomo, Oct 18 '17 at 16:16
Thank you very much @Fermin. Your solution worked. I had to remove the action attribute from the form tag and it worked. — Oponjous, Oct 21 '17 at 15:32

Handling two submit button on the same form

4 Answers4