ورود

View Full Version : اضافه نمودن textbox و Button با آژاکس


tanha2007
جمعه 01 شهریور 1387, 19:56 عصر
سلام.

من میخواستم بدونم چگونه میشود با استفاده از AJAX میشود که textbox و button اضافه نمود؟

فرض نمایید، من یک فرم دارم که مشخصات کتاب را از کاربر میگیرد و بصورت پیش فرض یک textbox برای نویسنده اون کتاب موجود است، و اگر اون کتاب دارای چندین نویسنده باشد بعدا اون جا یک button قرار دارد که زمانیکه روی اون کلیک میشود در زیر اون textbox اولی یک textbox دیگر با یک button اضافه گردد و وظیفه این button این است که اگر کلیک شود باید این button با textbox دوباره حذف گردد. و با هربار کلیک روی دکمه پیش فرض من میخوام که یک button با textbox در زیر اون به ترتیب اضافه گردد.
Lagon666
جمعه 01 شهریور 1387, 21:29 عصر
یه چیزایی دارم میگیرم. خیلی پیچوندی مارو. اما فکر کنم منظورت یه چیزی مثل دکمه ی + و - توی این لینک (http://freeupload.110mb.com/matrix.php) باشه.

اگه نتونستی کدشو برداری بگو تا برات بزنم.
sama01
جمعه 01 شهریور 1387, 21:52 عصر
این سوال هیچ ربطی به php نداره. گذشته از اینکه می‌شه با ajax انجامش داد، ولی حتی می‌شه تنها سمت کاربر و با javaScript هم به نتیجه رسید.
لطفا ادامه‌ی بحث را در محل مناسب ادامه دهید.
tanha2007
جمعه 01 شهریور 1387, 22:14 عصر
من میدونم که این بحث به php مربوط نمیشه، ولی امکان که راجستر اطلاعات این فرم به PHP مربوط شود. خوب من بهتر دیدم که این را این جا بنویسم.
اگر مشکلی است من اینرا در قسمت جاوا اسکریپت دنبال میکنم.
tanha2007
جمعه 01 شهریور 1387, 22:21 عصر
تشکر دوست عزیز.
بلی منظورم همین است. ولی من مشکلی که دارم این است که چگونه این عناصر که اضافه میگردند بعد از آن قرار گیرند، نه در آخر جدول.




<html>
<head>
<title>By AJAX</title>

<script type="text/javascript">
var my_row = null;

function addElement()
{


var row = document.createElement("TR");

var tbl = document.getElementById("tblView");

row.setAttribute("id","tr12");

var td1 = document.createElement("TD");
td1.innerHTML = "Author Name:";

var td2 = document.createElement("TD");
td2.innerHTML = "<input name='authorName' type='text' id='authorName' size='60'>";

var td3 = document.createElement("TD");
td3.innerHTML = "<input type='button' name='cmdDelete' value='Remove' />";

row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);

//tbl.appendChild(row);


my_row = document.getElementById("my_row");
document.body.insertBefore(tbl.appendChild(row), my_row);
}

</script>
</head>

<body>
<form name="form1" method="post" action="">
<table width="50%" border="0" cellpadding="3" id="tblView">
<tr>
<td>Book Name: </td>
<td>
<input name="txtBookName" type="text" id="txtBookName" size="60">
</td>
</tr>
<tr>
<td>Book Title: </td>
<td>
<input name="txtBookTitle" type="text" id="txtBookTitle" size="80">
</td>
</tr>
<tr id="my_row">
<td>Author Name: </td>
<td>
<input name="authorName" type="text" id="authorName" size="60">
<input name="cmdAddMore" type="button" id="cmdAddMore" value="More Author" onClick="addElement()" />
</td>
</tr>
<tr>
<td>Book Subject </td>
<td>
<select name="selectSubject">
<option value="Programming">Programming</option>
<option value="Database">Database</option>
<option value="Web-Design">Web-Design</option>
<option value="Math">Math</option>
<option value="Business">Business</option>
<option value="Management">Management</option>
</select>
</td>
</tr>
<tr>
<td>Book Shelf: </td>
<td>
<input name="txtBookShelf" type="text" id="txtBookShelf">
</td>
</tr>
<tr>
<td>
<input name="cmdSaveBook" type="submit" id="cmdSaveBook" value="Save Book">
</td>
<td>&nbsp;</td>
</tr>
</table>
</form>
</body>
</html>


خوب اگر کمک کنید نظر لطف شماست.


یه چیزایی دارم میگیرم. خیلی پیچوندی مارو. اما فکر کنم منظورت یه چیزی مثل دکمه ی + و - توی این لینک (http://freeupload.110mb.com/matrix.php) باشه.

اگه نتونستی کدشو برداری بگو تا برات بزنم.
Lagon666
شنبه 02 شهریور 1387, 08:31 صبح
من زیاد جاوا اسکریپتم خوب نیست. از تابع addElement تو هیچی سر در نیووردم. اما طبق همون صفحه ای که معرفی کردم تونستم یه چیزایی بنویسم.



<html>
<head>
<title>By AJAX</title>

<script type="text/javascript">
var num = 2;
function addField() {
var label = document.createElement('label');
label.setAttribute('id', 'field' + num);
label.innerHTML = '<input type="text" size="60" name="' + num + 'authorName">&nbsp;<button onclick="removeField(\'field\' + (num - 1));">Remove</button><br>';
document.getElementById('hamid').appendChild(label );
num++;
}
function removeField(aId) {
if(num > 2){
var obj = document.getElementById(aId);
obj.parentNode.removeChild(obj);
num--;
}
}
</script>
</head>

<body>
<form name="form1" method="post" action="">
<table width="50%" border="0" cellpadding="3" id="tblView">
<tr>
<td>Book Name: </td>
<td>
<input name="txtBookName" type="text" id="txtBookName" size="60">
</td>
</tr>
<tr>
<td>Book Title: </td>
<td>
<input name="txtBookTitle" type="text" id="txtBookTitle" size="80">
</td>
</tr>
<tr id="my_row">
<td valign="top">Author Name: </td>
<td><div id="hamid">
<input name="authorName" type="text" id="authorName1" size="60">
<input name="cmdAddMore" type="button" id="cmdAddMore" value="More Author" onClick="addField()" />
</div></td>
</tr>
<tr>
<td>Book Subject </td>
<td>
<select name="selectSubject">
<option value="Programming">Programming</option>
<option value="Database">Database</option>
<option value="Web-Design">Web-Design</option>
<option value="Math">Math</option>
<option value="Business">Business</option>
<option value="Management">Management</option>
</select>
</td>
</tr>
<tr>
<td>Book Shelf: </td>
<td>
<input name="txtBookShelf" type="text" id="txtBookShelf">
</td>
</tr>
<tr>
<td>
<input name="cmdSaveBook" type="submit" id="cmdSaveBook" value="Save Book">
</td>
<td>&nbsp;</td>
</tr>
</table>
</form>
</body>
</html>
tanha2007
شنبه 02 شهریور 1387, 14:40 عصر
تشکر دوست عزیز.
من کوشش میکنم تا ازین کد استفاده نمایم .
tanha2007
شنبه 02 شهریور 1387, 22:14 عصر
سلام.

1. من زمانیکه چند تا فیلد اضافه مینمایم، و روی دکمه اولی جهت حذف کلیک مینمایم همه ای فیلد های اضافه شده را پاک مینماید. البته در فایر فاکس

2. اگر من به فرض مثال دو فیلد اضافه نمایم، اگر من خواسته باشم که فیلد اولی را پاک نمایم ، در عوض فیلد دومی پک میگردد.

3. اگر بشه به جای div از همان tr و td استفاده نمود خیلی خوب میشد.
tanha2007
شنبه 02 شهریور 1387, 22:19 عصر
البته من یک کمی به نتیجه رسیدم، ولی نمیدونم چرا زمانیکه روی دکمه delete کلیک مینمایم error نشان داده میشود.

هم چنان من مطمن نیستم که این روشی که من میخوام پیش برم ، روشی درستی است یا نه؟





<html>
<head>
<title>By AJAX</title>

<script type="text/javascript">
var count = 3;

function removeRow(r){

var i=r.parentNode.parentNode.rowIndex;
document.getElementById('myTable').deleteRow(i);

} //end removeRow()

function addRow(tbl, authorName, authorID) {

if( !document.getElementById ) return ; // Only DOM browsers

var table = document.getElementById( tbl ) ;
var row = table.insertRow( count ) ;
count = count + 1;

// Cells
var cellLeft = row.insertCell(0) ;
var cellMiddle = row.insertCell(1) ;
var cellRight = row.insertCell(2) ;

if( document.createElement ) { //W3C Dom method.

var td1 = document.createElement('TD');
td1.innerHTML = 'Author Name:';
cellLeft.appendChild( td1 ) ;

var td2 = document.createElement('TD');
td2.innerHTML = '<input type="text" size="60" id="'+authorID+count+'" name="' +authorName+'['+count+']'+ '" />';
cellMiddle.appendChild( td2 ) ;

var td3 = document.createElement('TD');
td3.innerHTML = "<input type='button' name='cmdDelete' value='Delete Record' onClick='removeRow(this);'/>";
cellRight.appendChild( td3 ) ;
}
} //end of addRow()

</script>
</head>

<body>
<form name="form1" method="post" action="">
<table width="50%" border="0" cellpadding="3" id="tblView">
<tr>
<td>Book Name: </td>
<td>
<input name="txtBookName" type="text" id="txtBookName" size="60"> </td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Book Title: </td>
<td>
<input name="txtBookTitle" type="text" id="txtBookTitle" size="80"> </td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Author Name: </td>
<td>
<input name="authorName[0]" type="text" id="authorName_0" size="60"></td>
<td><input name="cmdAddMore" type="button" id="cmdAddMore" value="More Author" onClick="addRow('tblView','authorName','authorName_');" /></td>
</tr>
<tr>
<td>Book Subject </td>
<td>
<select name="selectSubject">
<option value="Programming">Programming</option>
<option value="Database">Database</option>
<option value="Web-Design">Web-Design</option>
<option value="Math">Math</option>
<option value="Business">Business</option>
<option value="Management">Management</option>
</select> </td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Book Shelf: </td>
<td>
<input name="txtBookShelf" type="text" id="txtBookShelf"> </td>
<td>&nbsp;</td>
</tr>
<tr>
<td>
<input name="cmdSaveBook" type="submit" id="cmdSaveBook" value="Save Book"> </td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</form>
</body>
</html>
tanha2007
یک شنبه 03 شهریور 1387, 02:05 صبح
سلام.

معذرت من آیدی جدول را در قسمت تابع removeRow اشتباه نوشته بودم. الان آنرا تنضیم نمودم ولی هنوز مشکل دارد و من چند سطر به صورت دستی ایجاد نمودم با یک تابع دیگر بنام deleteRow اون درست کار مینماید.

نمیدانم چرا درقسمت removeRow اشتباه از undefined میگیرد.




<html>
<head>
<title>By AJAX</title>

<script type="text/javascript">
var count = 3;


function deleteRow(i){
document.getElementById('tblView').deleteRow(i)
}

function removeRow(r){
var i = r.parentNode.parentNode.rowIndex;
alert(i);
document.getElementById('tblView').deleteRow(i);

} //end removeRow()

function addRow(tbl, authorName, authorID) {

if( !document.getElementById ) return ; // Only DOM browsers

var table = document.getElementById( tbl ) ;
var row = table.insertRow( count ) ;
count = count + 1;

//var lastRow = table.rows.length ;
//alert (lastRow);

// Cells
var cellLeft = row.insertCell(0) ;
var cellMiddle = row.insertCell(1) ;
var cellRight = row.insertCell(2) ;

if( document.createElement ) { //W3C Dom method.

var td1 = document.createElement('TD');
td1.innerHTML = 'Author Name:';
cellLeft.appendChild( td1 ) ;

var td2 = document.createElement('TD');
td2.innerHTML = '<input type="text" size="60" id="'+authorID+count+'" name="' +authorName+'['+count+']'+ '" />';
cellMiddle.appendChild( td2 ) ;

var td3 = document.createElement('TD');
td3.innerHTML = '<input type="button" name="cmdDelete" value="Delete Record" onClick="removeRow(this);" />';
cellRight.appendChild( td3 ) ;
}
} //end of addRow()

</script>
</head>

<body>
<form name="form1" method="post" action="">
<table width="50%" border="0" cellpadding="3" id="tblView">
<tr>
<td>Book Name: </td>
<td>
<input name="txtBookName" type="text" id="txtBookName" size="60"> </td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Book Title: </td>
<td>
<input name="txtBookTitle" type="text" id="txtBookTitle" size="80"> </td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Author Name: </td>
<td><input name="authorName[0]" type="text" id="authorName_0" size="60"></td>
<td><input name="cmdAddMore" type="button" id="cmdAddMore" value="More Author" onClick="addRow('tblView','authorName','authorName_');" /></td>
</tr>



<tr>
<td>Author Name: </td>
<td><input name="authorName[0]" type="text" id="authorName_0" size="60"></td>
<td><input type="button" value="Delete" onclick="deleteRow(this.parentNode.parentNode.rowIndex)"></td>
</tr>
<tr>
<td>Author Name: </td>
<td><input name="authorName[0]" type="text" id="authorName_0" size="60"></td>
<td><input type="button" value="Delete" onclick="deleteRow(this.parentNode.parentNode.rowIndex)"></td>
</tr>
<tr>
<td>Author Name: </td>
<td><input name="authorName[0]" type="text" id="authorName_0" size="60"></td>
<td><input type="button" value="Delete" onclick="deleteRow(this.parentNode.parentNode.rowIndex)"></td>
</tr>

<tr>
<td>Book Subject </td>
<td>
<select name="selectSubject">
<option value="Programming">Programming</option>
</select>
</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Book Shelf: </td>
<td>
<input name="txtBookShelf" type="text" id="txtBookShelf"> </td>
<td>&nbsp;</td>
</tr>
<tr>
<td>
<input name="cmdSaveBook" type="submit" id="cmdSaveBook" value="Save Book"> </td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</form>
</body>
</html>
tanha2007
یک شنبه 03 شهریور 1387, 13:23 عصر
سلام به همه.

من میدونم که در قسمت عنوان این تاپیک اشتباه نمودم.

ولی میشه یکی لطفا راه حلی برای این داشته باشد ...