Issue checking value of form input with jQuery

I want to perform an if statement based upon the value of a hidden input within myform.

the scenario is that I have a table consisting of tests. Each test is essentially its own form. the hidden input basically conta开发者_JS百科ins 'YES' if the test has a password attached. I want to prompt the user to enter the password if that is the case when they attempt to execute a particular test (submit the form).

so here is my code I am attempting:

$("#submit").live('click', function(event) {
    if ($(this).parent().find(':input:hidden[name=has_password]').val() == 'YES') {
            $('.messagepop').remove();
                $(this).parent().append('<div class="messagepop pop"><p><label for="password">Enter test password</label><input type="text" size="30" name="pass" id="pass" /></p><p><input type="button" id="submitPass" value="GO" id="pass_submit"/> or <a class="close" href="/">Cancel</a></p></div>');
                $(".pop").slideFadeToggle(function() { 
                $("#pass").focus();
                });
                return false;
    }  
});

Without the if statement the code works: on clicking a particular button within a form, another small password entry form pops up. However I only want the form to pop up if a value of a hidden input is 'YES'.

I have checked that values are present in the hidden input.

I imagine I am using the jQuery slightly wrong as I am a beginner. So can somebody identify a better way of performing the check?

Many thanks,

EDIT (jsfiddle with html etc):

jsfiddle

---

Your HTML is extremely malformed. The <tr> and <form> end-tags are mismatched, you've got a <form> tag directly inside the <tr>, which is not allowed, you haven't self-closed your <input /> tags and you have duplicate id's on the same page.

<tr>
  <form name='myform' method='post' action='test_sim.php'>
    <input name='test' type='hidden' value='1'>
    <input type='hidden' name='has_password' value='NO'>
    <td>TEST 1</td>
    <td>B352</td>
    <td>10</td>
    <td>2011-05-12 06:00:00</td>
    <td>2011-05-12 12:00:00</td>
    <td>06:00:00</td>
    <td><input id='submit' type='button' value='execute test'></td>
  </tr>
</form>

It should be like this:

<tr>
  <td>TEST 1</td>
  <td>B352</td>
  <td>10</td>
  <td>2011-05-12 06:00:00</td>
  <td>2011-05-12 12:00:00</td>
  <td>06:00:00</td>
  <td>
    <form name='myform' method='post' action='test_sim.php'>
      <input name='test' type='hidden' value='1' />
      <input type='hidden' name='has_password' value='NO' />
      <input class='submit' type='button' value='execute test' />
    </form>
  </td>
</tr>

Fixing the HTML solves your problem: http://jsfiddle.net/brianpeiris/ezFgU/16/

You should use the W3C Validator tool to check your HTML so that you can prevent these types of issues.

Edit: As mcgrailm mentioned, your id attributes are duplicated. jQuery is forgiving here, it seems, that's why the above jsFiddle works. You should use a class to identify your submit buttons and use the corresponding $('.submit') selector to attach a click handler.

---

i believe

if ($(this).parent().find(':input:hidden[name=has_password]').val() == 'YES')

should be

 if ($(this).parent().find('input[name=has_password]:hidden').val() == 'YES')

---

i think your selector is incorrect try this

$("#submit").live('click', function(event) {
    if ($(this).parent().find('input[name="has_password"]:hidden').val() == 'YES') {
            $('.messagepop').remove();
                $(this).parent().append('<div class="messagepop pop"><p><label for="password">Enter test password</label><input type="text" size="30" name="pass" id="pass" /></p><p><input type="button" id="submitPass" value="GO" id="pass_submit"/> or <a class="close" href="/">Cancel</a></p></div>');
                $(".pop").slideFadeToggle(function() { 
                $("#pass").focus();
                });
                return false;
    }  
});

WORKING DEMO