Form For Table no. And Coustomer Details:

Output:

Order Form

Customer Details:

Table No.:

Date Time:

Name: Mobile No: Email:

Code:

CSS:

Html:

<h2 style="font-size: 35px; margin: 0;">Order Form</h2>

</div>

Customer Details:

</h3>

Selected Items

</button>

</div>

<form class="form-outer" id="coustomer-details-input-form" onsubmit="handleOrderForm(event)" style="flex-basis: 400px; max-width: 400px; background: #FFB799; padding: 20px; border-radius: 10px; border: 1px solid #B9B9BA; box-shadow: 0 2px 8px #B9B9BA; margin: 10px;">

<label for="table-adress-number" style="font-weight: bold;">Table No.:</label>

<select id="table-adress-number" name="Table No." class="table-select" style="width: 100%; height: 40px; padding: 8px; margin-bottom: 15px; border-radius: 8px; font-size: 20px; font-weight: bold;"

onfocus="this.style.outline='none'; this.style.borderColor='#00aaff'; this.style.backgroundColor='#f0faff';"

onblur="this.style.borderColor='#ccc'; this.style.backgroundColor='white';" required>

<option value="" disabled selected>Select Table</option>

<option value="R.S.-1" style="font-size: 16px; color: green;">R.S. - Table: 1</option>

<option value="R.S.-1-A">R.S. - Table: 1-A</option>

<option value="R.S.-1-B">R.S. - Table: 1-B</option>

</optgroup>

<option value="R.S.-1/2">R.S. - Table: 1/2</option>

<option value="R.S.-1-A/2">R.S. - Table: 1-A/2</option>

<option value="R.S.-1-B/2">R.S. - Table: 1-B/2</option>

</optgroup>

<option value="R.S.-2">R.S. - Table: 2</option>

<option value="R.S.-2-A">R.S. - Table: 2-A</option>

<option value="R.S.-2-B">R.S. - Table: 2-B</option>

</optgroup>

<option value="R.S.-2/2">R.S. - Table: 2/2</option>

<option value="R.S.-2-A/2">R.S. - Table: 2-A/2</option>

<option value="R.S.-2-B/2">R.S. - Table: 2-B/2</option>

</optgroup>

<option value="R.S.-3">R.S. - Table: 3</option>

<option value="R.S.-3-A">R.S. - Table: 3-A</option>

<option value="R.S.-3-B">R.S. - Table: 3-B</option>

</optgroup>

<option value="R.S.-3/2">R.S. - Table: 3/2</option>

<option value="R.S.-3-A/2">R.S. - Table: 3-A/2</option>

<option value="R.S.-3-B/2">R.S. - Table: 3-B/2</option>

</optgroup>

<option value="R.S.-4">R.S. - Table: 4</option>

<option value="R.S.-4-A">R.S. - Table: 4-A</option>

<option value="R.S.-4-B">R.S. - Table: 4-B</option>

</optgroup>

<option value="R.S.-4/2">R.S. - Table: 4/2</option>

<option value="R.S.-4-A/2">R.S. - Table: 4-A/2</option>

<option value="R.S.-4-B/2">R.S. - Table: 4-B/2</option>

</optgroup>

<option value="R.S.-5">R.S. - Table: 5</option>

<option value="R.S.-5-A">R.S. - Table: 5-A</option>

<option value="R.S.-5-B">R.S. - Table: 5-B</option>

</optgroup>

<option value="R.S.-5/2">R.S. - Table: 5/2</option>

<option value="R.S.-5-A/2">R.S. - Table: 5-A/2</option>

<option value="R.S.-5-B/2">R.S. - Table: 5-B/2</option>

</optgroup>

<option value="R.S.-6">R.S. - Table: 6</option>

<option value="R.S.-6-A">R.S. - Table: 6-A</option>

<option value="R.S.-6-B">R.S. - Table: 6-B</option>

</optgroup>

<option value="R.S.-6/2">R.S. - Table: 6/2</option>

<option value="R.S.-6-A/2">R.S. - Table: 6-A/2</option>

<option value="R.S.-6-B/2">R.S. - Table: 6-B/2</option>

</optgroup>

<option value="R.S.-7">R.S. - Table: 7</option>

<option value="R.S.-7-A">R.S. - Table: 7-A</option>

<option value="R.S.-7-B">R.S. - Table: 7-B</option>

</optgroup>

<option value="R.S.-7/2">R.S. - Table: 7/2</option>

<option value="R.S.-7-A/2">R.S. - Table: 7-A/2</option>

<option value="R.S.-7-B/2">R.S. - Table: 7-B/2</option>

</optgroup>

<option value="R.S.-8">R.S. - Table: 8</option>

<option value="R.S.-8-A">R.S. - Table: 8-A</option>

<option value="R.S.-8-B">R.S. - Table: 8-B</option>

</optgroup>

<option value="R.S.-8/2">R.S. - Table: 8/2</option>

<option value="R.S.-8-A/2">R.S. - Table: 8-A/2</option>

<option value="R.S.-8-B/2">R.S. - Table: 8-B/2</option>

</optgroup>

<option value="R.S.-9">R.S. - Table: 9</option>

<option value="R.S.-9-A">R.S. - Table: 9-A</option>

<option value="R.S.-9-B">R.S. - Table: 9-B</option>

</optgroup>

<option value="R.S.-9/2">R.S. - Table: 9/2</option>

<option value="R.S.-9-A/2">R.S. - Table: 9-A/2</option>

<option value="R.S.-9-B/2">R.S. - Table: 9-B/2</option>

</optgroup>

<option value="F.-1">F. - Table: 1</option>

<option value="F.-1-A">F. - Table: 1-A</option>

<option value="F.-1-B">F. - Table: 1-B</option>

</optgroup>

<option value="F.-1/2">F. - Table: 1/2</option>

<option value="F.-1-A/2">F. - Table: 1-A/2</option>

<option value="F.-1-B/2">F. - Table: 1-B/2</option>

</optgroup>

<option value="F.-2">F. - Table: 2</option>

<option value="F.-2-A">F. - Table: 2-A</option>

<option value="F.-2-B">F. - Table: 2-B</option>

</optgroup>

<option value="F.-2/2">F. - Table: 2/2</option>

<option value="F.-2-A/2">F. - Table: 2-A/2</option>

<option value="F.-2-B/2">F. - Table: 2-B/2</option>

</optgroup>

<option value="F.-3">F. - Table: 3</option>

<option value="F.-3-A">F. - Table: 3-A</option>

<option value="F.-3-B">F. - Table: 3-B</option>

</optgroup>

<option value="F.-3/2">F. - Table: 3/2</option>

<option value="F.-3-A/2">F. - Table: 3-A/2</option>

<option value="F.-3-B/2">F. - Table: 3-B/2</option>

</optgroup>

<option value="F.-4">F. - Table: 4</option>

<option value="F.-4-A">F. - Table: 4-A</option>

<option value="F.-4-B">F. - Table: 4-B</option>

</optgroup>

<option value="F.-4/2">F. - Table: 4/2</option>

<option value="F.-4-A/2">F. - Table: 4-A/2</option>

<option value="F.-4-B/2">F. - Table: 4-B/2</option>

</optgroup>

</optgroup>

</optgroup>

</optgroup>

</optgroup>

</optgroup>

</optgroup>

</optgroup>

</optgroup>

</optgroup>

</optgroup>

</optgroup>

</optgroup>

</optgroup>

</optgroup>

</optgroup>

</optgroup>

</optgroup>

</optgroup>

</select>

Date Time:

</label>

</div>

<label for="mobile-no" style="display: block; font-size: 18px; font-weight: bold; margin-bottom: 5px; color: #333;">Mobile No:</label>

<label for="email-id" style="display: block; font-size: 18px; font-weight: bold; margin-bottom: 5px; color: #333;">Email:</label>

</div>

Refresh

</button>

</div>

</button>

</div>

Submit to Your Order

</button>

</div>

</form>

</div>

JS:

let serialNumber = 1;

// ✅ Utility function to format date-time in DD:MM:YYYY, 12-hour format

function getCurrentDateTimeInLocalFormat() {

const now = new Date();

const day = String(now.getDate()).padStart(2, '0');

const month = String(now.getMonth() + 1).padStart(2, '0');

const year = now.getFullYear();

const hours = now.getHours();

const minutes = String(now.getMinutes()).padStart(2, '0');

const seconds = String(now.getSeconds()).padStart(2, '0');

const ampm = hours >= 12 ? 'PM' : 'AM';

const hour12 = String(hours % 12 || 12).padStart(2, '0');

const datePart = `${day}:${month}:${year}`;

const timePart = `${hour12}:${minutes}:${seconds} ${ampm}`;

return `${datePart}, ${timePart}`;

}

document.getElementById('orderForm').addEventListener('submit', function (e) {

e.preventDefault(); // Stop form from submitting normally

const name = document.getElementById('customerName').value.trim();

const mobile = document.getElementById('customerMobile').value.trim();

const table = document.getElementById('tableNumber').value;

const email = document.getElementById('customerEmail')?.value.trim() || ''; // optional field

if (name === '' || mobile === '' || table === '') {

alert('Please fill all fields!');

return;

}

const dateTime = getCurrentDateTimeInLocalFormat(); // ✅ Get formatted date-time

const tbody = document.getElementById('orderDataTable').querySelector('tbody');

const newRow = document.createElement('tr');

newRow.innerHTML = `

<td>${serialNumber++}</td>

<td>${table}</td>

<td>${mobile}</td>

<td>${email}</td>

<td>${dateTime}</td>

tbody.appendChild(newRow);

// Optional: Clear form after submission

document.getElementById('orderForm').reset();

});

function handleOrderForm(event) {

event.preventDefault(); // Prevent 405 error

alert("Form processed via JavaScript. No POST required.");

// your custom processing logic

}

</script>

Search This Blog

New Kitchen King (II) form, Table, Select with code