11.06.2012, 11:29
|
|
Новичок на форуме
|
|
Регистрация: 11.06.2012
Сообщений: 9
|
|
|
Новая форма из input старой!
Всем привет! Помогите пожалуйста реализовать следующее:
Есть форма с "n" количеством input, нужно чтобы по мере заполнения input появлялась новая форма (на этой же стр.) с введенными данными!
<form id="form1">
<input type="text" id="Editbox1" name="Editbox1" value="2256">
<input type="text" id="Editbox2" name="Editbox2" value="">
<input type="text" id="Editbox3" name="Editbox3" value="">
<input type="text" id="Editbox4" name="Editbox4" value="214">
<input type="text" id="Editbox5" name="Editbox5" value="4656">
<input type="text" id="Editbox6" name="Editbox6" value="">
</form>
<form id="form2">
<input type="text" id="Editbox1" name="Editbox1" value="2256">
<input type="text" id="Editbox4" name="Editbox4" value="214">
<input type="text" id="Editbox5" name="Editbox5" value="4656">
</form>
|
|
11.06.2012, 11:44
|
|
Профессор
|
|
Регистрация: 16.05.2011
Сообщений: 307
|
|
|
скрывать /показывать элемент можно так:
element.style.display='block';
element.style.display='none';
Тебе нужно повесить обработчик события onkeyup на поле формы и он будет вызывать смену видимости блока.
Уточните задачу или сделайте более полный пример с js
__________________
Я только учусь.Ногами просьба не бить 
|
|
11.06.2012, 12:54
|
|
Новичок на форуме
|
|
Регистрация: 11.06.2012
Сообщений: 9
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
<head> <title>пример</title> <meta http-equiv="content-type" content="text/html;charset=windows-1251" /> <script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script></head><body>
<script>
function addInput(ttt, ppp, nnn) {
var gval = ttt;
var gid = ppp;
var gn = nnn;
if (gval){
$("form[name=form2]").append(gn+'<input name="' + gid + '" id="' + gid + '" value="' + gval + '"><br>');
}
}
</script>
<form id="form1">
А<input type="text" id="Editbox1" name="Editbox1" value="" onblur="addInput(this.value, this.id, 'А')"><br>
Б<input type="text" id="Editbox2" name="Editbox2" value="" onblur="addInput(this.value, this.id, 'Б')"><br>
В<input type="text" id="Editbox3" name="Editbox3" value="" onblur="addInput(this.value, this.id, 'В')"><br>
Г<input type="text" id="Editbox4" name="Editbox4" value="" onblur="addInput(this.value, this.id, 'Г')"><br>
Д<input type="text" id="Editbox5" name="Editbox5" value="" onblur="addInput(this.value, this.id, 'Д')"><br>
Е<input type="text" id="Editbox6" name="Editbox6" value="" onblur="addInput(this.value, this.id, 'Е')"><br>
</form>
<HR>
<br>
<form id="form2" name="form2"></form>
</body>
</html>
в принципе сам сделал, но как избежать повторений в новой форме?
Последний раз редактировалось vgd, 11.06.2012 в 13:01.
|
|
11.06.2012, 15:05
|
|
Новичок на форуме
|
|
Регистрация: 11.06.2012
Сообщений: 9
|
|
|
Помогите пожалуйста со скриптом.
Как избежать повторений в новой форме? И как сделать сортировку новой формы по id ?
|
|
12.06.2012, 13:48
|
|
Новичок на форуме
|
|
Регистрация: 11.06.2012
Сообщений: 9
|
|
От повторов строк избавился! Сортировка второй таблицы по id input - вопрос открытый, дайте совет  , пожалуйста!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>пример</title>
<meta http-equiv="content-type" content="text/html;charset=windows-1251" />
<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>
<style>
div {
display: inline-block;
}
</style>
</head>
<body>
<script>
function addInput(ttt, ppp, nnn) {
var gval = ttt;
var gid = ppp;
var gn = nnn;
if (gval){
if (document.forms['form2'].elements[gid]) document.forms['form2'].elements[gid].value = gval;
else $("form[name=form2]").append(gn+'<input name="' + gid + '" id="' + gid + '" value="' + gval + '"><br>');
}
}
</script>
<div>
<form id="form1">
А<input type="text" id="Editbox1" name="Editbox1" value="" onblur="addInput(this.value, this.id, 'А')"><br>
Б<input type="text" id="Editbox2" name="Editbox2" value="" onblur="addInput(this.value, this.id, 'Б')"><br>
В<input type="text" id="Editbox3" name="Editbox3" value="" onblur="addInput(this.value, this.id, 'В')"><br>
Г<input type="text" id="Editbox4" name="Editbox4" value="" onblur="addInput(this.value, this.id, 'Г')"><br>
Д<input type="text" id="Editbox5" name="Editbox5" value="" onblur="addInput(this.value, this.id, 'Д')"><br>
Е<input type="text" id="Editbox6" name="Editbox6" value="" onblur="addInput(this.value, this.id, 'Е')"><br>
</form>
</div>
<div>
<form id="form2" name="form2"></form>
</div>
</body>
</html>
|
|
12.06.2012, 14:56
|
|
Новичок на форуме
|
|
Регистрация: 11.06.2012
Сообщений: 9
|
|
|
От повторов строк избавился! Сортировка второй таблицы по id input - вопрос открытый, дайте совет , пожалуйста!
|
|
12.06.2012, 15:19
|
|
Новичок на форуме
|
|
Регистрация: 11.06.2012
Сообщений: 9
|
|
|
по поводу сортировки, пока только одна идея:
взять все input (из form2) в массив, отсортировать его и вывести в form2. Подскажите возможно ли так сделать, или есть более грамотные варианты?
|
|
12.06.2012, 15:26
|
|
без статуса
|
|
Регистрация: 25.05.2012
Сообщений: 8,219
|
|
|
vgd,
Ну на jQuery мон, - как два пальца об
|
|
12.06.2012, 15:28
|
|
Флудер
|
|
Регистрация: 25.07.2008
Сообщений: 1,271
|
|
<!DOCTYPE html>
<html>
<head>
<title>пример</title>
<script>
function addInput(e, id) {
var div = document.getElementById(id);
div.firstChild.value = e.value;
div.style.display = e.value != '' ? 'block': 'none';
}
</script>
</head>
<body>
<div>
<form id="form1">
A<input type="text" value="" onblur="addInput(this, 'divA')"><br>
B<input type="text" value="" onblur="addInput(this, 'divB')"><br>
C<input type="text" value="" onblur="addInput(this, 'divC')"><br>
D<input type="text" value="" onblur="addInput(this, 'divD')"><br>
E<input type="text" value="" onblur="addInput(this, 'divE')"><br>
F<input type="text" value="" onblur="addInput(this, 'divF')"><br>
</form>
</div>
<div>
<form id="form2" name="form2">
<div id="divA" style="display: none;">A<input type="text" id="Editbox1" name="Editbox1" value=""></div>
<div id="divB" style="display: none;">B<input type="text" id="Editbox2" name="Editbox2" value=""></div>
<div id="divC" style="display: none;">C<input type="text" id="Editbox3" name="Editbox3" value=""></div>
<div id="divD" style="display: none;">D<input type="text" id="Editbox4" name="Editbox4" value=""></div>
<div id="divE" style="display: none;">E<input type="text" id="Editbox5" name="Editbox5" value=""></div>
<div id="divF" style="display: none;">F<input type="text" id="Editbox6" name="Editbox6" value=""></div>
</form>
</div>
</body>
</html>
|
|
12.06.2012, 16:44
|
|
Новичок на форуме
|
|
Регистрация: 11.06.2012
Сообщений: 9
|
|
|
нет, вторая таблица пустая и вариант с "display: none;" не подходит, т.к. в первой форме может быть 300-400 строк
|
|
|
|
