Хотите создать копию элементов по нажатию кнопки - PullRequest
Новая
       1

Хотите создать копию элементов по нажатию кнопки

0 голосов
/ 17 сентября 2018

У меня есть регистрационная форма

Я хочу добавить содержимое / элементы между тегом <fieldset> в конец строки, когда пользователь нажимает кнопку +.

Фактически, первая строка, которую вы видите в результате, воссоздает

Спасибо за вашу помощь 

<script>		
  function myFunction() {

  }
</script>
<!DOCTYPE html>
<html lang="en" >
	<head>
		<meta charset="UTF-8">
		<title>Information Form</title>
	</head>
	<body>

	

	<fieldset>
		<h2 class="fs-title">Registration Form</h2>
    
				<div class="form-item webform-component webform-component-textfield hs_average_gift_size_in_year_2 field hs-form-field" id="webform-component-cultivation--amount-2">
				<div style="width: 17%;float: right;">
					<!-- Begin W_Language Field -->
					<label for="W_Language">LANGUAGE</label>
					<select id="W_Language" class="form-control" name="W_Language">
						<option selected>NONE</option> 
						<option>EN</option> 
						<option>FR</option> 
						<option>GE</option> 
						<option>AR</option> 
					</select>	
					<!-- End W_Language Field -->
				</div>
				<div style="width: 17%;float: right;">
					<!-- Begin exam Field -->
					<label for="W_exam">EXAM</label>
					<select id="W_exam" class="form-control" name="W_exam">
						<option selected>NONE</option> 
						<option>IELTS</option> 
						<option>TOEFL</option> 
						<option>GRE</option> 
						<option>KET</option> 
						<option>FCE</option> 
						<option>MSRT</option> 
						<option>TOLIMO</option> 
						<option>MCHE</option> 
						<option>CPE</option> 
					</select>	
					<!-- End W_exam Field -->
				</div>
				<div style="width: 8%;float: left;">
					<!-- Begin W_Language Field -->
					<button onclick="myFunction();return false" class="btn1" >+</button>
				</div>
				<div style="width: 12%;float: left;">
					<!-- Begin W_Language Field -->
					<label for="W_Speack">speck</label>
					<select id="W_Language" class="form-control" name="W_Language">
						<option selected>4</option> 
						<option>4.5</option> 
						<option>5</option> 
						<option>5.5</option> 
						<option>6</option> 
						<option>6.5</option> 
						<option>7</option> 
						<option>7.5</option> 
						<option>8</option> 
						<option>8.5</option> 
						<option>9</option> 
					</select>	
					<!-- End W_Language Field -->
				</div>
				<div style="width: 12%;float: left;">
					<!-- Begin W_Language Field -->
					<label for="W_Listen">listening</label>
					<select id="W_Language" class="form-control" name="W_Language">
						<option selected>4</option> 
						<option>4.5</option> 
						<option>5</option> 
						<option>5.5</option> 
						<option>6</option> 
						<option>6.5</option> 
						<option>7</option> 
						<option>7.5</option> 
						<option>8</option> 
						<option>8.5</option> 
						<option>9</option> 
					</select>	
					<!-- End Language Field -->
				</div>
				<div style="width: 12%;float: left;">
					<!-- Begin Language Field -->
					<label for="W_Reading">reading</label>
					<select id="Language" class="form-control" name="Language">
						<option selected>4</option> 
						<option>4.5</option> 
						<option>5</option> 
						<option>5.5</option> 
						<option>6</option> 
						<option>6.5</option> 
						<option>7</option> 
						<option>7.5</option> 
						<option>8</option> 
						<option>8.5</option> 
						<option>9</option> 
					</select>	
					<!-- End Language Field -->
				</div>
				<div style="width: 12%;float: left;">
					<!-- Begin W_Writing Field -->
					<label for="W_Writing">writing</label>
					<select id="W_Writing" class="form-control" name="W_Writing">
						<option selected>4</option> 
						<option>4.5</option> 
						<option>5</option> 
						<option>5.5</option> 
						<option>6</option> 
						<option>6.5</option> 
						<option>7</option> 
						<option>7.5</option> 
						<option>8</option> 
						<option>8.5</option> 
						<option>9</option> 
					</select>	
					<!-- End W_Writing Field -->
				</div>
			</div>
				 

	  </fieldset>
	</body>

</html>

1 Ответ

0 голосов
/ 17 сентября 2018

Для этого вы можете использовать функцию клон .

Метод clone () создает копию выбранных элементов, включая дочерние узлы, текст и атрибуты. 

function myFunction() {
				$(".form-item:last-child").after($(".form-item:last-child").clone(true));
			}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en" >
	<head>
		<meta charset="UTF-8">
		<title>Information Form</title>
	</head>
	<body>

	

	<fieldset>
		<h2 class="fs-title">Registration Form</h2>
    
				<div class="form-item webform-component webform-component-textfield hs_average_gift_size_in_year_2 field hs-form-field" id="webform-component-cultivation--amount-2">
				<div style="width: 17%;float: right;">
					<!-- Begin W_Language Field -->
					<label for="W_Language">LANGUAGE</label>
					<select id="W_Language" class="form-control" name="W_Language">
						<option selected>NONE</option> 
						<option>EN</option> 
						<option>FR</option> 
						<option>GE</option> 
						<option>AR</option> 
					</select>	
					<!-- End W_Language Field -->
				</div>
				<div style="width: 17%;float: right;">
					<!-- Begin exam Field -->
					<label for="W_exam">EXAM</label>
					<select id="W_exam" class="form-control" name="W_exam">
						<option selected>NONE</option> 
						<option>IELTS</option> 
						<option>TOEFL</option> 
						<option>GRE</option> 
						<option>KET</option> 
						<option>FCE</option> 
						<option>MSRT</option> 
						<option>TOLIMO</option> 
						<option>MCHE</option> 
						<option>CPE</option> 
					</select>	
					<!-- End W_exam Field -->
				</div>
				<div style="width: 8%;float: left;">
					<!-- Begin W_Language Field -->
					<button class="btn1" onclick="myFunction();return false">+</button>
				</div>
				<div style="width: 12%;float: left;">
					<!-- Begin W_Language Field -->
					<label for="W_Speack">speck</label>
					<select id="W_Language" class="form-control" name="W_Language">
						<option selected>4</option> 
						<option>4.5</option> 
						<option>5</option> 
						<option>5.5</option> 
						<option>6</option> 
						<option>6.5</option> 
						<option>7</option> 
						<option>7.5</option> 
						<option>8</option> 
						<option>8.5</option> 
						<option>9</option> 
					</select>	
					<!-- End W_Language Field -->
				</div>
				<div style="width: 12%;float: left;">
					<!-- Begin W_Language Field -->
					<label for="W_Listen">listening</label>
					<select id="W_Language" class="form-control" name="W_Language">
						<option selected>4</option> 
						<option>4.5</option> 
						<option>5</option> 
						<option>5.5</option> 
						<option>6</option> 
						<option>6.5</option> 
						<option>7</option> 
						<option>7.5</option> 
						<option>8</option> 
						<option>8.5</option> 
						<option>9</option> 
					</select>	
					<!-- End Language Field -->
				</div>
				<div style="width: 12%;float: left;">
					<!-- Begin Language Field -->
					<label for="W_Reading">reading</label>
					<select id="Language" class="form-control" name="Language">
						<option selected>4</option> 
						<option>4.5</option> 
						<option>5</option> 
						<option>5.5</option> 
						<option>6</option> 
						<option>6.5</option> 
						<option>7</option> 
						<option>7.5</option> 
						<option>8</option> 
						<option>8.5</option> 
						<option>9</option> 
					</select>	
					<!-- End Language Field -->
				</div>
				<div style="width: 12%;float: left;">
					<!-- Begin W_Writing Field -->
					<label for="W_Writing">writing</label>
					<select id="W_Writing" class="form-control" name="W_Writing">
						<option selected>4</option> 
						<option>4.5</option> 
						<option>5</option> 
						<option>5.5</option> 
						<option>6</option> 
						<option>6.5</option> 
						<option>7</option> 
						<option>7.5</option> 
						<option>8</option> 
						<option>8.5</option> 
						<option>9</option> 
					</select>	
					<!-- End W_Writing Field -->
				</div>
			</div>
				 

	  </fieldset>
	</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...