Issue checking value of form input with jQuery

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

Your code seems fine. We need more context to find the actual problem. It would be best if you can recreate the scenario in jsfiddle. — brianpeiris
– brianpeiris, Commented Apr 27, 2011 at 14:37
Hi brian, As far as I can see it, this is essentially what I have: jsfiddle.net/ezFgU/11 and it works on jsfiddle :P — dapperwaterbuffalo
– dapperwaterbuffalo, Commented Apr 27, 2011 at 14:43
@buymypies what you show as html in your post is not valid html and doesn't match what is in your fiddle can we see the html source — mcgrailm
– mcgrailm, Commented Apr 27, 2011 at 14:47
@buymypies your js fiddle still has invalid html get that sorted out first. the form needs to be in a td the items in the form should not be without a parent in the form every submit button needs a different id — mcgrailm
– mcgrailm, Commented Apr 27, 2011 at 15:01

brianpeiris · Accepted Answer · 2011-04-27 15:19:00Z

2

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.

edited Apr 27, 2011 at 15:19

answered Apr 27, 2011 at 15:12

brianpeiris

10.8k1 gold badge34 silver badges46 bronze badges

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

3 Comments

dapperwaterbuffalo Over a year ago

thank you! it seems I've learnt a lot from such a small task.

mcgrailm Over a year ago

please note that you should not leave inputs in the from without a parent to have valid html so you should put them in divs or ul->li

brianpeiris Over a year ago

@mcgrailm Only if you're aiming for Strict validation, I think. The HTML5 spec allows it.

ChrisThompson · Accepted Answer · 2011-04-27 14:08:40Z

1

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

answered Apr 27, 2011 at 14:08

ChrisThompson

2,00813 silver badges17 bronze badges

Comments

mcgrailm · Accepted Answer · 2011-04-27 14:24:57Z

1

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

edited Apr 27, 2011 at 14:24

answered Apr 27, 2011 at 14:09

mcgrailm

17.7k22 gold badges85 silver badges131 bronze badges

5 Comments

dapperwaterbuffalo Over a year ago

ye, I have tried it. I just get nothing happening on the clicking #submit now.

dapperwaterbuffalo Over a year ago

I don't understand why its not working :( Must be something to do with having multiple forms...but they are all seperate so I am lost

mcgrailm Over a year ago

can you post the html also if you are using an actual submit button you will need to prevent the default I updated my fiddle to show how to do that

Parris Varney Over a year ago

Can you give your forms different identifiers?

dapperwaterbuffalo Over a year ago

@PMV i've removed form id's that was jst there coz i was trying a different approach.

Collectives™ on Stack Overflow

Issue checking value of form input with jQuery

3 Answers 3

3 Comments

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related