javascript 使用jQuery进行SeedLogix表单控件

Posted 2021-05-04

// I haven't had the chance to test this yet...
// Similar functionality here: http://summersale.stylesrhot.com/
// Style the message class appropriately and set to display:none;

$(".custom-form").submit(function (e) {
  
  // Does email input have content? 
  if ($('.custom-form input.email').val()) {
    
    // Fade out form fields
    $('.custom-form fieldset').fadeOut();
    
    // Wait for fade and then show confirmation
    setTimeout(function () {
      $(this).append('<p class="message">Thanks for contacting us!</p>');
      
      $('.message').fadeIn();
    }, 400);  
  }
});

/* Style checkboxes like checkboxes */

.checkboxDiv input {
  width: auto;
  height: auto;
  appearance: checkbox;
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
}

.checkboxDiv input, .checkboxDiv label {
  cursor:pointer;
}

/* Add asterisk to required fields */

.required-field label::after {
  content:"*";
  color:red;
}

/* Style button */

input[type="submit"] {
  cursor: pointer;
  width: auto;
  padding: 20px 50px;
  height: auto;
  font-weight: 700;
  font-size: 16px;
  line-height: 1em;
}

/* Highlight errors on required fields */

input.highlightError {
  border-color: red;
}

$(document).ready(function() {
  
  // Set field sizing classes on parent elements
  $('input.small').parent().addClass('field-sm');
  $('input.medium').parent().addClass('field-md');
  $('input.large').parent().addClass('field-lg');
  
  // Associate checkbox labels with inputs to allow them to be checked by clicking labels
  $('.checkboxDiv').parent().addClass('field-checkbox');
  $('.field-checkbox').each(function(i) {
    $(this).find('input').attr('id', 'checkbox-' + i);
    $(this).find('label').attr('for', 'checkbox-' + i);
  });
  
  // Add required class to list item
  $('li > .required').parent().addClass('required-field');
  $('li > .checkboxDiv > .required').parent().parent().addClass('required-field');
  
});