Issue with checking for multiple submit buttons using jQuery

Question

I'm trying to check which of four submit buttons was pressed, using jQuery 1.7.2 If any of three of them are clicked, I want to show an alert box with the value of the button. Here is the html code:

<body>
    <table>
        <tr>
            <td>
                <input type="submit" id="cancel" value="Cancel">
            </td>
        </tr>

        <tr>
            <td>
                <input type="submit" id="find" value="Find">
            </td>
        </tr>

        <tr>
            <td>
                <input type="submit" id="save" value="Save">
            </td>
        </tr>

        <tr>
            <td>
                <input type="submit" id="update" value="Update">
            </td>
        </tr>
    </table>
</body>

Here is the jQuery function code:

<script>
        $(function(){
            $(':submit').click(function(){
                var value = $(this).val();
                //alert(value);

                if($(this).val() == "Save" || "Find" || "Clear") {
                //if($(this).val() == "Update") {
                    alert('The value is: ' + value);
                }
            });
        });
    </script>

If I click on any of the three buttons I get the value displayed, but if I then click on the Update button it is also displayed. I thought my if block would prevent that from happening?

If I comment out that line and use this code instead:

if($(this).val() == "Update") {
                        alert('The value is: ' + value);
                    }

Then only when I click on the Update button will the alert fire. What is wrong with the code here when I'm checking for multiple submit buttons?

Sampson · Accepted Answer · 2012-05-27 05:20:07Z

4

Your if-statement is not correct:

if( $(this).val() == "Save" || "Find" || "Clear" )

Though the operator is commonly assumed to work like this, this is not how it works. If you wanted to test whether the value is equal to one of these strings, you should probably use $.inArray instead:

if ( $.inArray( $(this).val(), [ "Save", "Find", "Clear" ] ) > -1 );

Extra Credit

As a bit of extra-credit, the || operator evaluates two expressions (one to the left of it, and one to the right of it) and evaluates to true if either of the two expressions is truthy.

if ( true || false ) // Evalutes to true, since one of the two was true

In your attempt, you wanted to see if the value was equal to any of these strings. If you wanted to use ||, you would have to create several comparisons:

var myVal = $(this).val();
if ( ( myVal == "Save" ) || ( myVal == "Find" ) || ( myVal == "Clear" ) )

This condition will evaluate to true if any of the conditions are met. You can see how this will quickly become rather verbose.

edited May 27, 2012 at 5:20

answered May 27, 2012 at 5:02

Sampson

269k76 gold badges546 silver badges570 bronze badges

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

3 Comments

James-Jesse Drinkard Over a year ago

The verbose code worked. The inArray didn't though. I'll retry it.

Sampson Over a year ago

@JamesDrinkard It was a mistake on my end. $.inArray returns the index of the position where the string was found in the array. 0 is a potential response (first item in array) which would cause a falsy evaluation. I've updated the $.inArray evaluation to work.

James-Jesse Drinkard Over a year ago

You are correct, it's working now! I got stuck on this Friday afternoon at work and was trying to get it working stand alone. Thanks for the help!

Collectives™ on Stack Overflow

Issue with checking for multiple submit buttons using jQuery

1 Answer 1

Extra Credit

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Extra Credit

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related