https://corporate.lundsandbyerlys.com/wp-content/themes/lunds-and-byerlys-theme/includes/js/vendor.js

1// Become A Vendor Form
2document.addEventListener('DOMContentLoaded', function () {
3  const form = document.getElementById('vendor-form');
4  const fileInput = document.getElementById('brand-images');
5  const listContainer = document.querySelector('.list');
6  const formContainer = document.querySelector('.vendor__form');
7
8  form.addEventListener('submit', function (event) {
9    event.preventDefault();
10    // Check if brand name is empty
11    const brandNameInput = document.getElementById('brand-name');
12    if (brandNameInput.value.trim() === '') {
13      alert('Please enter a brand name.');
14      return;
15    }
16
17    const formData = new FormData(form);
18    const xhr = new XMLHttpRequest();
19    xhr.onload = function () {
20      if (xhr.status === 200) {
21        // Clear form fields
22        form.reset();
23        formContainer.style.display = 'none';
24
25        // Create a new div for thank you message
26        const thankYouContainer = document.createElement('div');
27        thankYouContainer.classList.add('thank-you-message');
28
29        // Create thank you message container
30        const thankYouDiv = document.createElement('div');
31        thankYouDiv.classList.add('cta__main', 'container-body', 'cta__small');
32        thankYouDiv.innerHTML = `
33          <div class="cta__content">
34            <div class="cta__heading">
35              <div class="cta__headline trade-font" style="color:#000;">
36                <h1 class="fontlarge">
37                  Thank You for
38                  <br>
39                  Your Submission
40                </h1>
41              </div>
42            </div>
43            <div class="cta__divider">
44              <div class="cta__line"></div>
45            </div>
46            <div class="cta__text" style="color:#000;">
47              <p>We appreciate your interest in becoming a Lunds & Byerlys vendor. We will contact you soon with further information. If you have any questions, please <a class="vendor__link" href="/contact-us/">contact us</a> via phone or email.</p>
48            </div>
49            <div class="cta__button">
50              <div class="button"><a href="/" title="" target="_self" class="button-arrow button__size-regular button__spacing-medium button__style-1">Homepage</a></div>
51            </div>
52          </div>
53        `;
54
55        // formContainer.appendChild(thankYouDiv);
56        form.parentNode.insertBefore(thankYouDiv, form.nextSibling);
57        document.querySelector('.cta__main').scrollIntoView({ behavior: 'smooth' });
58      } else {
59        alert('An error occurred. Please try again.');
60      }
61    };
62    xhr.onerror = function () {
63      alert('An error occurred. Please try again.');
64    };
65    xhr.open('POST', vendorFormAjax.ajax_url, true); // Use the localized AJAX URL here
66    xhr.send(formData);
67  });
68
69  fileInput.addEventListener('change', function () {
70    const files = fileInput.files;
71    if (files.length > 0) {
72      Array.from(files).forEach(file => {
73        if (typeValidation(file.type)) {
74          uploadFile(file);
75        }
76      });
77    }
78  });
79
80  // Check the file type
81  function typeValidation(type) {
82    var splitType = type.split('/')[0];
83    return (
84      type == 'application/pdf' || splitType == 'image' || splitType == 'video'
85    );
86  }
87
88  // Upload file function
89  function uploadFile(file) {
90    var li = document.createElement('li');
91    li.classList.add('in-prog');
92    li.innerHTML = `
93           <div class="file-name">${file.name}<button style="color:#1d6351;font-size:14px;" class="delete-file trade-font-bold"><i class="fa-solid fa-lg fa-x"></i></button></div>
94       `;
95    listContainer.appendChild(li);
96
97    // Add event listener to delete button
98    const deleteButton = li.querySelector('.delete-file');
99    deleteButton.addEventListener('click', function () {
100      listContainer.removeChild(li);
101    });
102  }
103});