CODEWITHSUNDEEP
jqueryhtmlajax
i_user
i_user

Reputation: 513

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

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');
    });
});

Upvotes: 0

Views: 1469

Answers (3)

nboncoure
nboncoure

Reputation: 56

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>

Upvotes: 0

Leonidas
Leonidas

Reputation: 566

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.

Upvotes: 0

jrarama
jrarama

Reputation: 904

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>

Upvotes: 1

Related Questions