Question

我正在使用类似于以下内容的输出（true / false）复选框，通过数据库值表示特定计算机的设置。

div将始终具有代表计算机的“c”前面的唯一ID值。复选框的每个设置都是1或0表示true / false。下面的输出工作正常。现在，我想允许用户更改复选框，并通过“提交设置”链接将更改提交到数据库。请注意，页面上将有多个div（计算机），如下所示。

我想使用jquery onclick'submit settings'链接来读取div id和三个设置的状态，然后执行ajax post来更新db中的值。在一个完美的世界中，我想在点击确认更改后打开确认模式，并提供一个选项，将这些设置用作特定帐户中所有计算机的默认设置。现在，我只是在寻找基础知识，并且可能会在以后扩展它。

我不知道从哪里开始使用jquery / ajax，因为这对我来说仍然很新，但是对于发布值的php脚本没有任何问题。

<div id="c'.$computer[computer_id].'">
    <label><input type="checkbox" '.($settings[hide_icon] == 1 ? 'checked' : 'unchecked').'> System tray icon?</label>
    <label><input type="checkbox" '.($settings['24h_format'] == 1 ? 'checked' : 'unchecked').'> 24 hour time format?</label>
    <label><input type="checkbox" '.($settings[stealth] == 1 ? 'checked' : 'unchecked').'> Stealth mode?</label>
    <label><a href="#">Submit settings</a></label>';
</div>

Answer 1

确保将div包装在表单中，并在输入复选框中添加名称：

<form action="url_where_you_want_to_post" method="POST">
    <div id="c'.$computer[computer_id].'">
        <label><input name="hide_icon" type="checkbox" '.($settings[hide_icon] == 1 ? 'checked' : 'unchecked').'> System tray icon?</label>
        <label><input name="24h_format" type="checkbox" '.($settings['24h_format'] == 1 ? 'checked' : 'unchecked').'> 24 hour time format?</label>
        <label><input name="stealth" type="checkbox" '.($settings[stealth] == 1 ? 'checked' : 'unchecked').'> Stealth mode?</label>
        <label><a href="#" class="submit">Submit settings</a></label>';
    </div>
</form>

<script type="text/javascript">
    $(function () {
        $('.submit').on('click', function () {
            var $form = $(this).closest('form');

            $.ajax({
                type: $form.attr('method'),
                url: $form.attr('action'),
                data: $form.serialize()
            }).done(function (response) {
                // Depending on what you return from the server you can show some feedback for the user.
                // If you return lets say { success: true } from the server, then you can do:
                if (response.success) {
                    alert('Saved!');
                } else {
                    alert('Some error occurred.');
                }
            });
        });
    });
</script>

获取复选框状态并通过布尔值将更改发布到db

1 个答案: