jQuery: Require data and enable send if valid

Before send form is required get data, typing the correct values on Id field.

by Porfirio Chavez

HTML

<form id="formulario" name="formulario" method="post" action="" onSubmit="alert('sended ;)'); return false;">
  <legend>Select user by typing and ID</legend>
  <br>
    <label for='userid'>User ID:</label>
    <input type="text" name="userid" id="userid" />
    <br>
    <label>Name:</label>
    <input type="text" name="name" id="name" readonly />
    <br>
    <label>Last Name:</label>
    <input type="text" name="lastName" id="lastName" readonly/>
    <br>
    <input type="submit" name="button" id="button" value="Send User Data" disabled />
</form>
<hr>
<p>
Note: Introduce "JS" on id input to enable send
</p>

CSS

body {
  font-family: 'verdana';
  font-size: 14px;
  background-color: #edfffa;
}

label {
  display: inline-block;
  width: 92px;
}

input {
  border-radius: 4px;
  border: solid 1px #278ea5;
  padding: 4px 10px;
  margin-bottom: 12px;
}

input[readonly], input[readonly="readonly"] {
  cursor: not-allowed;
  background-color: #cfd0d2;
}

input[type=submit]{
  width: 140px;
  font-weight: bold;
  background-color: #21e6c1;
  color: #071e3d;
  cursor: pointer;
}

input[type=submit]:disabled{
  width: 140px;
  font-weight: bold;
  background-color: #071e3d;
  color: #21e6c1;
  cursor: not-allowed;
}

JavaScript

function fillInputs(){
    var id = $("#userid").val();
    var name = '';
    var lastName = '';
    if(id == "JS"){
        name = "Jhon";
        lastName = "Snow";
        
        $("#button").attr("disabled", false);
    }
    else {
        name = "N/A";
        lastName = "N/A";
        $("#button").attr("disabled", true);
    }
    
    $("#name").val(name);
    $("#lastName").val(lastName);
}

$(document).ready(function(){
	$("#userid").on("change", fillInputs);
});