ورود

View Full Version : امکان افززودن تلفن های بیشتر در فرم(ایجاد نمونه از یک element)


resident
پنج شنبه 20 تیر 1392, 17:29 عصر
تو فرمی که طراحی کردم میخوام اطلاعات تماس فرئ رو بگیرم. تلفن 2 تا فیلد دارم:1-کد شهر 2-شماره تماس
من میخوام امکان اضافه کردن تلفن های بیشتر رو کاربر داشته باشه.
برای اینکار دکمه بذارم که با کلیلک رون اون عین 2 فیلد (کد شهر و شماره تماس) ایجاد بشه.
چطور پیاده سازیش کنم؟
parvizwpf
پنج شنبه 20 تیر 1392, 17:32 عصر
راه دیگه ای ندارید. باید ی خورده کد dom بزنید. و المنتها رو بسازید.
jalil_gh
پنج شنبه 20 تیر 1392, 20:51 عصر
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style></style>
</head>
<body>

<table id="myTable" border="1">
<tr>
<th>code</th>
<th>number</th>
</tr>
<tr>
<td>123</td>
<td>123456789</td>
</tr>
</table>
<input id="code" type="text">
<br>
<input id="number" type="text">
<br>
<button id="add">add</button>

<script>
document.getElementById('add').addEventListener('c lick', function () {

var code = document.getElementById('code').value;
var number = document.getElementById('number').value;

var tr = document.createElement('tr');
var tdCode = document.createElement('td');
var tdNumber = document.createElement('td');

tdCode.innerHTML = code;
tdNumber.innerHTML = number;

tr.appendChild(tdCode);
tr.appendChild(tdNumber);

document.getElementById('myTable').appendChild(tr) ;

}, false);
</script>
</body>

</html>
resident
جمعه 21 تیر 1392, 10:23 صبح
از هر دو دوست گرامی سپاسگزارم بابت وقتی که گذاشتن.
یه عکس گذاشتم، توش واضحه که میخوام چه کنم.
با زدن دکمه + توسط کاربر باید از div مدنظر با المنت های داخلش یه نمونه ایجاد بشه.
تشکر
jalil_gh
جمعه 21 تیر 1392, 17:43 عصر
جی‌کوئری متدی داره به اسم clone که کارتو خیلی راحت میکنه. این متد یه کپی از عنصر مورد نظر با تمام فرزندان و داده‌های مرتبط با اونا رو برمیگردونه. شما میتونید اونو به انتهای div های موردنظرتون اضافه کنید.
$('div').clone(true).appendTo('somewhere');
البته نباید داخل این div ها از id استفاده کنید. چون وقتی که کپی میشه چندتا id مثل هم خواهی داشت.
darkcms
یک شنبه 23 تیر 1392, 22:37 عصر
با سلام.
تابعی برای این کار نوشته ام ، برایتان می گذارم:


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Update your profile!</title>
<script>
function plus(value,number){
document.getElementById(value).innerHTML+='<br><input type="text" name="phone_'+
(document.getElementsByTagName('input').length-number+1)
+'" id="phone_'+(document.getElementsByTagName('input').le ngth-number+1)+'">';
}
</script>
</head>
<body>
<center>
<form action="/" method="post">
<div id="position">
<input type="text" name="phone_0" id="phone_0">
</div>
<input type="button" onclick="plus('position',3)" value="Plus this!">
<input type="submit" value="Send">
</form>
</center>
</body>
</html>
ورودی اول این تابع آی دی عنصر مورد نظرتان می باشد که می خواهید تگ <input> در آن زیاد شود ؛ و ورودی دوم این تابع تعداد تگ <input> در صفحه می باشد که باید تعیین کنید!
به امید فردایی بهتر!:لبخندساده: