Button disable unless both input fields have value

前端未结

关注

 4  1423

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

相关标签:

4条回答

不知归路

2021-01-06 17:24

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>

0 讨论(0)

一整个雨季

2021-01-06 17:27

$(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"); 
  });
});

0 讨论(0)

借酒劲吻你

2021-01-06 17:34

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/

0 讨论(0)

有刺的猬

2021-01-06 17:34

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>

0 讨论(0)