Question (html) ใน tag <img> สามารถส่งข้อความไปให้ textbox ไ

HTML Basic
สำหรับนักพัฒนาเว็บไซต์มือใหม่ HTML , CSS และการใช้ Tools ต่างๆ ในการพัฒนาเว็บไซต์

Moderator: mindphp

User avatar
mekhong
PHP Full Member
PHP Full Member
Posts: 33
Joined: 01/01/1970 7:00 am

Question (html) ใน tag <img> สามารถส่งข้อความไปให้ textbox ไ

Post by mekhong » 07/10/2009 8:54 pm

ผมทำปุ่มมีตัวเลข เป็นรูปภาพ .gif ครับ โดยเอามาต่อกันใน table ผมพอรู้ว่าใน tag <img> มันใส่ Event onClick="" ได้เลย ผมต้องการ ให้ผู้ใช้คลิ๊กที่รูปแล้วไปปรากฏตัวเลขที่ textbox ครับ ต่อๆกันไปครับ ตรงนี้ผมต้องทำยังไงเหรอครับ ยังงงกับ พร็อบเพอร์ตี้ name="" และ action="" ครับ

ผมไปอ่านพวก Javascript ก็คิดจะทำ array มาเก็บ ก็ไม่จำเป็นขนาดนั้น(ต้องศึกษาใหม่เลยไม่มีเบสิคเลยครับ T.T)มัน Fix อยู่แล้วรูปนั้นก็เลขนั้นเลยครับ จะให้รูปพวกนั้น 0-9 ส่งค่าไปให้ textbox ยังไงเหรอครับ หรือผมต้องไปศึกษาเรื่องอะไรครับ

ขอบคุณมากครับ

User avatar
mindphp
ผู้ดูแลระบบ MindPHP
ผู้ดูแลระบบ MindPHP
Posts: 23240
Joined: 22/09/2008 6:18 pm
Contact:

Re: Question (html) ใน tag <img> สามารถส่งข้อความไปให้ textbox ไ

Post by mindphp » 09/10/2009 11:54 am

ลองกำหนด id ให้กับ tag ด้วยซิครับ แล้ว ใช้ความสามารถของ id เข้ามาช่วย
ติดตาม VDO: http://www.youtube.com/c/MindphpVideoman
ติดตาม FB: https://www.facebook.com/pages/MindphpC ... 9517401606
หมวดแชร์ความรู้: https://www.mindphp.com/forums/viewforum.php?f=29
รับอบรม และพัฒนาระบบ: https://www.mindphp.com/forums/viewtopic.php?f=6&t=2042

User avatar
mekhong
PHP Full Member
PHP Full Member
Posts: 33
Joined: 01/01/1970 7:00 am

Re: Question (html) ใน tag <img> สามารถส่งข้อความไปให้ textbox

Post by mekhong » 09/10/2009 1:52 pm

ใช้ id ได้ด้วยเหรอครับ ผมก็คิดว่า id ใช้สำหรับ CSS

คือตอนนี้ใช้ code ง่ายๆครับ

Code: Select all

<html>
<head></head>
<body>
<form name="keypad">
<input type="text" name="text"  />
<br><br>
<div >
<img src="images/7.gif" name="7" OnClick="keypad.text.value += '7'">
<img src="images/8.gif" name="8" OnClick="keypad.text.value += '8'">
<img src="images/9.gif" name="9" OnClick="keypad.text.value += '9'"/><br />
<img src="images/4.gif" name="4" OnClick="keypad.text.value += '4'"/>
<img src="images/5.gif" name="5" OnClick="keypad.text.value += '5'"/>
<img src="images/6.gif" name="6" OnClick="keypad.text.value += '6'"/><br />
<img src="images/1.gif" name="1" OnClick="keypad.text.value += '1'"/>
<img src="images/2.gif" name="2" OnClick="keypad.text.value += '2'"/>
<img src="images/3.gif" name="3" OnClick="keypad.text.value += '3'"/> <br />
<img src="images/0.gif" name="0" onClick="keypad.text.value +='0'"/>
<img src="images/textKeypad.gif"  /><br />
</div>
</form>

</body>

</html>
ก็คือเทสใช้ได้ครับ คือต้องการทำเป็น Keypad เพื่อให้คนใช้ใช้ touchscreen จิ้มครับ
แต่สุดท้ายผมต้องไปหาวิธีเขียนดักครับ มันจะมี textbox อยู่2แถว แถวแรกเป็น ID(จำกัดเลข13หลัก) แถว2(เลข4หลัก)
คืดคิดว่าต้องทำฟังชัน โดนกดแล้วส่ง พารามิทเตอร์ไปด้วย คือเลข ฟังชั่นทำการวนรูปถ้าเกิน13ไปต่อที่ textbox แถว2 ครับ ลักษณะนี้ต้องใช้ javascript หรือ php ครับตอนนี้พยายามหาตามเวบก็มีเยอะครับแต่ยังไม่ถูกต้องครับ

ขอบคุณมากครับ ผมจะลองศึกษาเรื่อง ID ของ html ดูครับ

User avatar
mindphp
ผู้ดูแลระบบ MindPHP
ผู้ดูแลระบบ MindPHP
Posts: 23240
Joined: 22/09/2008 6:18 pm
Contact:

Re: Question (html) ใน tag <img> สามารถส่งข้อความไปให้ textbox ไ

Post by mindphp » 09/10/2009 2:21 pm

เก็บ ID ใช้คู่กับ javascript ก็ได้

Code: Select all

<html>
<head>
<script type="text/javascript">
function getValue()
  {
  var x=document.getElementById("myHeader")
  alert(x.innerHTML)
  }
</script>
</head>
<body>

<h1 id="myHeader" onclick="getValue()">This is a header</h1>
<p>Click on the header to alert its value</p>

</body>
</html> 
ติดตาม VDO: http://www.youtube.com/c/MindphpVideoman
ติดตาม FB: https://www.facebook.com/pages/MindphpC ... 9517401606
หมวดแชร์ความรู้: https://www.mindphp.com/forums/viewforum.php?f=29
รับอบรม และพัฒนาระบบ: https://www.mindphp.com/forums/viewtopic.php?f=6&t=2042

User avatar
mekhong
PHP Full Member
PHP Full Member
Posts: 33
Joined: 01/01/1970 7:00 am

Re: Question (html) ใน tag <img> สามารถส่งข้อความไปให้ textbox

Post by mekhong » 09/10/2009 4:06 pm

ขอบคุณครับ ผมจะนำไปประยุกค์ดู :-D

User avatar
mekhong
PHP Full Member
PHP Full Member
Posts: 33
Joined: 01/01/1970 7:00 am

Re: Question (html) ใน tag <img> สามารถส่งข้อความไปให้ textbox ไ

Post by mekhong » 14/10/2009 10:54 am

แก้ไม่ถูกครับเป็น code คนอื่นครับ ผมไปแก้ไม่ได้หลายๆส่วนด้วยครับมันเชื่อมโยงกับข้อมูลด้วยครับ หลักการที่ผมต้องพยายามทำคือทำ รูปภาพเป็นเสมือน ปุ่มให้คนกด แล้วให้ไปใส่ใน textbox ซึ้งมันมี 2 textbox ID Password ครับ ต้องเช็คว่า กด 17 ครังแรกให้เป็น ID หลังจากนั้นให้กดอีก 4 ครับเป็น password แล้วจบไม่ให้เพิ่มต่อ

Code: Select all

//ส่วนนี้เป็น ฟังชัน ที่เวลาคนพิมพ์มาดักว่าให้ขึ้น '-' เมื่อถึงตำแหน่ง
function mask(str){
var locs = loc.split(',');
for (var i = 0; i <= locs.length; i++){
	for (var k = 0; k <= str.length; k++){
	 if (k == locs[i]){
	  if (str.substring(k, k+1) != delim){
	    str = str.substring(0,k) + delim + str.substring(k,str.length)
	  }
	 }
	}
 }
textbox.value = str
}
//html
<td width="71%"><input name="user" value="" type="text" onKeyUp="javascript:return mask(this.value,this,'1,6,12,15','-');"  style="font-family:verdana;font-size:10pt;width:145px;" maxlength="17"></td>
ผมพยายามใช้ แทรกเข้าไปก็จะขึ้นตัวเลขแค่ 1ตัวเท่านั้นกดปุ่มอื่นก็เป็นตัวใหม่เลย

Code: Select all

//html
<img src="imagesKey/7.gif" name="7" OnClick="javascript:return mask('7');">
<img src="imagesKey/8.gif" name="8" OnClick="javascript:return mask('8');">
<img src="imagesKey/9.gif" name="9" OnClick="javascript:return mask('9');"/><br />
<img src="imagesKey/4.gif" name="4" OnClick="javascript:return mask('4');"/>
<img src="imagesKey/5.gif" name="5" OnClick="javascript:return mask('5');"/>
<img src="imagesKey/6.gif" name="6" OnClick="javascript:return mask('6');"/><br />
<img src="imagesKey/1.gif" name="1" OnClick="javascript:return mask('1');"/>
<img src="imagesKey/2.gif" name="2" OnClick="javascript:return mask('2');"/>
<img src="imagesKey/3.gif" name="3" OnClick="javascript:return mask('3');"/> <br />
<img src="imagesKey/0.gif" name="0" onClick="javascript:return mask('0');"/>
<img src="imagesKey/textKeypad.gif"  /><br />
ถ้าผมใช้ เป็น รูปปุ่ม 2ชุดแบบนี้ได้ครับ แต่ว่าจะไม่มี '-' ขั้นไม่รู้ว่าตอนส่งข้อมูลไปมันจะผิดผลาดครับ อีกไฟล์หนึ่งก็ดักจับ '-' ด้วย

Code: Select all

<img src="images/7.gif" name="7" OnClick="document.login_form.user.value += '7'">
<img src="images/8.gif" name="8" OnClick="document.login_form.user.value += '8'">
<img src="images/9.gif" name="9" OnClick="document.login_form.user.value += '9'"/><br />
<img src="images/4.gif" name="4" OnClick="document.login_form.user.value += '4'"/>
<img src="images/5.gif" name="5" OnClick="document.login_form.user.value += '5'"/>
<img src="images/6.gif" name="6" OnClick="document.login_form.user.value += '6'"/><br />
<img src="images/1.gif" name="1" OnClick="document.login_form.user.value += '1'"/>
<img src="images/2.gif" name="2" OnClick="document.login_form.user.value += '2'"/>
<img src="images/3.gif" name="3" OnClick="document.login_form.user.value += '3'"/> <br />
<img src="images/0.gif" name="0" onClick="document.login_form.user.value +='0'"/>
<img src="images/textKeypad.gif"  /><br />

<img src="images/7.gif" name="7" OnClick="document.login_form.passwd.value.value += '7'">
<img src="images/8.gif" name="8" OnClick="document.login_form.passwd.value.value += '8'">
<img src="images/9.gif" name="9" OnClick="document.login_form.passwd.value.value += '9'"/><br />
<img src="images/4.gif" name="4" OnClick="document.login_form.passwd.value.value += '4'"/>
<img src="images/5.gif" name="5" OnClick="document.login_form.passwd.value.value += '5'"/>
<img src="images/6.gif" name="6" OnClick="document.login_form.passwd.value.value += '6'"/><br />
<img src="images/1.gif" name="1" OnClick="document.login_form.passwd.value.value += '1'"/>
<img src="images/2.gif" name="2" OnClick="document.login_form.passwd.value.value += '2'"/>
<img src="images/3.gif" name="3" OnClick="document.login_form.passwd.value.value += '3'"/> <br />
<img src="images/0.gif" name="0" onClick="document.login_form.passwd.value +='0'"/>
<img src="images/textKeypad.gif"  /><br />
ผมลองเขียน function ออกมาต่างหากครับแต่ไม่มีผลอะไรเกิดขึ้นเลย

Code: Select all

function key(num)
{
  var userLen = document.login_form.user.length;
  var passLen = document.login_form.passwd.length;
 var locs = new Array('1','6','12','15'); //<---ไม่รู้จะดักยังไงครับ ให้ใส่ '-'

  if(userLen <= 17)
  {
    document.login_form.user.value += num;

  }
  else if(userLen >17 && passLen<=4)
    {
       document.login_form.passwd.value +=num;
    }
    else
    {
      alert("Error");
    }
}
ผมไม่เข้าใจหลักการคิดเท่าไรเลยครับ สงสัยไปทางนี้ไม่ไหว T.T


User avatar
mekhong
PHP Full Member
PHP Full Member
Posts: 33
Joined: 01/01/1970 7:00 am

Re: Question (html) ใน tag <img> สามารถส่งข้อความไปให้ textbox ไ

Post by mekhong » 15/10/2009 8:57 am

ขอบคุณครับ :biggrin:

Post Reply
  • Similar Topics
    Replies
    Views
    Last post

Return to “HTML CSS”

Who is online

Users browsing this forum: No registered users and 6 guests