jQuery addClass example

Change class name on click in jQuery

by wisegorilla

HTML

<html>
  <head>
	</head>
  <body>
    <div class="header">
      <h2 class="logo">Mautify</h2>
      <div class="header-right">
          <button>How it works?</button>
          <button>Sync Shopify Customers with Mautic</button>
          <button id="save">Save</button>
      </div>
    </div>

<div class="settings_section">
  <form id="mautic_auth" action="mautic_auth.php" method="POST" target="_blank">
    <div class="mautic_fields">
      <label for="authType">Your Mautic URL</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="mauticUrl">Your Mautic URL</label>
      <input type="text" id="mauticUrl" name="mauticUrl" placeholder="mauticUrl" value="https://bonmedico-health.com/mautic2">
    </div>

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

        <div class="mautic_fields">
          <label for="mauticPassword">Your Mautic Password</label>
          <input type="password" id="mauticPassword" name="mauticPassword" placeholder="Password" value="">
        </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" value="14_3ory4psu9944wcwssogo8gkwcwo8cw4kggkssko0o44kgwgsow">
      </div>
      <div class="mautic_fields">
        <label for="clientSecret">Your mautic Client Secret</label>
        <input type="text" id="clientSecret" name="clientSecret" placeholder="clientSecret" value="nslpdh8tha84sw4o8ogs0ccogk04skgwgs4s40k04kwwwgscg">
      </div>
    </div>
      <input type="text" name="shopUrl" value="<?php echo...

CSS

<style>
  * {box-sizing: border-box;}

  body {
    margin: 0;
    font-family: -apple-system,BlinkMacSystemFont,San Francisco,Roboto,Segoe UI,Helvetica Neue,sans-serif;
        background-color: #f4f6f8;
  }

  .header {
    overflow: hidden;
    background-color: #fff;
    padding: 5px 10px 5px 30px;
    border-bottom: 4px solid #0278bc;
    margin-bottom: 15px;
  }

  .header h2 {
    float: left;
    color: black;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
  }

  button#save {
      background-color: #0179bc;
      color: #fff;
  }

  .header button {
    background-color: #fff;
    border: 2px solid #eeedf1;
    border-radius: 5px;
    color: #529fd3;
    padding: 8px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
  }

  .header-right {
    float: right;
        line-height: 12px;
  }

  .settings_section {
    background-color: #fff;
    margin: 20px;
    padding: 20px;
    border-radius: 3px;
    -webkit-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.1);
    box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.1);
  }

  .settings_section input {
    border-radius: 5px;
    border: 1px solid #ccc;
    width: 100%;
    padding: 8px;
    font-size: 16px;
  }

  .settings_section label {
      display: block;
      margin-bottom: 5px;
  }

  .mautic_fields {
      margin-bottom: 10px;
  }
</style>

JavaScript

$(document).ready(function() {
      $('#oauth_fields').hide();
      $('#mautic_auth').submit(function(e) {
        //  e.preventDefault();
      });

      $('#save').click(function() {
        /*
          var form = $('#mautic_auth');
          $.ajax({
              url: form.prop('action'),
              method: form.prop('method'),
              data: form.serialize(),
              success: function(){
                  alert('Hurraaaayyy');
              },
              error: function() {
                  alert('Oh Error');
              }
          });
        */
        $('#mautic_auth').submit();
      });

      $('#authType').on('change', function() {
        if ($('#authType').val() == 'OAuth2') {
          $('#oauth_fields').show();
          $('#basic_fields').show();
        }
      })

    });