jQuery addClass example

Change class name on click in jQuery

by wisegorilla

HTML

<form id="mautic_auth" action="<?php echo 'authorize.php?' . $_SERVER['QUERY_STRING'] ?>" method="POST" target="_parent" >
        <div class="mautic_fields">
          <label for="authType">Mautic Authorization Type</label>
          <select id="authType" name="authType">
            <option value="BasicAuth">Basic Auth</option>
            <option value="OAuth2">OAuth 2</option>
          </select>
        </div>

        <div class="mautic_fields">
          <label for="baseUrl">Your Mautic URL</label>
          <input type="text" id="baseUrl" name="baseUrl" placeholder="Mautic URL">
        </div>

        <div id="basic_fields">
          <div class="mautic_fields">
            <label for="username">Your Mautic Username</label>
            <input type="text" id="mauticUsername" name="mauticUsername" placeholder="Mautic Username">
          </div>

          <div class="mautic_fields">
            <label for="mauticPassword">Your Mautic Password</label>
            <input type="password" id="mauticPassword" name="mauticPassword" placeholder="Mautic Password">
          </div>
        </div>

        <div id="oauth_fields">
          <div class="mautic_fields">
            <label for="clientKey">Your Mautic Client ID</label>
            <input type="text" id="clientKey" name="clientKey" placeholder="clientKey">
          </div>
          <div class="mautic_fields">
            <label for="clientSecret">Your mautic Client Secret</label>
            <input type="text" id="clientSecret" name="clientSecret" placeholder="clientSecret">
          </div>
        </div>
        <input type="hidden" name="shopUrl" value="<?php echo $_GET['shop'];?>">
      </form>

JavaScript

$('#authType').on('change', function() {
    if ($('#authType').val() == 'OAuth2') {
      $('#oauth_fields').show();
      $('#basic_fields').hide();
			$("#oauth_fields input").prop('required',true);
			$("#basic_fields input").prop('required',false);

    } else {
      $('#oauth_fields').hide();
      $('#basic_fields').show();
			$("#basic_fields input").prop('required',true);
			$("#oauth_fields input").prop('required',false);
    }
  })