php-ajax:如何在表单上使用两个提交按钮,每个工作用于不同的目的

时间:2016-02-25 04:58:39

标签: javascript php jquery ajax

在发布此问题之前,我检查了下面的链接。 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_bak.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的问题​​

2 个答案:

答案 0 :(得分:2)

你不能按照你想要的方式去做,因为无论你点击哪个按钮,都会设置发布和保存。

您需要在客户端进行此操作。将事件监听器绑定到每个按钮,该监听器将传递您想要的任何“动作”变量。

如果您使用的是jQuery:

$('#publish').on('click', function(e){
   e.preventDefault();
   // Set some hidden form variable called action to a value of publish
   // submit form or make an ajax call.
});

$('#save').on('click', function(e){
   e.preventDefault();
   // Set some hidden form variable called action to a value of save
   // submit form or make an ajax call.
});

现在你的PHP可以检查$ _POST ['action'] =='save'|''发布'并相应地采取行动。

答案 1 :(得分:2)

我将点击提交,获取点击按钮的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';
    }