Button disable unless both input fields have value

问题

I have a form with two input fields and a submit button on my page, I would like to have the feature that the 'submit' button is disabled until there are values on both two input fields. That's the button will be clickable if and only if there are values input in both fields.

how to implement this with js and jQuery?

Here is my page:

<html>
<body>
    <form method=post>
        <input type=text id='first_name'>
        <input type=text id='second_name'>
        <input type=submit value=Submit>
    </form>
</body>
</html>

I would like to have both js and jQuery solution

回答1:

Here's a solution using jQuery:

HTML (note that I added a id to the submit button):

<form method=post>
    <input type="text" id="first_name">
    <input type="text" id="second_name">
    <input type="submit" value="Submit" id="submit" disabled>
</form>

JavaScript/jQuery:

$(':text').keyup(function() {
    if($('#first_name').val() != "" && $('#second_name').val() != "") {
       $('#submit').removeAttr('disabled');
    } else {
       $('#submit').attr('disabled', true);   
    }
});

Working example: http://jsfiddle.net/nc6NW/1/

回答2:

JQuery: jQuery disable/enable submit button

Pure JS:

<html>
<body>
    <form method="POST" 
     onsubmit="return this.first_name.value!='' && this.second_name.value!=''">
        <input type="text" id="first_name" name="first_name"
        onkeyup="this.form.subbut.disabled = this.value=='' || this.form.second_name.value==''">
        <input type="text" id="second_name" name"second_name"
        onkeyup="this.form.subbut.disabled = this.value=='' || this.form.first_name.value==''">

        <input type="submit" value="Submit" disabled="disabled">
    </form>
</body>
</html>

回答3:

Don't forget the name property for your form fields!

<html>
<head>
<script type="text/javascript" src="path.to/jquery.js" />
<script type="text/javascript">
$(function() { // on document load

   var fn = function() {
      var disable = true;
      $('#myForm input[type:text]').each(function() { // try to find a non-empty control
          if ($(this).val() != '') {
             disable = false;
          }
      });

      $('#myForm input[type:submit]').attr('disabled', disable);
   }

   $('#myForm input[type:text]').change(fn); // when an input is typed in
   fn(); // set initial state
});
</script>
<body>
    <form id="myForm" method="POST">
        <input type="text" id="first_name">
        <input type="text" id="second_name">
        <input type="submit" value="Submit">
    </form>
</body>
</html>

回答4:

$(function(){
  $("#first_name, #second_name").bind("change keyup",
  function(){
     if($("#first_name").val() != "" && $("#second_name").val() != "")
        $(this).closest("form").find(":submit").removeAttr("disabled");
     else
        $(this).closest("form").find(":submit").attr("disabled","disabled"); 
  });
});

来源：https://stackoverflow.com/questions/5248159/button-disable-unless-both-input-fields-have-value

标签

javascript

jquery

jquery-ui

javascript-events