Форум

nikolaymac · #1 (**permalink**) 26.06.2013, 15:21

Уважаемые! Подскажите новичку как вытащить из этой формы данные ?..
А именно нужно что бы пользователь выбирал сколько ему нужно полей от 1 до 10 и все эти поля заносились в БД mysql поле в новой строке..
Сейчас в этом коде после нажатия субмит срабатывает алерт а как вывести это в php я не могу понять

$(document).ready(function(){


	var i = $('input').size() + 1;
	
	$('#add').click(function() {
		$('<div><input type="text" class="field" name="dynamic[]" value="' + i + '" /></div>').fadeIn('slow').appendTo('.inputs');
		i++;
	});
	
	$('#remove').click(function() {
	if(i > 1) {
		$('.field:last').remove();
		i--; 
	}
	});
	
	$('#reset').click(function() {
	while(i > 2) {
		$('.field:last').remove();
		i--;
	}
	});
	

// here's our click function for when the forms submitted
	
	$('.submit').click(function(){
	
	var answers = [];
    $.each($('.field'), function() {
        answers.push($(this).val()); 
    });
	
    if(answers.length == 0) { 
        answers = "none"; 
    }   

	alert(answers);
	
	return false;
							
	});
	
	

});

<body>

<div id="container">

<div class="dynamic-form">

<a href="#" id="add">Добавить</a> | <a href="#" id="remove">Удалить</a>  | <a href="#" id="reset">Сбросить</a>  

<form>
<div class="inputs">
<div><input type="text" name="dynamic[]" class="field" value="1"></div>
</div>
<input name="submit" type="button" class="submit" value="ОК">
</form>
</div>





</div>

</body></html>

animhotep · #2 (**permalink**) 26.06.2013, 16:33

вместо алерта отправьте данные пост запросом на пхп файл http://api.jquery.com/jQuery.post/

nikolaymac · #3 (**permalink**) 26.06.2013, 18:32

не совсем понимаю как грамотно написать это

animhotep · #4 (**permalink**) 26.06.2013, 18:51

както так $.post("test.php", { answers } ); а в test.php обрабатывать $_POST['answers']

nikolaymac · #5 (**permalink**) 27.06.2013, 06:57

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-1.3.1.min.js"></script>
<script>
$(document).ready(function(){



	var i = $('input').size() + 1;

	$('#add').click(function() {
		$('<div><input type="text" class="field" name="dynamic[]"  /><input type="text" class="field" name="dynamic[]"  /></div>').fadeIn('slow').appendTo('.inputs');
		i++;
		
	});
	
	$('#remove').click(function() {
	if(i > 1) {
		$('.field:last').remove();
		$('.field:last').remove();
		i--; 
	}
	});
	
	$('#reset').click(function() {
	while(i > 2) {
		$('.field:last').remove();
		i--;
	}
	});
	

// here's our click function for when the forms submitted
	
	$('.submit').click(function(){
	
	var answers = [];
    $.each($('.field'), function() {
        answers.push($(this).val()); 
    });

	
    
  // Отсылаем паметры
       $.ajax({
                type: "POST",
                url: "new.php",
                data: "data="+answers,
                // Выводим то что вернул PHP
                success: function(html) {
 //предварительно очищаем нужный элемент страницы
                        $("#result").empty();
//и выводим ответ php скрипта
                        $("#result").append(html);
                }
        });  

	
	
	
	
	return false;
							
	});
	
	

});

</script>

<style>
input{
	border:1px solid #ccc;
	padding:8px;
	font-size:14px;
	width:300px;
	}
	
.submit{
	width:110px;
	background-color:#FF6;
	padding:3px;
	border:1px solid #FC0;
	margin-top:20px;}	

</style>



<body>

<div id="container">

<div class="dynamic-form">

<a href="#" id="add">Добавить</a> | <a href="#" id="remove">Удалить</a>  | <a href="#" id="reset">Сбросить</a>  

<form>
<div class="inputs">
<div><input type="text" name="dynamic[]" class="field" >
<input type="text" name="dynamic[]" class="field" ></div>
</div>
<input name="submit" type="button" class="submit" value="ОК">
</form>
<div id="result"></div>
</div>





</div>

</body></html>

Это полный код...

принимаю так

<?
$data=$_POST[data];

$array = explode(',', $data);

foreach ($array as $number=>$value)
{
echo "в поле ".$number;
echo " значение ".$value;
echo "<br>";
}

?>

Вопрос Как ограничить чистой добавляемый полей ?? допустим что бы пользователь мог добавить только 10 полей и все

danik.js · #6 (**permalink**) 27.06.2013, 08:29

У тебя в переменной i содержится количество полей. После добавления поля делай проверку, если лимит исчерпан - скрывай кнопку. По клику кнопки удаления проявляй кнопку добавления.

nikolaymac · #7 (**permalink**) 27.06.2013, 08:49

какой функцией или методом скрыть ссылку и потом вернуть? (кнопку добавить)

danik.js · #8 (**permalink**) 27.06.2013, 08:51

$('#add').hide() | $('#add').show()

nikolaymac · #9 (**permalink**) 27.06.2013, 10:05

теперь проблема в следующем... отдельно в файле этот код работает... когда я его вставляю в заполненую страницу которая содержит различные инпуты и кнопки СТОП на добавление полей работает только после нажатия на кнопку Сброс!

<script>
$(document).ready(function(){



	var i = $('input').size() + 1;

	$('#add').click(function() {
		$('<div><input type="text" class="field" name="dynamic[]"  /> <input type="text" class="field" name="dynamic[]"  /></div>').fadeIn('slow').appendTo('.inputs');
		i++;
	if(i==5){
	
	$('#add').hide() 
	}
		
	});
	
	$('#remove').click(function() {
	if(i > 1) {
		$('.field:last').remove();
		$('.field:last').remove();
		i--; 
		$('#add').show() 
	}
	});
	
	$('#reset').click(function() {
	while(i > 2) {
		$('.field:last').remove();
		$('.field:last').remove();
		i--;
		$('#add').show() 
	}
	});
	

// here's our click function for when the forms submitted
	
	$('.submit').click(function(){
	
	var answers = [];
    $.each($('.field'), function() {
        answers.push($(this).val()); 
    });

	
    
  // Отсылаем паметры
       $.ajax({
                type: "POST",
                url: "new.php",
                data: "data="+answers,
                // Выводим то что вернул PHP
                success: function(html) {
 //предварительно очищаем нужный элемент страницы
                        $("#result").empty();
//и выводим ответ php скрипта
                        $("#result").append(html);
                }
        });  

	
	
	
	
	return false;
							
	});
	
	

});

danik.js · #10 (**permalink**) 27.06.2013, 11:01

Хз, живой пример запили через [html run][/html]
И не нужно совать в цикл .hide() / .show()

Форум

Справочник

Discord чат

Курсы javascript