Results 1 to 3 of 3

Thread: Disable <a class button if input fields empty

  1. #1
    Join Date
    Oct 2012
    Posts
    180
    Thanks
    22
    Thanked 1 Time in 1 Post

    Default Disable <a class button if input fields empty

    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?

    Code:
    <input id="one" type="text">
    <input id="two" type="text">
     <a href="#" class="button">OK</a>

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    Disable and href? Maybe you could preventDefault / return false; or remove the href attribute with removeAttribute('href') ?

    Or how about hiding the link with style.display='none'; and when the input is filled, show it with style.display='block';
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  3. The Following User Says Thank You to Beverleyh For This Useful Post:

    qwikad.com (10-16-2015)

  4. #3
    Join Date
    Oct 2012
    Posts
    180
    Thanks
    22
    Thanked 1 Time in 1 Post

    Default

    Thank you. I got some help over on stackoverflow. Similar to what you suggested.

    Code:
    $('#one, #two').blur(function() {
       if($('#one').val() !== "" && $('#two').val() !== "") {
           $('.button').removeAttr('href');
       } else {
          $('.button').attr('href','#');
       }
    });
    And then you just do the button as <a class="button">OK</a>

Similar Threads

  1. Jason's Date Input Calendar - Need Help to Display Empty Date Fields?
    By Dorgs in forum Dynamic Drive scripts help
    Replies: 9
    Last Post: 06-07-2013, 02:08 PM
  2. preventing user to proceed with empty fields
    By pgh06 in forum JavaScript
    Replies: 0
    Last Post: 01-27-2013, 09:19 PM
  3. PHP Form Fields Show up Empty?
    By shelliezdesign in forum PHP
    Replies: 1
    Last Post: 09-23-2009, 06:40 AM
  4. Use Javascript to empty all other fields
    By abskure in forum JavaScript
    Replies: 10
    Last Post: 07-25-2007, 06:02 PM
  5. Disable Submit Whilst Input Is Empty
    By Pope Pius X2 in forum JavaScript
    Replies: 1
    Last Post: 07-20-2007, 07:19 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •