仅当所有字段都已填写时，如何接受值或启用按钮？

Question

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 1

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

Answer 2

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.