Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,037

HOME > PHP > PHP Forum > Java Script การเพิ่ม TextBox มี Button สำหรับเพิ่มจำนวน TextBox คือหากต้องการเพิ่ม TextBox

Java Script การเพิ่ม TextBox มี Button สำหรับเพิ่มจำนวน TextBox คือหากต้องการเพิ่ม TextBox

เริ่มหัวข้อใหม่

Guest

มี Button สำหรับเพิ่มจำนวน TextBox คือหากต้องการเพิ่ม TextBox ก็คลิกปุ่ม "เพิ่ม"
หากต้องการลบ TextBox ที่เพิ่มออก ก็ให้คลิก checkbox ที่เพิ่มพร้อมกับ TextBox แล้วคลิกปุ่ม "ลบ"

ประมาณนี้แหละครับ พอจะมีตัวอย่างไหมครับ

หรือมีวิธีแนะนำการเพิ่มข้อมูลไหมครับ เช่น
จะเพิ่มข้อมูล "มูลนิธิ" ซึ่ง 1 มูลนิธิ เป็นได้หลายประเภท จะออกแบบฟอร์การเพิ่มข้อมูลยังไงครับ

พอจะเข้าใจไหมครับ

Tag : - - - -

Date : 24 ม.ค. 2548 11:26:28

By : tum024

View : 28544

Reply : 22

No. 1

Guest

Select

Date : 24 ม.ค. 2548 15:17:53

By : shakid

No. 2

TC Admin

โพสกระทู้ ( 74,058 )
บทความ ( 838 )

Code

<html>
<head>
<title>ThaiCreate.Com Ajax Tutorial</title>
</head>
<script language="javascript">
function fncCreateElement(){

var mySpan = document.getElementById('mySpan');

var myElement1 = document.createElement('<input type="text" name="txt[]">');
myElement1.setAttribute('id',"txt1");
mySpan.appendChild(myElement1);

//*** Remove Element ***//
/*
var deleteEle = document.getElementById('txt1');
mySpan.removeChild(deleteEle);
*/

var myElement2 = document.createElement('<br>');
mySpan.appendChild(myElement2);
}
</script>
<body>
<span id="mySpan"></span>
<input name="btnButton" id="btnButton" type="button" value="Create" onClick="JavaScript:fncCreateElement();">
</body>
</html>

https://www.thaicreate.com/php/php-html-multi-input-text-field.html

วันนี้ใจดีเขียนให้อีกแล้วครับ

Code (JavaScript)

<html>
<head>
<title>ThaiCreate.Com JavaScript Add/Remove Element</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<script language="javascript">
	function CreateNewRow()
	{
		var intLine = parseInt(document.frmMain.hdnMaxLine.value);
		intLine++;
			
		var theTable = document.all.tbExp
		var newRow = theTable.insertRow(theTable.rows.length)
		newRow.id = newRow.uniqueID
		
		var item1 = 1
		var newCell
		
		//*** Column 1 ***//
		newCell = newRow.insertCell(0)
		newCell.id = newCell.uniqueID
		newCell.setAttribute("className", "css-name");
		newCell.innerHTML = "<center><INPUT TYPE=\"TEXT\" SIZE=\"5\" NAME=\"Column1_"+intLine+"\" VALUE=\"\"></center>"

		//*** Column 2 ***//
		newCell = newRow.insertCell(1)
		newCell.id = newCell.uniqueID
		newCell.setAttribute("className", "css-name");
		newCell.innerHTML = "<center><INPUT TYPE=\"TEXT\" SIZE=\"5\" NAME=\"Column2_"+intLine+"\" VALUE=\"\"></center>"		
		
		//*** Column 3 ***//
		newCell = newRow.insertCell(2)
		newCell.id = newCell.uniqueID
		newCell.setAttribute("className", "css-name");
		newCell.innerHTML = "<center><INPUT TYPE=\"TEXT\" SIZE=\"5\" NAME=\"Column3_"+intLine+"\" VALUE=\"\"></center>"				
		
		//*** Column 4 ***//
		newCell = newRow.insertCell(3)
		newCell.id = newCell.uniqueID
		newCell.setAttribute("className", "css-name");
		newCell.innerHTML = "<center><INPUT TYPE=\"TEXT\" SIZE=\"5\" NAME=\"Column4_"+intLine+"\" VALUE=\"\"></center>"		
		
		//*** Column 5 ***//
		newCell = newRow.insertCell(4)
		newCell.id = newCell.uniqueID
		newCell.setAttribute("className", "css-name");
		newCell.innerHTML = "<center><INPUT TYPE=\"TEXT\" SIZE=\"5\" NAME=\"Column5_"+intLine+"\" VALUE=\"\"></center>"			
		
		document.frmMain.hdnMaxLine.value = intLine;
	}
	
	function RemoveRow()
	{
		intLine = parseInt(document.frmMain.hdnMaxLine.value);
		if(parseInt(intLine) > 0)
		{
				theTable = (document.all) ? document.all.tbExp : 
				document.getElementById("tbExp")
				theTableBody = theTable.tBodies[0];
				theTableBody.deleteRow(intLine);
				intLine--;
				document.frmMain.hdnMaxLine.value = intLine;
		}	
	}	
</script>
<body>
<form name="frmMain" method="post">
<table width="445" border="1" id="tbExp">
  <tr>
    <td><div align="center">Column 1 </div></td>
    <td><div align="center">Column 2 </div></td>
    <td><div align="center">Column 3 </div></td>
    <td><div align="center">Column 4 </div></td>
    <td><div align="center">Column 5 </div></td>
  </tr>
</table>
<input type="hidden" name="hdnMaxLine" value="0">
<input name="btnAdd" type="button" id="btnAdd" value="+" onClick="CreateNewRow();">
<input name="btnDel" type="button" id="btnDel" value="-" onClick="RemoveRow();">
</form>
</body>
</html>

Screenshot

JavaScript Add/Remove Element

Date : 2009-04-26 09:13:47

By : webmaster

No. 3

Guest

Date : 2010-10-26 19:22:15

By : เจ้าชายนิรนาม

No. 4

noo

โพสกระทู้ ( 7 )
บทความ ( 0 )

มีตัวที่ใช้กับ firefoxได้มั้ยคะ

Date : 2011-10-27 11:05:22

By : goigy

No. 5

Guest

แล้วเวลาจะเอาค่าที่กรอก ไปแอด ลง ฐานข้อมูล ทำไงครับ เอาค่าไหนไปใช้บ้างครับ

Date : 2011-11-11 16:11:32

By : pongit50

No. 6

NOOM

โพสกระทู้ ( 314 )
บทความ ( 0 )

สังเกตดูตรง element ทุกตัวจะถูกใส่ name ที่แตกต่างกันทุกครั้งที่ create เพราะฉะนั้นเราสามารถอ้าง name ของ element ต่างๆได้ครับ
เราก็แค่ loop เอา value ของทุกๆ element มาใช้งานเท่านั้นครับ....

สังเกตที่

Code (PHP)

newCell.innerHTML = ...............................

Date : 2011-11-11 16:20:04

By : Songkram

No. 7

Guest

คุณคนที่สองค่ะ ขอคำสั่ง sql ที่ใช้ในการ insert ข้อมุลลงฐานด้วยค่ะ

Date : 2011-12-15 15:46:53

By : soon

No. 8

TC Admin

โพสกระทู้ ( 74,058 )
บทความ ( 838 )

Quote:
คุณคนที่สองค่ะ ขอคำสั่ง sql ที่ใช้ในการ insert ข้อมุลลงฐานด้วยค่ะ

ตัวอย่างนี้ครับ

Code (PHP)

	<?
		mysql_connect("localhost","root","root") or die (mysql_error());
		mysql_select_db("mydatabase");

		for($i=1;$i<=(int)($_POST["hdnLine"]);$i++)
		{
			if($_FILES["fileUpload".$i]["name"] != "")
			{
				if(move_uploaded_file($_FILES["fileUpload".$i]["tmp_name"],"thaicreate/".$_FILES["fileUpload".$i]["name"]))
				{
					$strSQL = "INSERT INTO gallery ";
					$strSQL .="(GalleryName,Picture) VALUES ('".$_POST["txtGalleryName".$i]."','".$_FILES["fileUpload".$i]["name"]."')";
					mysql_query($strSQL);
					echo "Copy/Upload ".$_FILES["fileUpload".$i]["name"]." completed.<br>";
				}
			}
		}

		echo "<br><a href='php_multiple_upload6.php'>View file</a>";

		mysql_close();
	?>

Go to : PHP MySQL Upload File to MySQL Database - Multiple Dynamic CreateElement Input File Upload

Date : 2011-12-15 15:57:25

By : webmaster

No. 9

Guest

ขอบคุณค่ะ Mr Win จะลองทำดู น่ะค่ะ

Date : 2011-12-15 16:52:32

By : soon

No. 10

Guest

ไม่ได้อ่ะค่ะ เออตัวไหนคือตัวแปรที่รับค่า แล้วตัวไหนคือตัวแปรที่เก็บลงฐานข้อมูลค่ะ

Date : 2011-12-15 17:42:35

By : หหห

No. 11

noProblem

โพสกระทู้ ( 126 )
บทความ ( 0 )

Date : 2012-01-14 16:03:12

By : eii-mian

No. 12

TC Admin

โพสกระทู้ ( 74,058 )
บทความ ( 838 )

Quote:
ไม่ได้อ่ะค่ะ เออตัวไหนคือตัวแปรที่รับค่า แล้วตัวไหนคือตัวแปรที่เก็บลงฐานข้อมูลค่ะ

Code (PHP)

<?
	mysql_connect("localhost","root","root") or die (mysql_error());
	mysql_select_db("mydatabase");

	for($i=1;$i<=(int)($_POST["hdnLine"]);$i++)
	{
		if($_FILES["fileUpload".$i]["name"] != "")
		{
			if(move_uploaded_file($_FILES["fileUpload".$i]["tmp_name"],"thaicreate/".$_FILES["fileUpload".$i]["name"]))
			{
				$strSQL = "INSERT INTO gallery ";
				$strSQL .="(GalleryName,Picture) VALUES ('".$_POST["txtGalleryName".$i]."','".$_FILES["fileUpload".$i]["name"]."')";
				mysql_query($strSQL);
				echo "Copy/Upload ".$_FILES["fileUpload".$i]["name"]." completed.<br>";
			}
		}
	}

	echo "<br><a href='php_multiple_upload6.php'>View file</a>";

	mysql_close();
?>

Date : 2012-01-14 16:43:08

By : webmaster

No. 13

Guest

แล้วแบบ ให้ค่า textbox ที่เพิ่มมา ที่เรากรอกแล้ว ให้มันลงฐานข้อมูล อะคาบต้องแก้ตรงไหนหรอคาบ

Date : 2012-01-23 23:49:11

By : pangkung

No. 14

Guest

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

Date : 2013-07-16 23:35:13

By : ผู้ผ่านทาง

No. 15

Realiku

โพสกระทู้ ( 7 )
บทความ ( 0 )

ถ้าต้องการเลือกแถวที่ต้องการลบ โดยไม่ต้องลบตามลำดับ เช่น ต้องการลบแถวที่สาม ต้องเขียนโค้ดยังไงครับ

Date : 2014-03-19 15:26:13

By : Realiku

No. 16

Mr.กล้า

โพสกระทู้ ( 5,105 )
บทความ ( 4 )

จากที่ผมเคยถามไว้ ที่ https://www.thaicreate.com/php/forum/106539.html ลองเอาไปศึกษาก่อนครับ

Date : 2014-03-19 18:11:21

By : apisitp

No. 17

Realiku

โพสกระทู้ ( 7 )
บทความ ( 0 )

ขอบุณครับ

Date : 2014-03-19 20:15:13

By : Realiku

No. 18

doflamingoko

โพสกระทู้ ( 0 )
บทความ ( 0 )

ลองศึกษาดูแล้วครับ

ยังลบไม่ตรงตามแถวที่เราเลือกครับ

Date : 2014-03-20 12:26:47

By : doflamingoko

No. 19

Unidentifier

โพสกระทู้ ( 3,156 )
บทความ ( 0 )

ตอนนี้แก้ไขโค้ดถึงไหนแล้ว เอามาวางให้ดูหน่อยครับ

Date : 2014-03-20 12:31:27

By : sakuraei

No. 20

Mr.กล้า

โพสกระทู้ ( 5,105 )
บทความ ( 4 )

จากกระทู้นั้น มันยังมีอะไรเพิ่มมาอีกนิดหน่อย แต่ผมขี้เกียจตัด Code มาโพสต์ เหอะ ๆ ... ถ้าไม่ได้จริงค่อยว่ากัน

Date : 2014-03-20 13:48:40

By : apisitp

No. 21

Unidentifier

โพสกระทู้ ( 3,156 )
บทความ ( 0 )

ครับ.. ตอนนี้ผมไม่รู้แล้ว ว่าใครเป็นคนถาม หรือใครติดตรงไหนอยู่ล่ะครับ

ถ้ามีเวลาก็จะแวะมาดูเป็นพักๆครับ

Date : 2014-03-20 14:40:29

By : sakuraei

No. 22

jame

โพสกระทู้ ( 92 )
บทความ ( 0 )

ถ้าต้องการเพิ่มที่ละ 3แถว ขั้นไปละครับต้องแก้สวนไหน
Code (PHP)

<html>
<head>
<title>ThaiCreate.Com JavaScript Add/Remove Element</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<script language="javascript">
	function CreateNewRow()
	{
		var intLine = parseInt(document.frmMain.hdnMaxLine.value);
		intLine++;
			
		var theTable = document.all.tbExp
		var newRow = theTable.insertRow(theTable.rows.length)
		newRow.id = newRow.uniqueID
		
		var item1 = 1
		var newCell
		
		//*** Column 1 ***//
		newCell = newRow.insertCell(0)
		newCell.id = newCell.uniqueID
		newCell.setAttribute("className", "css-name");
		newCell.innerHTML = "<center><INPUT TYPE=\"TEXT\" SIZE=\"5\" NAME=\"Column1_"+intLine+"\" VALUE=\"\"></center>"

		//*** Column 2 ***//
		newCell = newRow.insertCell(1)
		newCell.id = newCell.uniqueID
		newCell.setAttribute("className", "css-name");
		newCell.innerHTML = "<center><INPUT TYPE=\"TEXT\" SIZE=\"5\" NAME=\"Column2_"+intLine+"\" VALUE=\"\"></center>"		
		
		//*** Column 3 ***//
		newCell = newRow.insertCell(2)
		newCell.id = newCell.uniqueID
		newCell.setAttribute("className", "css-name");
		newCell.innerHTML = "<center><INPUT TYPE=\"TEXT\" SIZE=\"5\" NAME=\"Column3_"+intLine+"\" VALUE=\"\"></center>"				
		
		//*** Column 4 ***//
		newCell = newRow.insertCell(3)
		newCell.id = newCell.uniqueID
		newCell.setAttribute("className", "css-name");
		newCell.innerHTML = "<center><INPUT TYPE=\"TEXT\" SIZE=\"5\" NAME=\"Column4_"+intLine+"\" VALUE=\"\"></center>"		
		
		//*** Column 5 ***//
		newCell = newRow.insertCell(4)
		newCell.id = newCell.uniqueID
		newCell.setAttribute("className", "css-name");
		newCell.innerHTML = "<center><INPUT TYPE=\"TEXT\" SIZE=\"5\" NAME=\"Column5_"+intLine+"\" VALUE=\"\"></center>"			
		
		document.frmMain.hdnMaxLine.value = intLine;
	}
	
	function RemoveRow()
	{
		intLine = parseInt(document.frmMain.hdnMaxLine.value);
		if(parseInt(intLine) > 0)
		{
				theTable = (document.all) ? document.all.tbExp : 
				document.getElementById("tbExp")
				theTableBody = theTable.tBodies[0];
				theTableBody.deleteRow(intLine);
				intLine--;
				document.frmMain.hdnMaxLine.value = intLine;
		}	
	}	
</script>
<body>
<form name="frmMain" method="post">
<table width="445" border="1" id="tbExp">
  <tr>
    <td><div align="center">Column 1 </div></td>
    <td><div align="center">Column 2 </div></td>
    <td><div align="center">Column 3 </div></td>
    <td><div align="center">Column 4 </div></td>
    <td><div align="center">Column 5 </div></td>
  </tr>
</table>
<input type="hidden" name="hdnMaxLine" value="0">
<input name="btnAdd" type="button" id="btnAdd" value="+" onClick="CreateNewRow();">
<input name="btnDel" type="button" id="btnDel" value="-" onClick="RemoveRow();">
</form>
</body>
</html>

ประวัติการแก้ไข
2016-08-25 12:03:25

Date : 2016-08-25 12:00:45

By : fzjameza

ค้นหาข้อมูล

แสดงความคิดเห็น

Re : Java Script การเพิ่ม TextBox มี Button สำหรับเพิ่มจำนวน TextBox คือหากต้องการเพิ่ม TextBox

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก

<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)

Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 00

Registered : 109,037

document.write("<font color=996600>[PHP]</font>"); Java Script การเพิ่ม TextBox มี Button สำหรับเพิ่มจำนวน TextBox คือหากต้องการเพิ่ม TextBox

No. 1

No. 2

No. 3

No. 4

No. 5

No. 6

No. 7

No. 8

No. 9

No. 10

No. 11

No. 12

No. 13

No. 14

No. 15

No. 16

No. 17

No. 18

No. 19

No. 20

No. 21

No. 22

ค้นหาข้อมูล

อัพโหลดแทรกรูปภาพ

Notice

Java Script การเพิ่ม TextBox มี Button สำหรับเพิ่มจำนวน TextBox คือหากต้องการเพิ่ม TextBox