Issue checking value of form input with jQuery - php

Question

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 contains '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

Answer 1

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.

Answer 2

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')

Answer 3

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