Enable button on a page when fields in a particular form is filled

Question

I have two forms on a page and i want to activate a particular button on a form when all fields in a particular form is filled, but with my current script when a particular form fields are filled and the rest of fields of the other form on the page are not filled the button still remains inactive

<form method=post id="regis">
    <p>Register</p>
    <p>
        <input name="username" type="text" id="first_name">
        <input name="password" type="text" id="second_name">
        <input type="submit" value="register" id="register" disabled>
    </p>
</form>
<p>
    <label for="textfield"></label>
    <label for="textfield2"></label>
</p>
<form name="form1" method="post" action="">
    <p>Login</p>
    <p>
        <label for="password2"></label>
        <input type="text" name="email2" id="textfield2">
        <label for="textfield3"></label>
        <input type="text" name="password2" id="textfield3">
        <input type="submit" value="login" id="login2" disabled>
    </p>
</form>

$(document).ready(function () {
    var $input = $('input:text'),
        $register = $('#register');
    $register.attr('disabled', true);

    $input.keyup(function () {
        var trigger = false;
        $input.each(function () {
            if (!$(this).val()) {
                trigger = true;
            }
        });
        trigger ? $register.attr('disabled', true) : $register.removeAttr('disabled');
    });
});

jrarama · Answer 1 · 2015-02-03T08:19:55.820

You can use the .prop method:

$(document).ready(function () {
  var $input = $('input:text'),
      $register = $('#register');

  $input.keyup(function () {
    var disable = false;

    $input.each(function () {
      // if there is atleast one field that is empty
      // disable it
      if (!$(this).val()) {
        disable = true; 
        // terminate the .each loop
        return false;
      }
    });

    $register.prop('disabled', disable);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
  <input tyupe="text"/>
  <input tyupe="text"/>
  <button id="register" disabled>Ok</button>
  </form>

please can you put it my script for me cos i'm new to jquery — i_user, Feb 03 '15 at 08:13

nboncoure · Accepted Answer · 2015-02-03T08:32:15.813

Try with a more restricted jQuery selector to select your inputs $input = $('#regis input:text')

$(document).ready(function () {
    var $input = $('#regis input:text'),
        $register = $('#register');
    $register.attr('disabled', true);

    $input.keyup(function () {
        var trigger = false;
        $input.each(function () {
            if (!$(this).val()) {
                trigger = true;
            }
        });
        trigger ? $register.attr('disabled', true) : $register.removeAttr('disabled');
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form method=post id="regis">
    <p>Register</p>
    <p>
        <input name="username" type="text" id="first_name">
        <input name="password" type="text" id="second_name">
        <input type="submit" value="register" id="register" disabled>
    </p>
</form>
<p>
    <label for="textfield"></label>
    <label for="textfield2"></label>
</p>
<form name="form1" method="post" action="">
    <p>Login</p>
    <p>
        <label for="password2"></label>
        <input type="text" name="email2" id="textfield2">
        <label for="textfield3"></label>
        <input type="text" name="password2" id="textfield3">
        <input type="submit" value="login" id="login2" disabled>
    </p>
</form>

it works fine on my website not not on the jquery mobile webiste, why? — i_user, Feb 03 '15 at 08:40
For your jquery mobile version, prefer use `trigger ? $register.button('disable') : $register.button('enable');`instead of `register.attr('disabled', true) : $register.removeAttr('disabled');` like explained [here](http://stackoverflow.com/questions/5875025/disable-buttons-in-jquery-mobile) — nboncoure, Feb 03 '15 at 09:00

score 0 · Answer 3 · edited May 23 '17 at 11:43

You can check the value of the input elements. If thy are not empty you can call the button to be enabled. Simply add:

if($('#textfield2').val()!='' && $('#textfield3').val()!='')
{
    $('#login2').removeAttr('disabled');
}

This snippet can be used for your second form. The same goes for the first one. Ofcourse it is a well documented issue so you may search the web better. Check here too.

Enable button on a page when fields in a particular form is filled

3 Answers3