Jquery assistance - show button if value entered.

[ArmoVanBuuren]

I'm trying to create a simple validation for work app I've created but my app can be run by all, so in order to stop people running the app I'd like to put a validation check which basically hides a button until a specific word is entered in a text box. It doesnt need to be ultra secure so it's fine in javascript hidden away.

I've tried to modify an existing solution I found on the internet and here is as far as I've got.
http://jsfiddle.net/5SArB/2291/
Which I want the button to display if the word Bonfire is typed in the text box. I think I'm missing something really simple, could someone please have a look for me?

Here is the original code I've worked from and modified:
http://jsfiddle.net/jadendreamer/5SArB/ (working code)
https://jadendreamer.wordpress.com/...-a-field-based-on-the-value-of-another-field/ (website)

Thanks

 

[john_s]

$("#name").change(function () {
        toggleFields();
    });

Change only triggers when the text box loses focus (eg you click out of it).

Use keyup instead:

$("#name").keyup(function () {
        toggleFields();
    });

 

[kaku]

Your selector is wrong. "#" denotes an ID; you have no element with the ID "name".

I would recommend working the problem through in a logical manner first, and then transfer those steps to code.

I'd also recommend ditching jQuery and just using vanilla JS since jQuery obfuscates a lot of what's going on and it can become difficult to follow, especially for beginners.

Example:

- Using text box "A" (how do we pinpoint exactly which text box we're acting on?)
- When the user types something in (is there a suitable event handler for the action we want to track?)
- Get the value in the text box and compare it with our wanted value (we already have a handle to our text box from step 1)
- If the two compared values match, reveal button "B" (we need to get a handle to this button as we did with the text box. How is the button hidden/revealed? We could make it invisible, remove it from the DOM entirely and insert it when the values match, etc.)

 

[roger that]

do as john says and use keyup instead of change and add id="name" to your text input, as kaku was alluding to.