jQuery显示基于序列化哈希的隐藏选择菜单 - php

我试图通过使用Ajax和序列化的哈希值来使选择菜单显示隐藏。昨晚我有这个系统，但是我将#selector从表单更改为div，突然停止了运行。我不得不扩展表单以获取更多附加数据，并且不想为此立即序列化所有数据，因为这将给系统带来额外压力。

该页面按预期工作。它显示了第一个选择，允许我选择一个选项，我可以看到AJAX发布，但是哈希值是空的，我相信这会破坏上面的PHP。我不知道为什么哈希值是空的。我认为它没有从选择中获得价值，但我无法弄清楚为什么。

如果可能的话，您能指出我要去哪里了吗？

<section id="add">
<div class="container">
    <form method="post">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title"><strong>Step 1: Instance Select</strong></h3>
            </div>
            <div id="selector">
                <div class="panel-body">
                    <div class="col-md-6">
                        <select class="form-control box1" name="box1"></select>
                        <input name="box1hash" class="box1hash" type="hidden" />
                    </div>
                    <div class="col-md-6">
                        <select class="form-control box2" name="box2"></select>
                        <input name="box2hash" class="box2hash" type="hidden" />
                    </div>
                    <div class="col-md-6">
                        <select class="form-control box3" name="box3"></select>
                        <input name="box3hash" class="box3hash" type="hidden" />
                    </div>
                    <div class="col-md-6">
                        <select class="form-control box4" name="box4"></select>
                        <input name="box4hash" class="box4hash" type="hidden" />
                    </div>
                    <div class="col-md-6">
                        <select class="form-control box5" name="box5"></select>
                        <input name="box5hash" class="box5hash" type="hidden" />
                    </div>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title"><strong>Step 2: Event Details</strong></h3>
            </div>
            <div class="panel-body">
                <input name="event_name" type="text" class="form-control" />

            </div>
        </div>
        <input type="submit"/>
    </form>
</div>

        $(document).on('change', '#selector', function(e) {
            ajax_post(this);
        });

        ajax_post();

    })(jQuery);

    function show_hide_select(select){
        if ($(select).find('option').length < 1) {
            $(select).hide();
        } else {
            $(select).show();
        }
    }

    function ajax_post(element=null) {
        var frm = $('#selector');

        if (element != null) {
            // Reset selections
            var found=false;
            frm.find('select').each(function(e){
                if (found==true) {
                    $(this).hide().find('option:selected').prop("selected", false)
                }
                if (element==this) found=true;
            });
        }


        $.ajax({
        url: '?ajax=1',
        type: "POST",
        data: frm.serialize(),
        dataType: 'json',
            success: function (data) {

                if (data.box1hash != frm.find('.box1hash').val()) {
                    frm.find('.box1').html(data.box1?data.box1:'');
                    frm.find('.box1hash').val(data.box1hash);
                    show_hide_select(frm.find('.box1'));
                }

                if (data.box2hash != frm.find('.box2hash').val()) {
                    frm.find('.box2').html(data.box2?data.box2:'');
                    frm.find('.box2hash').val(data.box2hash);
                    show_hide_select(frm.find('.box2'));
                }

                if (data.box3hash != frm.find('.box3hash').val()) {
                    frm.find('.box3').html(data.box3?data.box3:'');
                    frm.find('.box3hash').val(data.box3hash);
                    show_hide_select(frm.find('.box3'));
                }

                if (data.box4hash != frm.find('.box4hash').val()) {
                    frm.find('.box4').html(data.box4?data.box4:'');
                    frm.find('.box4hash').val(data.box4hash);
                    show_hide_select(frm.find('.box4'));
                }

                if (data.box5hash != frm.find('.box5hash').val()) {
                    frm.find('.box5').html(data.box5?data.box5:'');
                    frm.find('.box5hash').val(data.box5hash);
                    show_hide_select(frm.find('.box5'));
                }

            }
        });
    }
</script>

参考方案

与我之前的评论相反，一个表单标签不能嵌套在另一个表单标签中。 jQuery serialize()仅适用于表单，因此很遗憾，无法将其集中在表单的div组件上。但是，您可以将整个表单序列化为一个字符串，然后提取该字符串的小节以减少Ajax发布。下面的代码段带有内嵌注释...

$('form').on({
 'change':function(e){
   e.preventDefault();
   var dats = $(this).serialize(); // serialize the whole form into a string
   var pico = dats.indexOf('&event_name='); // get the index of the end point of the desired data
   var newDats = dats.slice(0 , pico); // get the edited section for ajax submission
   $('#results').text(dats+' '+newDats);
   
 }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section id="add">
<div class="container">
    <form method="post" id='bob'>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title"><strong>Step 1: Instance Select</strong></h3>
            </div>
            <div id="selector">
                <div class="panel-body">
                    <div class="col-md-6">
                        <select class="form-control box1" name="box1">
                        <option>a</option>
                        <option>b</option>
                        <option>c</option>
                        </select>
                        <input name="box1hash" class="box1hash" type="hidden" />
                    </div>
                    <div class="col-md-6">
                        <select class="form-control box2" name="box2"></select>
                        <input name="box2hash" class="box2hash" type="hidden" />
                    </div>
                    <div class="col-md-6">
                        <select class="form-control box3" name="box3"></select>
                        <input name="box3hash" class="box3hash" type="hidden" />
                    </div>
                    <div class="col-md-6">
                        <select class="form-control box4" name="box4"></select>
                        <input name="box4hash" class="box4hash" type="hidden" />
                    </div>
                    <div class="col-md-6">
                        <select class="form-control box5" name="box5"></select>
                        <input name="box5hash" class="box5hash" type="hidden" />
                    </div>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title"><strong>Step 2: Event Details</strong></h3>
            </div>
            <div class="panel-body">
                <input name="event_name" type="text" class="form-control" />

            </div>
        </div>
        <input type="submit"/>
    </form>
</div>

<p><tt id="results"></tt></p>

故障排除“警告:session_start():无法发送会话高速缓存限制器-标头已发送” - php

我收到警告：session_start（）[function.session-start]：无法发送会话缓存限制器-标头已发送（错误输出开始如果我将表单数据提交到其他文件进行处理，则可以正常工作。但是，如果我将表单数据提交到同一页面，则会出现此错误。请建议<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0…

Div单击与单选按钮相同吗？ - php

有没有一种方法可以使div上的click事件与表单环境中的单选按钮相同？我只希望下面的div提交值，单选按钮很丑代码输出如下：<input id="radio-2011-06-08" value="2011-06-08" type="radio" name="radio_date&#…

PHP-复选框组 - php

我有一个需要发布的表单复选框组。<input type="checkbox" value="true" checked name="chk0[]"> <input type="checkbox" value="false" name=…

使用PHP包含时的淡入淡出过渡 - php

我正在尝试使用jQuery或CSS（或其他方式！）在DIV中包含的php页面上创建淡入淡出或滑动过渡。我四处搜寻，发现了很多淡入淡出过渡的示例，这些实例彼此淡入淡出div或隐藏内容淡入淡出，但是这种情况略有不同。我有一个DIV，其内容由导航栏控制。选中后，每个页面都可以使用PHP成功地包含在div中，但我想使内容淡入和淡出。关于如何在页面更改之间进行漂亮过渡…

AJAX调用只能与$(document).on('click')一起使用 - php

我有一个显示数据库条目的表。用户能够为每一行打开一个弹出菜单。选项之一是删除数据库条目，并且该表应通过AJAX调用相应地刷新。只要有人单击#delete-toggle中的table-popup，我就会在HTML页面上进行AJAX调用（table-popup是div，当有人单击每行中存在的表中的table-edit-button时出现的表）： <div …