表单字段集已停止将信息传递到数据库

Question

I have three sets of form fields that are shown and hidden by jQuery and a Select list.

They are displaying just like I want them. But now the information that was being passed to the php code from the first two sets is being lost and if the bottom set of three fields are the set used. The information is passed no problem.

Is this a case of similarly named items lower in the page erasing the information of items in the upper part of the pages?

How do I get around this?

            <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>

Answer 1

When you hide those fields, try also disabling them. This will prevent them from being submitted with the form. You'll, of course, have to re-enable them when you show them.

Try these changes (your code commmented, replace with new code):

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

---

A better way might be to make jQuery fire a 'hide' event when you call hide() and disable the inputs when that happens (and similar for 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);
});

Then you can keep your code the rest of your code the same, and the fields will be disabled/enabled automatically when you call show() or hide() on the li tags.