hide a hidden input value when a submit button is clicked (php/jquery)

Question

Ok, so my problem is this:

I have a form that asks for a First Name, Last Name, and a City. The user clicks submit and then the information is displayed into this table:

<p>You entered the following data:</p>

            <form action="1.php" method="post">

                <input type="hidden" name="action" value="update">
                <input type="hidden" name="city" value="<?php echo $user->get_city(); ?>">

                <table>
                    <tr>
                        <th>First Name:</th>
                        <td><?php echo $user->get_fname(); ?></td>
                        <td><input type="button" id="edit_fname" value="Edit"></td>
                        <td><input type="text" id="fname" name="fname" size="20"></td>
                        <td><input type="hidden" id="valf" name="val" value="fname">
                            <input type="hidden" id="lnf" name="lname" value="<?php echo $user->get_lname(); ?>">
                            <input type="submit" id="subfn" value="Submit"></td>
                    </tr>
                    <tr>
                        <th>Last Name:</th>
                        <td><?php echo $user->get_lname(); ?></td>
                        <td><input type="button" id="edit_lname" value="Edit"></td>
                        <td><input type="text" id="lname" name="lname" size="20"></td>
                        <td><input type="hidden" id="vall" name="val" value="lname">
                            <input type="hidden" id="fnf" name="fname" value="<?php echo $user->get_fname(); ?>">
                            <input type="submit" id="subln" value="Submit"></td>
                    </tr>
                    <tr>
                        <th align="right">City:</th>
                        <td><?php echo $user->get_city(); ?></td>
                        <td>&nbsp;</td>
                    </tr>
                </table>
            </form>

So, when the user clicks the edit button a text box is displayed along with a submit button, and depending on if it's the first name edit or last name edit, I have the proper hidden values to send along with the form. The only problem is that no matter what, the hidden input 'val' is set to 'lname' even when you click the Submit button for the first name field.

Here is the jquery:

$().ready = function() {
                    $('#fname').hide();
                    $('#lname').hide();
                    $('#subfn').hide();     // submit button for first name
                    $('#subln').hide();     // submit button for last name
                    $('#valf').hide();      // hidden value for fname so we know to post lname
                    $('#vall').hide();      // hidden value for lname so we know to post fname
                    $('#lnf').hide();       // hidden value to post last name when first name edit submit
                    $('#fnf').hide();       // hidden value to post first name when last name edit submit

                    $("#edit_fname").click(function() {
                        $('#fname').show();
                        $('#subfn').show();
                        $('#valf').show();
                        $('#lnf').show();

                        if ($('#lname').show) {     // if last name edit is showing, hide it
                            $('#lname').hide();
                            $('#subln').hide();
                            $('#vall').hide();
                            $('#fnf').hide();

                        }
                    });

                    $("#edit_lname").click(function() {
                        $('#lname').show();
                        $('#subln').show();
                        $('#vall').show();
                        $('#fnf').show();

                        if ($('#fname').show()) {       // if first name edit is showing, hide it
                            $('#fname').hide();
                            $('#subfn').hide();
                            $('#valf').hide();
                            $('#lnf').hide();
                        }
                    });

                }();

And here is the PHP for when the Submit button is clicked and changes the 'action' to 'update':

case 'update':
        $val = $_POST['val'];

        if ($val == 'fname') {
            $fname = $_POST['fname'];
            $lname = $_POST['lname'];
            $city = $_POST['city'];

            $user = new User($fname, $lname, $city);
            break;
        }
         else if ($val == 'lname') {
            $fname = $_POST['fname'];
            $lname = $_POST['lname'];
            $city = $_POST['city'];

            $user = new User($fname, $lname, $city);
            break;
        }

I tested to see what $val is and it seems to be stuck on 'lname' no matter what. So, I think there is a problem with my jQuery code, or the problem is that the last name 'val' value is being sent no matter what, which it shouldn't be because I have it ID'd to be hidden when the first name button is clicked.

This is all experimental to help me learn OOP. Obviously this is not production code at all. I am currently a 1st year student towards my Associates of Applied Science Degree and have many more years until I get the bachelors in computer science. This isn't even a part of a class...I'm just bored and really enjoy programming.

So, think anyone can help? Sorry for such a long post!

Answer 1

Here is why. See the following two lines of code

<td><input type="hidden" id="valf" name="val" value="fname">

.....

<td><input type="hidden" id="vall" name="val" value="lname">

Those define a hidden field named val first with value fname and then with value lname. Even when you are giving them different IDs their names are still the same. And nowhere in your jquery code are you changing the value of val that is why it always remains lname .

You have to change that value depending upon your logic somewhere. You can use following jQuery selector

$("input[type='hidden'][name='val']")

Edit

So instead of this

$('#valf').show();

You can write

$("input[type='hidden'][name='val']").val("fname");

And instead of this

$('#vall').show();

You can write

$("input[type='hidden'][name='val']").val("lname");

Answer 2

You have two different fields with name="val" in the same form. PHP reads each of these in sequence and the second value clobbers (overwrites) the first one, leaving you with just the last value in the $_GET array element.

You can submit multiple values under the same name by specifying the variable name with [] on the end of it. This tells PHP that it's an array element, just like you would use $array[] = "new element"; in your normal code to add an element to an array.

Even using the array syntax wouldn't help you here though, since both values would be passed to the server every time you submitted the form. If you only want one section or the other to be submitted, then they need to be separate forms.