Two submit buttons in one form with different actions

Question

I have a page to edit the page includes a form with two buttons (OK and Delete). I send the form via PHP SELF. At the top of the page there are two functions that test what was received in POST, if received OK, do so, and if DELETE, to do otherwise. Pressing the DELETE button, I'm bouncing CONFIRMATION message, and this problem. If a user clicked OK in CONFIRMATION window, I try to submit a form with function Jquery, and it does not work.

    <?
     if(isset($_POST["delete_page"])){
       echo "DELETE PAGE";
     }
     if(isset($_POST["submit"])){
       echo "SUBMIT PAGE";
     }
    ?>


 <form role="form" data-toggle="validator" method="post" action="<?echo "$_SERVER[REQUEST_URI]";?>" id="update_page_frm">
    <button type="submit" class="btn btn-success" name="submit">אישור</button>
    <button type="button" class="btn btn-danger" name="delete_page" id="delete_page">הסר עמוד</button>
</form>

custom.js:

$(document).ready(function() {
$('#delete_page').click(function() {
bootbox.confirm("Are you sure want to delete?", function(result) {
    if (result) {
        $("#update_page_frm").submit();
    }

     });
   });
 });

Answer 1

It is fairly common to have multiple actions associated with a single form. The more flexible approach is to not use the native submit type button and instead handle both actions with AJAX requests. For example:

function callAction(action, callback) {
     $.ajax({
         url: '/path/to/submit/to',
         data: {
              action: action,
              form: $('#update_page_frm').serialize()
         },
         success: function(response) {
             callback(response);
         }
    });
};

$('#update_page').on('click', function(e) {
    e.preventDefault();
    callAction('update', function(response) {
         console.log('All done!');
    });
});

$('#delete_page').on('click', function(e) {
    e.preventDefault();
    callAction('delete', function(response) {
         console.log('All done!');
    });
});

Note that the above code was written on the fly here on SO and is untested. Should be fairly close though.

Answer 2

Its probably an issue with the quotes,Your code is not opening/closing quotes correctly.Try this way:

<form role="form" data-toggle="validator" method="post" action="<?php echo $_SERVER['REQUEST_URI']; ?>" id="update_page_frm" >
    <button type="submit" class="btn btn-success" name="submit">אישור</button>
    <button type="button" class="btn btn-danger" name="delete_page" id="delete_page">הסר עמוד</button>
</form>

Answer 3

You must to use ajax when use a jquery to call a file

$("#delete_page").click(function(){

data1=$("#input").val();

$.ajax({
        type:"post",
        url:"file.php",
        data:"data1="+data1,
        beforeSend: function(){
                        $('#msj').html('<img src="img/Loading.gif"/> Loading...');                          
                    },
        success:function(result){

                alert(result);
                $("#msj").html('');

        }
     });
 });