Sets of form fields have stopped passing information to the database

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.

Answer 2

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

yes it is.. when the form is posted.. the fields in the form is posted by its name , in your case three inputs have the same name so it is replacing and only one is getting posted... one way is to give it a unique name..

or disableing all other field except the one ,so that it is not posted ..

try this

 $("#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);
 });