Question

我正在构建一个表单，允许某人通过Web GUI更改要在网页上使用的按钮颜色。它设置为通过ajax和jquery提交更改，以便在用户单击“保存提交”按钮之前进行预览，以便他们在保存之前确保他们喜欢这些更改。

我知道.serialize（）不会发送按钮点击的值，甚至不会告诉您单击了按钮。我用Google搜索并搜索了stackoverflow，但我不能让任何解决方案与我的设置一起工作。

PHP脚本如何判断是否单击了保存按钮？

HTML：

<div id="preview"></div>

<form id="build_form" class="build_form" action="button_preview.php" method="post">
    <input name="color" type="radio" value="red" /> red
    <input name="color" type="radio" value="blue" /> blue
    <input name="save" type="submit" value="Save" class="button" />
</form>

使用Javascript：

<script type="text/javascript">
$(document).ready(function() {
    $(function() {
        $(".build_form").change(function() {
            $("form").submit();
        });
    });

    $('#build_form').submit(function() {
        $.ajax({
            data: $(this).serialize(),
            type: $(this).attr('method'),
            url: $(this).attr('action'), 
            success: function(response) {
                $('#preview').html(response);
            }
        });
        return false;
    });
});
</script>

PHP：

<?php
    print_r($_POST);
?>

Answer 1

在表单上调用.submit()然后处理提交事件以停止默认提交并执行Ajax调用似乎过于复杂，即使它停止了“保存”按钮的工作。为什么不直接在更改事件中执行Ajax预览部分，并通过“保存”按钮（已经是提交按钮）自然地保留提交？完全删除提交处理程序。

$(function() {
    $("#build_form").change(function() {
        $.ajax({
            data: $(this).serialize(),
            type: $(this).attr('method'),
            url: $(this).attr('action'), 
            success: function(response) {
                $('#preview').html(response);
            }
        });
    });
});

单击“保存”按钮时，请求将包含值为save的参数Save，因此在PHP中，您可以对其进行测试。当通过Ajax发出请求时，将不会提交参数save。

Answer 2

添加一个隐藏的输入，当您更改颜色值时会更新，这将具有serialize()能够

的效果

修改 的我看到我已经解决了你的观点，为什么不在点击时调用该功能的按钮上添加onclick？

检查是否在serialize（）jquery中单击了PHP中的按钮

2 个答案: