REDROOM

Navigation

Breadcrumbs

/ / home / getspomw / itechservicellc.com / resources / views / frontend / commonForm

Create

Create File | Create Folder | Upload Files | Run Command

Edit File Size: 6.96 KB

/home/getspomw/itechservicellc.com/resources/views/frontend/commonForm/common-form.blade.php

Text Base64

<form id="contact-form1" class="contact-form-items">
    @csrf

<div class="col-lg-12">
            <div class="form-clt">
                <select name="service" id="service" class="single-select w-100">
                    <option value="">Select Service</option>
                    <option>SEO Services</option>
                    <option>Local SEO</option>
                    <option>Content Marketing</option>
                    <option>Social Media Marketing</option>
                    <option>Ecommerce SEO</option>
                    <option>PPC Services</option>
                    <option>Web Development</option>
                    <option>Web Designing</option>
                </select>
                <small class="text-danger" id="serviceError"></small>
            </div>
        </div>

<div class="col-lg-12" id="otpSection" style="display:none;">
            <div class="form-clt">
                <input type="text" name="otp" id="otp" placeholder="Enter OTP">
                <small class="text-danger" id="otpError"></small>
            </div>
        </div>

<div class="col-lg-12">
            <button type="submit" class="theme-btn" id="submitBtn">
                <span>Submit Now <i class="icon-arrow-right"></i></span>
            </button>
        </div>

</div>
</form>

const form = document.getElementById('contact-form1');
    const submitBtn = document.getElementById('submitBtn');
    const emailInput = document.getElementById('email');
    const otpInput = document.getElementById('otp');
    const otpSection = document.getElementById('otpSection');
    const csrfToken = document.querySelector('meta[name="csrf-token"]').content;

let otpVerified = false;
    let otpSent = false;

// ================= SEND OTP =================
    emailInput.addEventListener('blur', function () {

const email = emailInput.value.trim();
        if (!email || otpSent) return;

document.getElementById('emailError').textContent = 'Sending OTP...';
        document.getElementById('emailError').style.color = '#666';

fetch('{{ route("send.otp.contact") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrfToken
            },
            body: JSON.stringify({ email })
        })
        .then(res => res.json())
        .then(data => {
            if (data.success) {
                otpSent = true;
                otpSection.style.display = 'block';
                document.getElementById('emailError').textContent = 'OTP sent successfully!';
                document.getElementById('emailError').style.color = 'green';
            } else {
                document.getElementById('emailError').textContent = data.message;
                document.getElementById('emailError').style.color = 'red';
            }
        })
        .catch(() => {
            document.getElementById('emailError').textContent = 'OTP sending failed';
            document.getElementById('emailError').style.color = 'red';
        });
    });

// ================= VERIFY OTP =================
    otpInput.addEventListener('blur', function () {

const otp = otpInput.value.trim();
        const email = emailInput.value.trim();
        if (!otp) return;

document.getElementById('otpError').textContent = 'Verifying...';
        document.getElementById('otpError').style.color = '#666';

fetch('{{ route("verify.otp") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrfToken
            },
            body: JSON.stringify({ email, otp })
        })
        .then(res => res.json())
        .then(data => {
            if (data.success) {
                otpVerified = true;
                document.getElementById('otpError').textContent = 'OTP verified successfully!';
                document.getElementById('otpError').style.color = 'green';
                checkForm();
            } else {
                otpVerified = false;
                document.getElementById('otpError').textContent = data.message;
                document.getElementById('otpError').style.color = 'red';
            }
        });
    });

// ================= CHECK FORM =================
    function checkForm() {

const inputs = Array.from(form.querySelectorAll('input, select'))
            .filter(input => !(input.id === 'otp' && otpSection.style.display === 'none'));

const allFilled = inputs.every(input => input.value.trim() !== '');

submitBtn.disabled = !(allFilled && otpVerified);
    }

form.addEventListener('input', checkForm);

// ================= FORM SUBMIT =================
    form.addEventListener('submit', function (e) {
        e.preventDefault();

//submitBtn.disabled = true;
        submitBtn.innerHTML = 'Submitting...';

document.querySelectorAll('small.text-danger').forEach(el => el.textContent = '');

const formData = new FormData(form);

fetch('{{ route("contact.store") }}', {
            method: 'POST',
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            },
            body: formData
        })
        .then(res => res.json())
        .then(data => {

submitBtn.innerHTML = 'Submit Now';

if (data.success) {
                form.reset();
                otpVerified = false;
                otpSent = false;
                otpSection.style.display = 'none';
               // submitBtn.disabled = true;

alert('🎉 Form submitted successfully!');  
            } else {
               // submitBtn.disabled = false;
                Object.keys(data.errors || {}).forEach(field => {
                    document.getElementById(field + 'Error').textContent = data.errors[field][0];
                });
            }
        })
        .catch(() => {
            submitBtn.innerHTML = 'Submit Now';
           // submitBtn.disabled = false;
            alert('Something went wrong!');
        });
    });

});
</script>

Exit & Reset Text mode: syntax highlighting auto-detects file type.

Directory Contents

Dirs: 0 Ã— Files: 1

Sort:

Enable drag-to-move

	Name	Size	Perms	Modified	Actions
	common-form.blade.php	6.96 KB	lrw-r--r--	2025-12-16 13:01:07	Edit Download recursive recursive