วิธีการทำให้แสดงตัวเลขที่ผู้ใช้กรอกที่หน้า popup โดยใช้ JavaScript ใน joomla

แชร์ ความรู้ในการ พัฒนา Joomla Component Extension Module Plugin

Moderators: mindphp, ผู้ดูแลกระดาน

User avatar
jamepiyawat
PHP VIP Members
PHP VIP Members
Posts: 1340
Joined: 21/05/2019 10:45 am

วิธีการทำให้แสดงตัวเลขที่ผู้ใช้กรอกที่หน้า popup โดยใช้ JavaScript ใน joomla

Post by jamepiyawat » 28/09/2019 5:06 pm

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

เมือมีผู้ใช้กรอกจำนวนตรงนี้
Selection_999(1058).png
popup ก็จะเข้าข้อมูลในช่องนั้นออกมาแสดง
Selection_999(1059).png
Selection_999(1059).png (73.83 KiB) Viewed 252 times
อันดับแรกให้เราไปสร้าง id ในช่อง input ก่อน

Code: Select all

 <input type="text" class="quantity-input js-recalculate" value="1" id="nuberproduct" onchange="setQtyProduct()">
จากโค้ดก็จะเห็นได้ว่า id จะมีชือว่า nuberproduct

จากนั้นเราก็จะมาเขียน function แบบนี้

Code: Select all

<?php
$document = JFactory::getDocument();
      $document->addScriptDeclaration('
      function setQtyProduct(){
        var qty=document.getElementById("nuberproduct").value;
        document.getElementById("shownuberproduct").innerHTML=qty;
      }')
?>
จากโค้ดก็จะเห็นได้ว่าการเรียกใช้ JavaScript ใน joomla จะมีความแตกต่างกันอยู่นิดหน่อยแต่การเขียน function ก็ยังเหมือนเดิมโดยจะเห็นได้ว่าเราสร้างตัวแปลที่จะเก็บข้อมูลขึ้นมาหนึ่งตัวชื่อว่า qty โดยค่านั้นก็จะได้มาจากคำสั่ง getElementById และ id นั้นด็คือ id ของช่องที่กรอกตัวเลขนั้นเองบรรทต่อมาก็จะเป็นการสร้าง id ใหม่ขึ้นมาเพื่อจะได้แสดงค่าในตัวแปล qty นั้นเองโดยเราจะเห็นได้ว่า id นั้นก็คือ shownuberproduct นั้นเอง

ต่อมาเราก็จะนำ id ที่ชือว่า shownuberproduct ออกไปแสดงแบบนี้

Code: Select all

<div>
<span>Quantity :
<div id="shownuberproduct">1</div>
</span>
</div>
ก็จะเห็นได้ว่าแค่เราใส่ id ไว้ในแท็ก div ก็จะสามารถแสดงค่าที่ผู้ใช้กรอกเข้ามาได้แล้ว



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

  • Similar Topics
    Replies
    Views
    Last post

Return to “Joomla Developing Knowledge”

Who is online

Users browsing this forum: No registered users and 3 guests