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

 <input type="text" class="quantity-input js-recalculate" value="1" id="nuberproduct" onchange="setQtyProduct()">

<?php
$document = JFactory::getDocument();
      $document->addScriptDeclaration('
      function setQtyProduct(){
        var qty=document.getElementById("nuberproduct").value;
        document.getElementById("shownuberproduct").innerHTML=qty;
      }')
?>

<div>
<span>Quantity :
<div id="shownuberproduct">1</div>
</span>
</div>

หลายคนก็คงจำจะเคยทำ popup เพื่อให้แสดงอะไรบ้างอย่างออกมาให้ผู้ใช้ได้เห็นกันมาบ้างแล้วนะครับแต่ว่าถ้าจะสรุปสินค้าซึ่งตัวเลขที่จะขึ้นมาแสดงหน้า popup นั้นเราไม่สามารถกำหนดได้เพราะตัวเลขที่ต้องขึ้นมาแสดงจะเป็นตัวเลขที่ผู้ใช้กรอกลงไปในช่องนั้นเองเช่นจำนวนสินค้าที่ต้องการซื้อถ้าต้องการซื้อ 10 ชิ้นหน้าสรุปสินค้าที่เป็น popup ก็ต้องแสดงตัวเลข 10 ออกมาในบทความนี้จึงจะมาสอนวิธีที่จะให้ตัวเลขที่ผู้ใช้กรอกขึ้นไปแสดงที่ popup ได้โดยใช้ [url=https://www.mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/2187-java-javascript-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3.html]JavaScript[/url] กันจะเป็นอย่างไรเราลองไปดูกันเลย

เมือมีผู้ใช้กรอกจำนวนตรงนี้

[attachment=1]Selection_999(1058).png[/attachment]

popup ก็จะเข้าข้อมูลในช่องนั้นออกมาแสดง

[attachment=0]Selection_999(1059).png[/attachment]

อันดับแรกให้เราไปสร้าง id ในช่อง input ก่อน
[code] <input type="text" class="quantity-input js-recalculate" value="1" id="nuberproduct" onchange="setQtyProduct()">[/code]
จากโค้ดก็จะเห็นได้ว่า id จะมีชือว่า nuberproduct

จากนั้นเราก็จะมาเขียน function แบบนี้
[code]
<?php
$document = JFactory::getDocument();
$document->addScriptDeclaration('
function setQtyProduct(){
var qty=document.getElementById("nuberproduct").value;
document.getElementById("shownuberproduct").innerHTML=qty;
}')
?>
[/code]

จากโค้ดก็จะเห็นได้ว่าการเรียกใช้ JavaScript ใน joomla จะมีความแตกต่างกันอยู่นิดหน่อยแต่การเขียน function ก็ยังเหมือนเดิมโดยจะเห็นได้ว่าเราสร้างตัวแปลที่จะเก็บข้อมูลขึ้นมาหนึ่งตัวชื่อว่า qty โดยค่านั้นก็จะได้มาจากคำสั่ง getElementById และ id นั้นด็คือ id ของช่องที่กรอกตัวเลขนั้นเองบรรทต่อมาก็จะเป็นการสร้าง id ใหม่ขึ้นมาเพื่อจะได้แสดงค่าในตัวแปล qty นั้นเองโดยเราจะเห็นได้ว่า id นั้นก็คือ shownuberproduct นั้นเอง

ต่อมาเราก็จะนำ id ที่ชือว่า shownuberproduct ออกไปแสดงแบบนี้
[code]
<div>
<span>Quantity :
<div id="shownuberproduct">1</div>
</span>
</div>
[/code]

ก็จะเห็นได้ว่าแค่เราใส่ id ไว้ในแท็ก div ก็จะสามารถแสดงค่าที่ผู้ใช้กรอกเข้ามาได้แล้ว



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