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!

Either submit button will submit all fields because they're all part of the same form. Which means on the client side both "val" inputs are submitted. I'm not a PHP guy, but I think server-side it is just picking up the last one. — nnnnnn
– nnnnnn, Commented Jan 25, 2013 at 5:38
Just so you know, you can select multiple elements in jQuery by separating them with commas. For example, in your code you could do this: $('#fname, #lname, #subfn, #subln, #valf, #vall, #fnf, #lnf').hide(); — anon
– anon, Commented Jan 25, 2013 at 5:55
@AgentConundrum - Thanks, I did not know that! I really don't know much about jQuery. About 3 hours ago was my first time actually working with it aside from looking at it. — Michael Maginnis
– Michael Maginnis, Commented Jan 25, 2013 at 6:03

Hanky Panky · Accepted Answer · 2013-01-25 05:48:03Z

2

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");

edited Jan 25, 2013 at 5:48

answered Jan 25, 2013 at 5:42

Hanky Panky

46.9k9 gold badges76 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Michael Maginnis Over a year ago

..and then I wouldn't have to separate the form? Because my goal is to do it all in one form.

Hanky Panky Over a year ago

@MichaelMaginnis yes that is correct. You wont have to separate the form

nnnnnn Over a year ago

Or just give the two submit buttons different name attributes, and then your PHP can test which button was clicked. (In which case you wouldn't need the hidden "val" field.)

score 1 · Accepted Answer · 2013-01-25 06:02:40Z

1

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.

edited Jan 25, 2013 at 6:02

answered Jan 25, 2013 at 5:41

anon

2 Comments

nnnnnn Over a year ago

The browser can and does submit multiple fields with the same name. Most server-side languages let you process all the values, but of course that doesn't help in the OP's case since it doesn't distinguish which submit button was pressed. (And I'm not a PHP guy, but unlike other languages I think PHP only copes with duplicate field names if the name ends with "[]".)

anon Over a year ago

@nnnnnn I just tested this and you're right. I didn't realize that. I guess I've spent too much time with PHP and not enough with other languages. I'll update my answer.

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related