fork download
copy 
  1. <!DOCTYPE html>
  2. <html lang="th">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>แบบฟอร์มกรอกข้อมูล</title>
  7.     <style>
  8.         body {
  9.             font-family: Arial, sans-serif;
  10.             margin: 0;
  11.             padding: 20px;
  12.             background-color: #f9f9f9;
  13.         }
  14.         form {
  15.             max-width: 400px;
  16.             margin: auto;
  17.             background: #ffffff;
  18.             padding: 20px;
  19.             border-radius: 8px;
  20.             box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  21.         }
  22.         label {
  23.             font-size: 14px;
  24.             margin-bottom: 5px;
  25.             display: block;
  26.         }
  27.         input, select, textarea {
  28.             width: 100%;
  29.             padding: 10px;
  30.             margin-bottom: 15px;
  31.             border: 1px solid #ccc;
  32.             border-radius: 5px;
  33.             font-size: 14px;
  34.         }
  35.         button {
  36.             width: 100%;
  37.             padding: 10px;
  38.             background-color: #4CAF50;
  39.             color: white;
  40.             border: none;
  41.             border-radius: 5px;
  42.             font-size: 16px;
  43.             cursor: pointer;
  44.         }
  45.         button:hover {
  46.             background-color: #45a049;
  47.         }
  48.     </style>
  49. </head>
  50. <body>
  51.     <h1 style="text-align: center;">แบบฟอร์มกรอกข้อมูล</h1>
  52.     <form id="dataForm">
  53.         <label for="lineNumber">หมายเลขไลน์</label>
  54.         <input type="text" id="lineNumber" name="lineNumber" placeholder="กรอกหมายเลขไลน์" required>
  55.  
  56.         <label for="model">โมเดล</label>
  57.         <input type="text" id="model" name="model" placeholder="กรอกชื่อโมเดล" required>
  58.  
  59.         <label for="foremanName">ชื่อโฟร์แมน</label>
  60.         <input type="text" id="foremanName" name="foremanName" placeholder="กรอกชื่อโฟร์แมน" required>
  61.  
  62.         <label for="reason">สาเหตุที่ปิดไลน์</label>
  63.         <textarea id="reason" name="reason" placeholder="ระบุสาเหตุ" required></textarea>
  64.  
  65.         <label for="stopTime">เวลาที่ปิด</label>
  66.         <input type="datetime-local" id="stopTime" name="stopTime" required>
  67.  
  68.         <label for="startTime">เวลาที่เปิด</label>
  69.         <input type="datetime-local" id="startTime" name="startTime" required>
  70.  
  71.         <label for="totalTime">สรุปเวลาที่ปิดไลน์</label>
  72.         <input type="text" id="totalTime" name="totalTime" placeholder="ระบุเวลาที่ปิดรวม" disabled>
  73.  
  74.         <button type="button" onclick="submitForm()">ส่งข้อมูล</button>
  75.     </form>
  76.  
  77.     <script>
  78.         function calculateTotalTime() {
  79.             const stopTime = new Date(document.getElementById("stopTime").value);
  80.             const startTime = new Date(document.getElementById("startTime").value);
  81.  
  82.             if (stopTime && startTime && stopTime < startTime) {
  83.                 const diff = Math.abs(startTime - stopTime);
  84.                 const hours = Math.floor(diff / (1000 * 60 * 60));
  85.                 const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
  86.  
  87.                 return `${hours} ชั่วโมง ${minutes} นาที`;
  88.             }
  89.             return "ข้อมูลไม่สมบูรณ์";
  90.         }
  91.  
  92.         function submitForm() {
  93.             const formData = {
  94.                 lineNumber: document.getElementById("lineNumber").value,
  95.                 model: document.getElementById("model").value,
  96.                 foremanName: document.getElementById("foremanName").value,
  97.                 reason: document.getElementById("reason").value,
  98.                 stopTime: document.getElementById("stopTime").value,
  99.                 startTime: document.getElementById("startTime").value,
  100.                 totalTime: calculateTotalTime()
  101.             };
  102.  
  103.             // แสดงข้อมูลใน console
  104.             console.log("ข้อมูลที่ส่ง:", formData);
  105.  
  106.             // แสดงผลรวมเวลาในฟอร์ม
  107.             document.getElementById("totalTime").value = formData.totalTime;
  108.  
  109.             alert("ส่งข้อมูลสำเร็จ! โปรดตรวจสอบ Console สำหรับข้อมูล");
  110.         }
  111.     </script>
  112. </body>
  113. </html>
  114.  
Success #stdin #stdout 0.03s 25404KB
comments (?)
stdin
copy 
Standard input is empty
stdout
copy 
<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>แบบฟอร์มกรอกข้อมูล</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f9f9f9;
        }
        form {
            max-width: 400px;
            margin: auto;
            background: #ffffff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        label {
            font-size: 14px;
            margin-bottom: 5px;
            display: block;
        }
        input, select, textarea {
            width: 100%;
            padding: 10px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 14px;
        }
        button {
            width: 100%;
            padding: 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
        }
        button:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <h1 style="text-align: center;">แบบฟอร์มกรอกข้อมูล</h1>
    <form id="dataForm">
        <label for="lineNumber">หมายเลขไลน์</label>
        <input type="text" id="lineNumber" name="lineNumber" placeholder="กรอกหมายเลขไลน์" required>

        <label for="model">โมเดล</label>
        <input type="text" id="model" name="model" placeholder="กรอกชื่อโมเดล" required>

        <label for="foremanName">ชื่อโฟร์แมน</label>
        <input type="text" id="foremanName" name="foremanName" placeholder="กรอกชื่อโฟร์แมน" required>

        <label for="reason">สาเหตุที่ปิดไลน์</label>
        <textarea id="reason" name="reason" placeholder="ระบุสาเหตุ" required></textarea>

        <label for="stopTime">เวลาที่ปิด</label>
        <input type="datetime-local" id="stopTime" name="stopTime" required>

        <label for="startTime">เวลาที่เปิด</label>
        <input type="datetime-local" id="startTime" name="startTime" required>

        <label for="totalTime">สรุปเวลาที่ปิดไลน์</label>
        <input type="text" id="totalTime" name="totalTime" placeholder="ระบุเวลาที่ปิดรวม" disabled>

        <button type="button" onclick="submitForm()">ส่งข้อมูล</button>
    </form>

    <script>
        function calculateTotalTime() {
            const stopTime = new Date(document.getElementById("stopTime").value);
            const startTime = new Date(document.getElementById("startTime").value);

            if (stopTime && startTime && stopTime < startTime) {
                const diff = Math.abs(startTime - stopTime);
                const hours = Math.floor(diff / (1000 * 60 * 60));
                const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));

                return `${hours} ชั่วโมง ${minutes} นาที`;
            }
            return "ข้อมูลไม่สมบูรณ์";
        }

        function submitForm() {
            const formData = {
                lineNumber: document.getElementById("lineNumber").value,
                model: document.getElementById("model").value,
                foremanName: document.getElementById("foremanName").value,
                reason: document.getElementById("reason").value,
                stopTime: document.getElementById("stopTime").value,
                startTime: document.getElementById("startTime").value,
                totalTime: calculateTotalTime()
            };

            // แสดงข้อมูลใน console
            console.log("ข้อมูลที่ส่ง:", formData);

            // แสดงผลรวมเวลาในฟอร์ม
            document.getElementById("totalTime").value = formData.totalTime;

            alert("ส่งข้อมูลสำเร็จ! โปรดตรวจสอบ Console สำหรับข้อมูล");
        }
    </script>
</body>
</html>
https://ideone.com/M8dcXe
language:
PHP (php 7.3.5)
created:
3 days ago
visibility:
public

Share or Embed source code

Discover > Sphere Engine API

The brand new service which powers Ideone!

Discover > IDE Widget

Widget for compiling and running the source code in a web browser!