Question

我有一个包含多个元素和两个提交按钮的表单：SAVE和DELETE。当提交表单时，通过jQuery ajax，我需要知道用户是否点击了DELETE以便我可以相应地执行代码。问题是jQuery没有发送提交名称和值。所以，我已经在这里阅读并找到了理想的解决方法：使用SAVE输入和DELETE按钮。使用DELETE按钮，我可以发送带有按钮名称和值的表单，因此执行删除代码。问题是我试图将各个部分捆绑在一起但没有成功。这是我的代码：

HTML：

<form id="f-release" method="post" action="includes/submit_release.php">
    <fieldset>
        <input name="save" type="submit" value="save">
        <button name="delete" type="button" value="delete" onClick="return confirm('Do you really wish to permanently delete the record?')">Delete</button>
    </fieldset>
</form>

AJAX：

$("form button[name=delete]").click(function() {
    var formData = $(this).closest('form').serializeArray();
    formData.push({name: this.name, value:this.value });
});

$('form#f-release').submit(function(event) {
    event.preventDefault();

    var form = $(this);

    $.ajax({
        type: form.attr('method'),
        url: form.attr('action'),
        data: form.serialize(),
        dataType: "json"
    }).done(function(data) {

        alert('done');  

    }).fail(function(data) {

        alert('error!');

    });
});

PHP：

if (isset($_POST['releaseid']) && is_numeric($_POST['releaseid'])) {

    // save

} elseif (...delete...) {

    //delete

}

当我点击删除时，如何使用删除按钮的名称和值提交表单，以便我可以正确执行php DELETE代码？

Answer 1

您可以考虑一些选项：

通常你不使用POST方法删除记录，你应该使用DELETE方法。然后在你的PHP代码中，根据http方法决定服务应该做什么。（我不熟悉php，但我相信这是可能的，请看这篇文章Detecting request type in PHP (GET, POST, PUT or DELETE)）
如果你真的必须使用POST方法删除，那么你可以有一个隐藏的输入：

＆lt; input type =“hidden”name =“method”value =“submit”＆gt;

然后当用户点击删除按钮时，将其值设置为“删除”，当用户单击提交按钮时，将其值设置为“提交”（或保持不变，因为我将其默认值设置为“提交”）。这样做应该让你的PHP代码能够根据$ _POST ['method']

Answer 2

你可以保留删除和提交作为输入或按钮，它并没有真正有所作为。但它们可以是相同的元素。

有几种方法可以解决这个问题：

**为delete和submit元素创建ID。

**然后创建内嵌点击处理程序，如下所示：

<button id="save" onClick="reply_click(this.id)">Save</button>
<button id="delete" onClick="reply_click(this.id)">Delete</button>

<script type="text/javascript">
function reply_click(clicked_id)
{
    // whatever code here...
    // clicked_id will refer to the ID that was clicked
    console.log(clicked_id); // try this
}
</script>

或者，如果您更喜欢采用更清晰的方法分离关注点，并且不处理HTML中的行为，您可以尝试这样的事情：

**为delete和submit元素创建ID。

**然后循环遍历每个匹配元素并附加一个事件处理程序，该处理程序将在单击时返回特定ID。看起来像这样：

var element = document.querySelectorAll('button');
            var elementLength = element.length;
            for(var i = 0; i < elementLength; i++){
                element[i].addEventListener('click', function(){
                    console.log(this.id);
                });
            }

如果您想坚持使用jQuery ：

**为delete和submit元素创建ID。

**然后你可以这样做：

$('button').click( function (event) {
    var currentId = event.target.id;
    // do stuff with currentId
 });

[注意：此答案解决了检测点击事件的来源，但没有具体说明您的AJAX调用的工作方式。我知道这可以解决您的问题。]

jQuery：ajax，单击提交按钮

2 个答案: