Форум

ufo · #1 (**permalink**) 05.11.2013, 00:24

Ребят, помогите!

Нужно по щелчку(не однократно) добавить группу элементов.
краткий пример кода:

<form action="" method="POST">
   <input id="m" name="">
            <br>
            1. - 
            <input name="">
            <input name="">
            <input name="">
----------------------------------------------------------------------
добавить сюда...
----------------------------------------------------------------------
            <input type="button" onclick="add">
</form>

и добавить нужно что то вроде этого:

<br>
 2. - 
<input name="">
<input name="">
<input name="">

Помогите!!!! Чет никак не могу сообразить...

BETEPAH · #2 (**permalink**) 05.11.2013, 01:34

<form action="" method="POST">
	<input id="m" name="">
	<div id="inputs">
		<span>1. -</span> 
		<input name="">
		<input name="">
		<input name="">
	</div>
	<input type="button" onclick="add()" value="click!">
</form>
<script>
var count = 1;
function add() {
	var div = document.createElement ('div');
	div.innerHTML = ++count + '. - <input name=""> <input name=""> <input name="">';
	document.getElementById('inputs').appendChild(div);
}
</script>

BETEPAH · #3 (**permalink**) 05.11.2013, 01:54

или

<form action="" method="POST">
	<input id="m" name="">
	<br>
	1. -
	<input name=""><input name=""><input name=""><input type="button" onclick="add(this)" value=" + ">
</form>
<script>
var count = 1;
function add(btn) {
	var parent = btn.parentNode;
	parent.insertBefore(document.createElement('br'), btn);
	parent.insertBefore(document.createTextNode(++count + '. - '), btn);
	parent.insertBefore(document.createElement('input'), btn);
	parent.insertBefore(document.createElement('input'), btn);
	parent.insertBefore(document.createElement('input'), btn);
}
</script>

ksa · #4 (**permalink**) 05.11.2013, 08:55

Предложу такой вариант...

<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
#source {
	display: none;
}
</style>
<script type="text/javascript">
function add(Obj){
	var frm=Obj.parentNode;
	var o=document.getElementById('source');
	o=o.getElementsByTagName('div')[0].cloneNode(true);
	var i=frm.getElementsByTagName('div').length;
	o.getElementsByTagName('span')[0].innerHTML=i+1;
	frm.insertBefore(o,Obj);
};
</script>
</head>
<body>
<form action="" method="POST">
	<input id="m" name="">
	<div>
		<p><span>1</span>. - </p>
		<input name="">
		<input name="">
		<input name="">
	</div>
	<input type="button" onclick="add(this);">
</form>
<div id='source'>
	<div>
		<p><span></span>. - </p>
		<input name="">
		<input name="">
		<input name="">
	</div>
</div>
</body>
</html>

ufo · #5 (**permalink**) 05.11.2013, 12:29

Спасибо, очень оперативно)))

Arramis · #6 (**permalink**) 05.11.2013, 15:49

есть еще такая вещь как documentFragment()

<!DOCTYPE HTML>
<html>
  <head></head>
  <body>
	<form action = "" method = "POST">
   		 <input id = "m" name = "">
     	 <br>
    	  1. - 
     	 <input name = "">
     	 <input name = "">
     	 <input name = "">
      <input type = "button" onclick = "add()" value = 'More!'>
	</form>

    <script type = 'text/javascript'>
    	var i = 1;
      function add() {
      	var form = document.getElementsByTagName('form')[0],
            fragment = document.createDocumentFragment();        
        fragment.appendChild(document.createElement('br'));
        fragment.appendChild(document.createTextNode(++i + '. - '));
        fragment.appendChild(document.createElement('input'));
        fragment.appendChild(document.createElement('input'));
        fragment.appendChild(document.createElement('input'));
        form.appendChild(fragment);        
      }	
    </script>

  </body>
</html>

ufo · #7 (**permalink**) 11.11.2013, 00:01

Arramis, маленько неправильно: кнопка остается после первого пункта!

Форум

Справочник

Discord чат

Курсы javascript