Новая форма из 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> |
скрывать /показывать элемент можно так:
element.style.display='block'; element.style.display='none'; Тебе нужно повесить обработчик события onkeyup на поле формы и он будет вызывать смену видимости блока. Уточните задачу или сделайте более полный пример с js |
<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>
в принципе сам сделал, но как избежать повторений в новой форме? |
Помогите пожалуйста со скриптом.
Как избежать повторений в новой форме? И как сделать сортировку новой формы по id ? |
От повторов строк избавился! Сортировка второй таблицы по id input - вопрос открытый, дайте совет:help: , пожалуйста!
<!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>
|
От повторов строк избавился! Сортировка второй таблицы по id input - вопрос открытый, дайте совет , пожалуйста!
|
по поводу сортировки, пока только одна идея:
взять все input (из form2) в массив, отсортировать его и вывести в form2. Подскажите возможно ли так сделать, или есть более грамотные варианты? |
vgd,
Ну на jQuery мон, - как два пальца об |
<!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>
|
нет, вторая таблица пустая и вариант с "display: none;" не подходит, т.к. в первой форме может быть 300-400 строк |
| Часовой пояс GMT +3, время: 19:56. |