JSFiddle - React, Tailwind, and code Playground

by Chuan Shao

HTML

<select name="school" id="usertype">
  <option value="usertype1">School A</option>
  <option value="usertype2">School B</option>
</select>

<input type="text" id="email" />
<input type="submit" value="Submit" />

JavaScript

$(function() {
  var $email = $("#email");
  var $userType = $("#usertype");
  var $submitButton = $(':input[type="submit"]');

  $email.attr('placeholder', 'Please put your student email');
  $userType.change(checkUserType);
  $email.keyup(checkUserType);
  checkUserType();

  function checkUserType() {
      console.log('checking...');
      if($userType.val() == "usertype1") {
      $email.attr('placeholder', 'Please put your student email');
      var emailDomain = $email.val().split('@')[1];
      var domains = ['schoolA.com', 'schoolB.com', 'schoolC.com'];
      if ($.inArray(emailDomain, domains) < 0) {
        $submitButton.prop('disabled', true);
      } else {
        $submitButton.prop('disabled', false);
      }
    } else {
      $email.attr('placeholder', 'Please put your student email');
      $submitButton.prop('disabled', false);
    }
  }
});