jQuery addClass example

Change class name on click in jQuery

by Dmitri Ganenco

HTML

<form id="contact-form">
  <input type="hidden" name="report-phone" value="<?php echo $dynamic_phone; ?>">
  <input id="haa-camp" type="hidden" name="report-camp" value="organic">
  <input id="haa-url" type="hidden" name="report-url" value="n/a">
  <div class="form-icons">
    <h4>Form Headline</h4>
    <p>Why you should fill out the form</p>

    <div class="input-group">
      <span class="input-group-label">
                        <i class="fa fa-user"></i>
                    </span>
      <input class="input-group-field" name="first-name" type="text" placeholder="First name" required>
    </div>

    <div class="input-group">
      <span class="input-group-label">
                        <i class="fa fa-user"></i>
                    </span>
      <input class="input-group-field" name="last-name" type="text" placeholder="Last name" required>
    </div>

    <div class="input-group">
      <span class="input-group-label">
                        <i class="fa fa-envelope"></i>
                    </span>
      <input class="input-group-field" name="email" type="email" placeholder="Email" required>
    </div>

    <div class="input-group">
      <span class="input-group-label">
                        <i class="fa fa-phone"></i>
                    </span>
      <input class="input-group-field" name="phone" type="text" placeholder="Phone" required>
    </div>
  </div>


  <button class="button form-button" type="button" value="Submit">
        <i class="fa fa-paper-plane"></i> &nbsp; Get Help Today
    </button>

</form>

JavaScript

function getCamp(name) {
  var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);
  return (results && results[1]) || undefined;
}
var camp = getCamp('utm_campaign');
if (camp > '') {
  console.log('got it: ' + camp);
  document.getElementById('report-camp').value = camp;
} else {
  console.log('campaign is missing');
}

var lpurl = document.location.href;
//document.getElementById('report-url').value = lpurl;



$(document).ready(function() {

  $('#contact-form').submit(function(event) {

    // process the form
    $.ajax({
        type: 'POST',
        url: 'https://hooks.zapier.com/hooks/catch/xxxxxx/xxxx/',
        data: $('#contact-form').serialize(), // object
        encode: true
      })
      // using the done promise callback
      .done(function(data) {
        console.log(data);
        window.location = "/thank-you";
      });
    event.preventDefault();
  });

});