Geek asks and answers

The button is disabled if both input fields do not matter.

I have a form with two input fields and a submit button on my page, I would like the "send" function to be disabled until both of the two input fields have values. That the button will be available for clicks, if and only if both fields have values.

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

+3
source share
4 answers

Here is a solution using jQuery:

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

<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/

+6

JQuery: jQuery /

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

Do not forget the property namefor the 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>
+1
source 
$(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"); 
  });
});
+1
source

More articles:


All Articles