javascript - php-ajax : how to use two submit button on form every one work for different purpose

Question

在发布这个问题之前，我检查了下面的链接。 How do I use two submit buttons, and differentiate between which one was used to submit the form?

Two submit buttons in one form

但我仍然面临问题。下面是代码。html代码

<form name="posting" id="posting" method="post" action="posting_bk.php" role="form">
    <input class="btn btn-home" type="submit" name="publish" id="publish" alt="Publish" value="Preview and Post" />
    <input class="btn btn-home" type="submit" name="save" id="save" onclick="return confirm('Are you sure you want to Submit.')" alt="Save" value="Save as Draft" /></center>
</form>

这是 posting_bk.php 上的 php 代码

    if (isset($_POST['publish'])) {
        # Publish-button was clicked
array_push($res['errors'], 'Publish button');
    echo json_encode($res);
    }
    elseif (isset($_POST['save'])) {
      # Save-button was clicked
array_push($res['errors'], 'Save button.');
    echo json_encode($res);
    }

问题是我没有得到任何输出。我应该得到测试发布或测试保存。

我打算使用 ajax，下面是我为 ajax 编写的代码。

<script type="text/javascript">
    $('document').ready(function() {
        $("#posting").on("submit", function(e) {
            e.preventDefault;
            var btn = $('#publish');

            $.ajax({
                type: 'post',
                url: $('form#posting').attr('action'),
                cache: false,
                dataType: 'json',
                data: $('form#posting').serialize(),
                beforeSend: function() {
                    $("#validation-errors").hide().empty();
                },
                success: function(data) {
                    if (data.success == false) {
                        var arr = data.errors;
                        $.each(arr, function(index, value) {
                            if (value.length != 0) {
                                $("#validation-errors").append('<div class="alert alert-danger"><strong>' + value + '</strong><div>');


                            }
                        });
                        $("#validation-errors").show();
                        btn.button('reset');
                    } else {
                        $("#success").html('<div class="alert alert-success">Basic details saved successfully. <br> If you want to edit then please goto <a href="edit.php">Edit</a>. <div>');
                        $('#title').val('');

                    }
                },
                error: function(xhr, textStatus, thrownError) {
                    alert('Something went to wrong.Please Try again later...');

                    btn.button('reset');
                }
            });
            return false;
        });
    });
</script>

如果我没有使用 ajax，那么它工作正常。这似乎是 Ajax 的问题

Answer 1

我将点击提交，获取点击按钮的 ID 并将其传递给 php:

$('#posting input[type="submit"]').on("click", function(e) {                
                e.preventDefault;
                var btn = $('#publish');
                var el = $(this).attr('id');
                $.ajax({
                    type: 'post',
                    url:$('form#posting').attr('action'),
                    cache: false,
                    dataType: 'json',
                    data: {data:$('form#posting').serialize(),action:el},
                    beforeSend: function() { 
                        $("#validation-errors").hide().empty(); 
                    },
                    success: function(data) {
                        if(data.success == false)
                            {
                                var arr = data.errors;
                                $.each(arr, function(index, value)
                                {
                                    if (value.length != 0)
                                    {
                                        $("#validation-errors").append('<div class="alert alert-danger"><strong>'+ value +'</strong><div>');


                                    }
                                });
                                $("#validation-errors").show(); 
                                btn.button('reset');                            
                            } else {
                                $("#success").html('<div class="alert alert-success">Basic details saved successfully. <br> If you want to edit then please goto <a href="edit.php">Edit</a>. <div>');
                                $('#title').val('');

                            }
                    },
                    error: function(xhr, textStatus, thrownError) {
                        alert('Something went to wrong.Please Try again later...');

                        btn.button('reset');
                    }
                });             
                return false;
            });
        });

PHP:

    if ($_POST['action'] == 'publish') {
            # Publish-button was clicked
echo 'test publish';
        }
        elseif ($_POST['action'] == 'save') {
            # Save-button was clicked
echo 'test save';
    }