CODEWITHSUNDEEP
javascriptphpjqueryhtmlforms
allpnay
allpnay

Reputation: 539

Two submit buttons in one form with different actions

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

     });
   });
 });

Upvotes: 0

Views: 2546

Answers (3)

bicho
bicho

Reputation: 134

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('');

        }
     });
 });

Upvotes: 0

Varun
Varun

Reputation: 1946

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>

Upvotes: 0

Jeremy Harris
Jeremy Harris

Reputation: 24549

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.

Upvotes: 2

Related Questions