How to accept values or enable a button only if all fields are filled?

I trying to find a way to accept values from my HTML (razorview) on a button click or by pressing “Enter”. What I want to do is

  1. Enable the send button only if both the fields are filled up, else it should be disabled.
  2. Send values by pressing “Enter” key. But, this should also happen only if both fields are filled up.

My initial (failed) attempts look somewhat like:

< script src = "~/Scripts/jquery.signalR-2.2.2.min.js" > < /script> <
  script src = "~/signalr/js" > < /script> <
  script src = "~/Scripts/SignalR.js" > < /script> <
  script type = "text/javascript"
src = "//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" > < /script> <
  script type = "text/javascript" > < /script>
  (function() {

    var myHub = $.connection.myHub;
    $("#textarea").keyup(function() {

      if ($(this).val() != "" && $("textarea").val() != "") {
        console.log("This should not run unless all feilds are full.");
        var text = ($(this).val()).toString();
        text = text.replace(/s+/g, " ").trim();
        var message = ($("textarea").val()).toString();
        message = message.replace(/s+/g, " ").trim();
        $('input[type="button"]').removeAttr('disabled');
      } else {
        $("#send").attr('disabled', 'disabled');

      }
    });

    $('#yourMessage, fname').keyup(function(e) {
      if ($("#yourMessage").val() != "" && $("#fname").val() != "") {
        if (e.which == 13) { //Enter key pressed
          $('#send').trigger('click'); //Trigger search button click event
        }
      }
    });
  })();
.button {
  text-decoration: none;
  border: none;
  padding: 12px 20px;
  cursor: pointer;
  outline: 0;
  display: inline-block;
  margin-right: 2px;
  border-radius: 12px;
  background-color: blue;
  opacity: 1;
}

.button-blue {
  background-color: #3498db;
}

.button-blue:hover {
  background-color: #3498db;
}

.button-blue:active {
  color: #3498db;
  background-color: #3498db;
  box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.2);
}

.button:disabled {
  opacity: 0.6;
  pointer-events: none;
}
<h1>Hello!</h1>
<form action="" method="post" id="subscribe" name="subscribe">
  First name: <input type="text" name="fname" id="fname" placeholder="Name" required autofocus><br>
  <div id="message"></div>
  Your Message:<br>
  <textarea typeof="text" id="yourMessage" placeholder="Start Typing..." required></textarea><br />
  <input type="button" class="button button-blue" value="Send" name="button" disabled="disabled" id="send" />
</form>
<input type="button" class="button button-blue" value="Click Me!" id="click-me" />

Answer

The answer is you have to bind to all the different cases. Here is a working jsfiddle of what you’re looking for: https://jsfiddle.net/4z5zgqbn/

$(document).ready(function() {
  $("#send").prop("disabled", true);

  $("#yourMessage").on("keyup", function() {
    if ($(this).val() != "" && $("#fname").val() != "") {
      $("#send").prop("disabled", false);
    } else {
      $("#send").prop("disabled", true);
    }
  });
  $("#fname").on("keyup", function() {
    if ($(this).val() != "" && $("#yourMessage").val() != "") {
      $("#send").prop("disabled", false);
    } else {
      $("#send").prop("disabled", true);
    }
  });

  $("#yourMessage, #fname").on("keyup", function(e) {
    if (e.which == 13 && $("#fname").val() != "" && $("#yourMessage").val() != "") {
      $("#send").click();
    }
  })

  $("#send").on("click", function() {
    alert("send message");
  })
})

Leave a Reply

Your email address will not be published. Required fields are marked *