jQuery addClass example

Change class name on click in jQuery

by Alexandru Gatea

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css">
<div class="container">
  <div class="columns">
    <div class="column is-half">
      <form action="https://api.staticforms.xyz/submit" method="post" id="staticform">
        <!-- Replace with your StaticForms accessKey -->
        <input type="hidden" name="accessKey" value="7bdf36fb-68eb-4411-9b74-f85832d7c76c">
        <input type="hidden" name="subject" value="Test from jsfiddle">
        <div class="field">
          <label class="label">Name</label>
          <div class="control">
            <input class="input" type="text" name="name" placeholder="Enter Your Name" required>
          </div>
        </div>
        <div class="field">
          <label class="label">Email</label>
          <div class="control">
            <input class="input" type="email" name="email" placeholder="Enter Your Email" required>
          </div>
        </div>
        <div class="field">
          <label class="label">Message</label>
          <div class="control">
            <textarea class="textarea" name="message" placeholder="Enter Your Message" required></textarea>
          </div>
        </div>
        <button class="button is-primary" type="Submit">Submit</button>
      </form>
    </div>
  </div>
</div>

CSS

div.column.is-half {
  width: 50%;
}

JavaScript

// find elements
$("#staticform").submit(function(event) {
  event.preventDefault();
  $.ajax({
    url: 'https://api.staticforms.xyz/submit', // url where to submit the request
    type: "POST", // type of action POST || GET
    dataType: 'json', // data type
    data: $("#staticform").serialize(), // post data || get data
    success: function(result) {
      // you can see the result from the console
      // tab of the developer tools
      alert(JSON.parse(result));
    },
    error: function(xhr, resp, text) {
      alert(xhr, resp, text);
    }
  })
});