I know it's easy to do using <button> or <input type="submit" but how would you keep this button disabled unless both input fields are filled? <input id="one" type="text"> <input id="two" type="text"> <a href="#" class="button">OK</a> Code (markup):
Why are you using a link instead of a button or submit type input? And, I don't really understand the problem. Disabling the link is done pretty much the same way as disabling a button/input. Depends whether you're using a library or regular js.
Somebody on stackoverflow gave the solution just a moment ago. Just what I needed. $('#one, #two').blur(function() { if($('#one').val() !== "" && $('#two').val() !== "") { $('.button').removeAttr('href'); } else { $('.button').attr('href','#'); } }); Code (markup): And then you just do the button as <a class="button">OK</a> I couldn't figure it out on my own @PoPSiCLe
Yes, but again - what are you using the link for? Are you autosaving the input in the textfields? Or something? The link with OK won't do anything with the form...?
No, no. It's just entering tags into a textarea onclick. It's for a function I've been working on. Nothing major. I like styling my buttons the way I want, so I prefer that over a <button>.
Ah, okay, I see. Misuse of a link-tag, and you can style a button whichever way you want - pretty much one of the few inputs you actually can style as you see fit. I get it. However, the script you posted won't really do what you want. First off, it doesn't check the inputs on load (I'm assuming they start out empty?) - also, the one above will not work properly - it will allow for the tag to become active if only one input is filled. This, however, does what you want, I think: if ($('#one, #two').val().length <= 0) { $('.button').removeAttr('href'); }; $('input[type=text]').on('blur',function() { if($('#one').val().length > 0 && $('#two').val().length > 0) { $('.button').attr('href','#'); } }); Code (markup): jsfiddle: https://jsfiddle.net/tubfjkqq/