CODEWITHSUNDEEP
javascripthtmljqueryjquery-events
Innocent Criminal
Innocent Criminal

Reputation: 196

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

Upvotes: 0

Views: 102

Answers (2)

Avitus
Avitus

Reputation: 15958

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

Upvotes: 1

Patrick Schocke
Patrick Schocke

Reputation: 1491

To 1: Thats what I have done: give all your inputs one same class name (.classname),

$(".classname").bind("change paste keyup", function() {
    if ($("#fname").val() && $("#yourMessage").val()) { 
        $( "#Send" ).prop( "disabled", false ); 
    } else {
        $( "#Send" ).prop( "disabled", true );
    }
});

To 2: 

$('.classname').on('keypress', function (e) {
     if(e.which === 13 && $("#fname").val() && $("#yourMessage").val()){

        //Disable textbox to prevent multiple submit
        $( "#Send" ).prop( "disabled", true );
        //Submit your form
     }

});

haven´t testet it.

Upvotes: 0

Related Questions