New-1 Form For Items Order :

Output:

Items Order Form

Items Select Item 🔽 Item 1 Item 2 Item 3 Item 4 Price Quantity

Code: 

CSS:

HTML:

<!-- ✅ Form Container -->

<div style="display: flex; align-items: center; justify-content: center; height: 100vh; gap: 20px; flex-wrap: wrap; padding: 20px; box-sizing: border-box;">

  

  <!-- 🔷 Left Section -->

  <div id="coustomer-details-input-div" style="flex: 1 1 350px; background-color: #e6ffff; border-radius: 20px; border: 1px solid rgb(185, 185, 186); box-shadow: 0px 2px 8px rgb(185, 185, 186); padding: 10px; max-width: 300px;">

    

    <div style="text-align: center;">

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

    </div>

    <div id="selected-item-callbtn-id-div" style="margin-top: 20px; text-align: center;">

      <button id="selected-item-table-callbtn" style="background-color: deepskyblue; border-radius: 8px; border: none; box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 5px; color: white; cursor: pointer; font-size: 24px; padding: 8px 16px;">

        Selected Items

      </button>

    </div>

    <!-- 🔶 Right Section: Form -->

    <form id="coustomer-details-input-form" onsubmit="handleSubmit(event)" style="background: rgb(255, 183, 153); border-radius: 16px; border: 1px solid rgb(185, 185, 186); box-shadow: 0px 2px 8px rgb(185, 185, 186); padding: 20px; box-sizing: border-box; width: 300px; margin-top: 20px;">

      

      <!-- Items -->

      <label style="font-size: 20px; font-weight: bold;">Items</label>

      <select name="item-name" required style="width: 100%; padding: 8px 12px; margin: 10px 0 15px; font-size: 18px; font-weight: bold; border-radius: 8px; border: 1px solid #ccc;">

        <option disabled selected value="">Select Item 🔽</option>

        <optgroup label=" ── Salad ── ">

          <option value="Item-1">Item 1</option>

          <option value="Item-2">Item 2</option>

          <option value="Item-3">Item 3</option>

          <option value="Item-4">Item 4</option>

        </optgroup>

      </select>

      

      <!-- Price -->

      <label style="font-size: 20px; font-weight: bold;">Price</label>

      <input type="text" name="price" required style="width: 100%; padding: 8px 12px; margin-bottom: 15px; font-size: 18px; font-weight: bold; border-radius: 8px; border: 1px solid #ccc; box-sizing: border-box;" />

      <!-- Quantity Section -->

      <label style="font-size: 20px; font-weight: bold; margin-bottom: 15px;">Quantity</label>

      <div style="position: relative; width: 150px; height: 40px; margin-bottom: 15px; justify-content: center;">

        <input

          id="qty-input"

          type="number"

          name="quantity"

          value="1"

          min="1"

          style="

            width: 100%;

            height: 100%;

            text-align: center;

            font-size: 18px;

            font-weight: bold;

            border-radius: 8px;

            border: 1px solid #ccc;

            padding: 0 30px;

            box-sizing: border-box;

          "

        />

        <button

          type="button"

          onclick="decrementQty()"

          style="

            position: absolute;

            left: 0;

            top: 0;

            width: 40px;

            height: 100%;

            font-size: 22px;

            font-weight: bold;

            border: 2px solid white;

            border-radius: 8px 0 0 8px;

            background-color: #ffc107;

            cursor: pointer;

          "

        >−</button>

        <button

          type="button"

          onclick="incrementQty()"

          style="

            position: absolute;

            right: 0;

            top: 0;

            width: 40px;

            height: 100%;

            font-size: 22px;

            font-weight: bold;

            border: 2px solid white;

            border-radius: 0 8px 8px 0;

            background-color: #28a745;

            color: white;

            cursor: pointer;

          "

        >+</button>

      </div>

      <!-- Buttons -->

      <div style="margin-top: 20px;">

        <div style="display: flex; gap: 30px; justify-content: space-between; margin-bottom: 10px;">

          <button type="reset" style="flex: 1; padding: 10px; background-color: #ffc107; font-size: 20px; border: none; border-radius: 8px; cursor: pointer;">Refresh</button>

          <button type="button" onclick="toggleSelectionList()" style="flex: 1; padding: 10px; background-color: #dc3545; font-size: 20px; border: none; border-radius: 8px; color: white; cursor: pointer;">Close</button>

        </div>

        <button type="submit" style="width: 100%; padding: 10px; background-color: #28a745; font-size: 20px; border: none; border-radius: 8px; color: white; cursor: pointer;">Submit to Your Order</button>

      </div>

      <!-- 🔹 Popup Message -->

      <div id="popupMessage" style="

        position: fixed;

        top: 50px;

        left: 50%;

        transform: translateX(-50%);

        background: white;

        color: black;

        padding: 12px 20px;

        border-radius: 8px;

        font-size: 16px;

        display: none;

        z-index: 9999;

        box-shadow: 0 2px 10px rgba(0,0,0,0.2);

      "></div>

      

    </form>

  </div>

</div>

JS:

<!-- ✅ Script Section -->

<script>

  function handleSubmit(event) {

    event.preventDefault(); // prevent actual form submission

    showPopup("✅ Your order submitted to the selected items!");

  }

  function showPopup(message) {

    const popup = document.getElementById("popupMessage");

    popup.innerText = message;

    popup.style.display = "block";

    setTimeout(() => {

      popup.style.display = "none";

    }, 2500);

  }

  function incrementQty() {

    const input = document.getElementById("qty-input");

    input.value = parseInt(input.value || 1) + 1;

  }

  function decrementQty() {

    const input = document.getElementById("qty-input");

    input.value = Math.max(1, parseInt(input.value || 1) - 1);

  }

  function toggleSelectionList() {

    alert("Close button clicked – you can add your own logic here.");

  }

</script>