เว็บบอร์ด PHP เว็บส่งเสริมการเรียนรู้ Hosting CRM ERP Server Programming ถาม-ตอบปัญหา

        <div>
            <form action="" name="frmMain" id="frmMain" method="post"> 
                <label for="fname"> กรอกตัวเลข </label>
                <input type="text" id="fname" name="firstname" placeholder="กรอกตัวเลข">
                <label for="country">แปลงเป็น : </label>
                <select id="country" name="country">
                    <option value="decbin">เลขฐาน 2 </option>
                    <option value="decoct">เลขฐาน 8 </option>
                    <option value="dechex">เลขฐาน 16</option>
                </select>
                <input type="text" id="result" name="" value="00">
                <input type="submit" id="btnSend"  value="Submit">
            </form>
        </div>

        <style>
            input[type=text], select {
                width: 100%;
                padding: 12px 20px;
                margin: 8px 0;
                display: inline-block;
                border: 1px solid #ccc;
                border-radius: 4px;
                box-sizing: border-box;
            }

            input[type=submit] {
                width: 100%;
                background-color: #4CAF50;
                color: white;
                padding: 14px 20px;
                margin: 8px 0;
                border: none;
                border-radius: 4px;
                cursor: pointer;
            }

            input[type=submit]:hover {
                background-color: #45a049;
            }

            div {
                border-radius: 5px;
                background-color: #f2f2f2;
                padding: 20px;
            }
        </style>

        <script src="http://code.jquery.com/jquery-latest.min.js"></script> //เรียกใช้งาน library javascrit

        <script type="text/javascript">
            $(document).ready(function () {
//                 $("#result").hide();
                $("#btnSend").click(function () {  //ตรวจสอบว่ามีการกดที่ปุ่มที่มี id ว่่า btnSend หรือไม
                    $.ajax({
                        type: "POST",
                        url: "test_php.php", //ไฟล์ที่ต้องการส่งค่าไป
                        data: $("#frmMain").serialize(),
                        success: function (result) {
                           var ras = result.message;  
                           $("#result").val(ras);
                        }
                          
                    });

                });

            });
        </script>

การที่จะทำให้เว็บไซต์มีความสวยงานและเป็นที่น่าสนใจสำหรับการเข้ามาใช้งานนั้น จะต้องขึ้นอยู่กับความเหมาะสมกับการทำงานของเว็บไซค์นั้นว่าเป็นเว็บไซต์เกี่ยวกับอะไร และผู้ใช้งานเป็กลุ่มแบบนั้น เพื่อจะได้ตอบสนองต่อกลุ่มผู้ใช้งานได้ถูกต้อง และเพื่อที่ผู้พัฒนาจะได้วางโครงสร้างของเว็บไซต์หรือระบบได้อย่างถูกต้อง โดยการพัฒนาเว็บไซต์หรือระบบนั้นสิ่งที่จำเป้นเลยก็คือความรู้และทักษะในการใช้งานภาษาคอมพิวเตอร์ต่างๆที่จะมาร่วมกันทำงานเพื่อให้เว็บไซต์ที่พัฒนาขึ้นมาตอบสนองความต้องการของผู้ใช้งานได้อย่างมีประสิทธิภาพ

โดยภาษาคอมพิวเตอร์ที่จะใช้งานในการพัฒนาเว็บไซต์ นั้นมีอยูู่มากมาย แต่ที่นิยมกันมาเลยก็จะมีอยู่นั้นก็คือ อย่างเช่น ถ้าหากต้องการจะทำให้มีการแสดงผลให้ผู้ใช้งานได้เห็นจะใช ภาษา html หรือถ้าหากต้องการจะปรับรูปแบบเพิ่มทสีสัน หรือตกแต่งสิ่งต่างๆบนหน้าเว็บไซต์มีความสวยงาม ดูดี ร่วมทั้งสามารถทีจะนำไปเเสดงยั่งอุปกรณ์ต่างๆ ที่มีจอแสดงต่างขนาดก็จะใช ภาษา [url=https://www.mindphp.com/คู่มือ/73-คืออะไร/2193-css-คืออะไร.html]css[/url] ช่วย และหากเป็นการจัดการข้อมูลนั้นหรือระบบการงานเบื่องหลังนันก็จะมีภาษาคอมพิวให้เลือกมากมาย ทั้ง php python และอีกหลายๆ
และถ้าหากต้องการที่จะสร้างลูกเล่น เพื่อเพิ่มความสนใจและอำนวยความความสะดวกกับผู้ใช้งานนั้น นั้นก็จะใช้ [url=https://www.mindphp.com/คู่มือ/73-คืออะไร/2187-java-javascript-คืออะไร.html]javascript[/url] [url=https://www.mindphp.com/บทเรียนออนไลน์/สอน-jquery/2776-บทที่-1-jquery-คืออะไร.html]jquery[/url] มาใช้ในการพัฒนา

ตัวอย่างโคด html
[code]
<div>
<form action="" name="frmMain" id="frmMain" method="post">
<label for="fname"> กรอกตัวเลข </label>
<input type="text" id="fname" name="firstname" placeholder="กรอกตัวเลข">
<label for="country">แปลงเป็น : </label>
<select id="country" name="country">
<option value="decbin">เลขฐาน 2 </option>
<option value="decoct">เลขฐาน 8 </option>
<option value="dechex">เลขฐาน 16</option>
</select>
<input type="text" id="result" name="" value="00">
<input type="submit" id="btnSend" value="Submit">
</form>
</div>

[/code]

ตัวอย่างโคด css
[code]
<style>
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}

input[type=submit] {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}

input[type=submit]:hover {
background-color: #45a049;
}

div {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
</style>
[/code]

ตัวอย่างโคด jQuery
[code]
<script src="http://code.jquery.com/jquery-latest.min.js"></script> //เรียกใช้งาน library javascrit

<script type="text/javascript">
$(document).ready(function () {
// $("#result").hide();
$("#btnSend").click(function () { //ตรวจสอบว่ามีการกดที่ปุ่มที่มี id ว่่า btnSend หรือไม
$.ajax({
type: "POST",
url: "test_php.php", //ไฟล์ที่ต้องการส่งค่าไป
data: $("#frmMain").serialize(),
success: function (result) {
var ras = result.message;
$("#result").val(ras);
}

});

});

});
</script>

[/code]

ผลลัพธ์ที่ได้

[attachment=0]ezgif.com-video-to-gif (12).gif[/attachment]

บทความที่เกี่ยวข้อง
[url=https://www.mindphp.com/forums/viewtopic.php?f=78&t=61978] การใส่ค่าในช่อง input ด้วย javascript เพื่อจะได้มีค่าอยู่ใน textbox[/url]
[url=https://www.mindphp.com/forums/viewtopic.php?f=73&t=62072]ทำเอฟเฟค ตอนกดปุ่ม[/url]
[url=https://www.mindphp.com/forums/viewtopic.php?f=74&t=49883]คำสั่งจัดการฐานข้อมูล MySQL[/url]