1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Disable <a class button if input fields empty

Discussion in 'jQuery' started by qwikad.com, Oct 15, 2015.

  1. #1
    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):

     
    qwikad.com, Oct 15, 2015 IP
  2. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #2
    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.
     
    PoPSiCLe, Oct 15, 2015 IP
  3. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,151
    Likes Received:
    1,656
    Best Answers:
    29
    Trophy Points:
    475
    #3
    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
     
    qwikad.com, Oct 15, 2015 IP
  4. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #4
    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...?
     
    PoPSiCLe, Oct 16, 2015 IP
  5. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,151
    Likes Received:
    1,656
    Best Answers:
    29
    Trophy Points:
    475
    #5
    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>.
     
    qwikad.com, Oct 16, 2015 IP
  6. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #6
    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/
     
    PoPSiCLe, Oct 16, 2015 IP
    qwikad.com likes this.