×
Masterpro Nivo Slider (06 фев 2023)

Это форк Vinaora Nivo Slider, пришлось переименовать, в силу требования JED. Даже старую версию качать можно было только с варезных сайтов, нашпигованную троянами. Зачем оно такое, согласитесь.

Вопрос Добавить поле на страничке по кнопке

  • Прохожий
  • Автор темы
  • Не в сети
  • Давно я тут
  • Давно я тут
  • Да, это я...
Подробнее
4 года 9 мес. назад #1 от Прохожий
Требуется создать функционал, чтобы пользователь при отправке сообщения из HTML формы мог добавлять или убирать поля. Есть какое-нибудь готовое решение на js для эт цели, заранее благодарю за ответ.

Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.

Подробнее
4 года 9 мес. назад #2 от unior
готовое вряд ли есть, делать нужно.

Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.

Подробнее
4 года 9 мес. назад - 4 года 9 мес. назад #3 от Bumer
лови!

<!DOCTYPE html>
<html lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" >
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Добавление полей при заполнении анкеты с данными</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

<style>
.param {padding:0 0 10px;}
#form_year_number {display:none;}
input[name*="status_vendor"] {width:250px;} 
input[name*="status_name"] {width:200px;} 
input[name*="status_specialization"] {width:200px;} 
input[name*="status_year"] {width:50px;} 
input[type="button"] {cursor:pointer;} 
</style>
</head>

<body>


<div class="wrapper">
  <div class="content">
	<script>
	$(function() {
		$("#form_year_added").on("click",function () {
			var number_year = $("#form_year_number").text() -1;
			$("#form_year_number").html(number_year);
			$("<div class='param'><label for='year_" + number_year + "'>" + number_year + " год</label> <input type='text'  id='year_" + number_year + "' name='year[]'></div>" ).appendTo( ".list_year" );
		})
		$("#form_status_added").click(function () {
			$("<div class='param'><input type='text' name='status_vendor[]' placeholder='Вендор'> <input type='text' name='status_name[]' placeholder='Название статуса'> <input type='text' name='status_specialization[]' placeholder='Специализация'> <input type='text' name='status_year[]' placeholder='Год'></div>" ).insertBefore("#form_status_added");
		})
	 });
	</script>

	<form action="#">

		<h3>Статус</3>
		<div class="param">
			<input type="text" name="status_vendor[]" placeholder="Вендор" >
			<input type="text" name="status_name[]" placeholder="Название статуса">
			<input type="text" name="status_specialization[]" placeholder="Специализация" >
			<input type="text" name="status_year[]" placeholder="Год" >
		</div>
		<input type="button" value="Добавить статус" id="form_status_added">

		<h3>Год</h3>
		<div class="list_year">
			<span id="form_year_number">2009</span>
			<div class="param">
				<label for="year_2013">2013 год</label>
				<input type="text" id="year_2013" name="year[]"><br>
			</div>
			<div class="param">
				<label for="year_2012">2012 год</label>
				<input type="text" id="year_2012" name="year[]"><br>
			</div>
			<div class="param">
				<label for="year_2011">2011 год</label>
				<input type="text"  id="year_2011" name="year[]"><br>
			</div>
			<div class="param">
				<label for="year_2010">2010 год</label>
				<input type="text"  id="year_2010" name="year[]"><br>
			</div>
			<div class="param">
				<label for="year_2009">2009 год</label>
				<input type="text"  id="year_2009" name="year[]"><br>
			</div>
		</div>
		<input type="button" value="Добавить год" id="form_year_added">
	</form>

  </div>
</div>

</body>
</html>
Последнее редактирование: 4 года 9 мес. назад пользователем Bumer.

Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.

  • Прохожий
  • Автор темы
  • Не в сети
  • Давно я тут
  • Давно я тут
  • Да, это я...
Подробнее
4 года 9 мес. назад #4 от Прохожий
Прохожий ответил в теме Добавить поле на страничке по кнопке

Bumer пишет: лови!


работает, но новые поля невозможно удалить.

Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.

Подробнее
4 года 9 мес. назад #5 от serge
index.html
<!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="jquery-1.2.6.pack.js"></script>
</head>
<body>

<script type="text/javascript">
var total = 0;
function add_new_image(){
	total++;
	$('<tr>')
	.attr('id','tr_image_'+total)
	.css({lineHeight:'20px'})
	.append (
		$('<td>')
		.attr('id','td_title_'+total)
		.css({paddingRight:'5px',width:'200px'})
		.append(
			$('<input type="text" />')
			.css({width:'200px'})
			.attr('id','input_title_'+total)
			.attr('name','input_title_'+total)
		)		
		
	)
	
	.append (
		$('<td>')
		.css({width:'60px'})
		.append (
			$('<span id="progress_'+total+'" class="padding5px"><a  href="#" onclick="$(\'#tr_image_'+total+'\').remove();" class="ico_delete"><img src="delete.png" alt="del" border="0"></a></span>')
		)
	)
	.appendTo('#table_container');
	
}
$(document).ready(function() {
	add_new_image();
});
</script>

<form action="add.php" method="post">
	<table id="table_container">
		<tr>
			<td width="100px" colspan="2"><strong>Название</strong></td>
			
		</tr>
	</table>
		<br/>
	<input type="button" value="Добавить поле" id="add" onclick="return add_new_image();">
	<input type="submit" value="Отправить">
	
</form>

</body>
</html>

add.php
<?php
$n = count($_POST);
$key = array_keys($_POST);
for($i=0; $i < $n; $i++){
	echo $_POST[$key[$i]]."<br>";
}
?>

А я смогу! - А поглядим! - А я упрямый!
Спасибо сказали: Прохожий

Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.

Работает на Kunena форум