0

我有三组由 jQuery 和一个选择列表显示和隐藏的表单字段。

它们的显示就像我想要的那样。但是现在从前两组传递给 php 代码的信息正在丢失，如果底部的三个字段集是使用的集合。信息传递没有问题。

这是页面下方类似名称的项目擦除页面上部项目信息的情况吗？

我该如何解决这个问题？

            <ul id="options">
                <li>
                    <h2>Your guest names</h2>
                    <label for="GuestName">Guest:</label>&nbsp;<input type="text" style="width:180px;" name="GuestName" id="GuestName" /><br/>
                </li>
                <li>
                    <h2>Your guest names</h2>
                    <label for="GuestName">Guest:</label>&nbsp;<input type="text" style="width:180px;" name="GuestName" id="GuestName" /><br/>
                    <label for="GuestName2">Guest 2:</label>&nbsp;<input type="text" style="width:180px;" name="GuestName2" id="GuestName2" /><br/>
                </li>
                <li>
                    <h2>Your guest names</h2>
                    <label for="GuestName">Guest:</label>&nbsp;<input type="text" style="width:180px;" name="GuestName" id="GuestName" /><br/>
                    <label for="GuestName2">Guest 2:</label>&nbsp;<input type="text" style="width:180px;" name="GuestName2" id="GuestName2" /><br/>
                    <label for="GuestName3">Guest 3:</label>&nbsp;<input type="text" style="width:180px;" name="GuestName3" id="GuestName3" /><br/>
                </li>

            </ul>
            <script>
                $("li").hide();

                $("#numberattending").change(function() {
                    var index = $(this).children(":selected").index();
                $("#options").children().hide().eq(index).show();
                });
            </script>
4

2 回答 2

1

当您隐藏这些字段时，请尝试禁用它们。这将阻止它们与表单一起提交。当然，您必须在显示它们时重新启用它们。

尝试这些更改（您的代码已注释，替换为新代码）：

// $("#options").children().hide().eq(index).show();
$("#options").children().hide().find('input').prop('disabled', true);
$("#options").children().eq(index).show().find('input').prop('disabled', false);

更好的方法可能是让 jQuery 在您调用时触发“隐藏”事件，hide()并在发生这种情况时禁用输入（对于 类似show()）：

// taken from http://stackoverflow.com/a/2857952/259457
var _oldhide = $.fn.hide;
$.fn.hide = function(speed, callback) {
    $(this).trigger('hide');
    return _oldhide.apply(this,arguments);
}

$('#options li').on('hide', function() {
    $(this).find('input').prop('disabled', true);
});

show()然后，您可以使您的代码与其余代码相同，并且当您调用或hide()在li标签上时，这些字段将自动禁用/启用。

于 2013-04-03T20:27:35.747 回答
1

这是页面下方类似名称的项目擦除页面上部项目信息的情况吗？

是的..当表单发布时..表单中的字段按其名称发布，在您的情况下，三个输入具有相同的名称，因此它正在替换并且只有一个被发布...一种方法是给它是一个独特的名字..

或禁用除该字段以外的所有其他字段，以免发布..

试试这个

 $("#numberattending").change(function() {
      var index = $(this).children(":selected").index();
      $("#options").find('input').prop('disabled',true);
      $("#options").children().hide().eq(index).show().find('input').prop('disabled',false);
 });
于 2013-04-03T20:27:58.220 回答