Передача данных из формы javascript
Уважаемые! Подскажите новичку как вытащить из этой формы данные ?..
А именно нужно что бы пользователь выбирал сколько ему нужно полей от 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> |
вместо алерта отправьте данные пост запросом на пхп файл http://api.jquery.com/jQuery.post/
|
не совсем понимаю как грамотно написать это :(
|
както так $.post("test.php", { answers } ); а в test.php обрабатывать $_POST['answers']
|
<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 полей и все |
У тебя в переменной i содержится количество полей. После добавления поля делай проверку, если лимит исчерпан - скрывай кнопку. По клику кнопки удаления проявляй кнопку добавления.
|
какой функцией или методом скрыть ссылку и потом вернуть? (кнопку добавить)
|
$('#add').hide() | $('#add').show()
|
теперь проблема в следующем... отдельно в файле этот код работает... когда я его вставляю в заполненую страницу которая содержит различные инпуты и кнопки СТОП на добавление полей работает только после нажатия на кнопку Сброс!
<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;
});
});
|
Хз, живой пример запили через [html run][/html]
И не нужно совать в цикл .hide() / .show() |
Цитата:
|
Понял в чем причина ! в остальных инпутах ! Как задать параметр что бы
var t = $('input').size(); считал инпуты только в определенном блоке div?? |
Цитата:
$('div.inputs input').size()
|
Спасибо большое !!
|
Еще вопрос не решенный.. как с одного инпута вытащить в одну переменную а со второго в другую? для записи в поля БД
|
nikolaymac,
serialize() |
допустим serialize() там требуется NAME а у меня этот параметр массив с неизвсным количесвом элементов и как быть
|
Ну и даешь им имя типа field[] со скобками на конце. Пхп такие параметры воспримет как массив field
|
var t = $('div.inputs input').size();
$('#add').click(function() {
$('<div><input type="text" class="field" name="dynamic[]" /> <input type="text" class="field" name="dynamic[]" /></div>').fadeIn('slow').appendTo('.inputs');
t++;
давай конкретнее ты про что field[]? var value= $('form').serialize(); так ? |
у меня есть массив dynamic[] как вытащить из него значения?
|
nikolaymac,
Поясняйте - где массив - на сервере или на клиенте ? |
я же выложил полный код
<script>
$(document).ready(function(){
var t = $('div.inputs input').size();
$('#add').click(function() {
$('<div><input type="text" class="field" name="dynamic[]" /> <input type="text" class="field" name="dynamic[]" /></div>').fadeIn('slow').appendTo('.inputs');
t++;
if(t==6){
$('#add').hide()
}
});
$('#remove').click(function() {
if(t > 1) {
$('.field:last').remove();
$('.field:last').remove();
t--;
$('#add').show()
}
});
$('#reset').click(function() {
while(t > 2) {
$('.field:last').remove();
$('.field:last').remove();
t--;
$('#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;
});
});
</script>
<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>
|
в итоге хочу получить две переменные типа input1 = "значение" input2 = "значение"
и снова input1 = "значение" input2 = "значение" это следующий динамический блок input |
Ну вместо этого:
40 $('.submit').click(function(){
41
42 var answers = [];
43 $.each($('.field'), function() {
44 answers.push($(this).val());
45
46 });
47
48
49
50 // Отсылаем паметры
51 $.ajax({
52 type: "POST",
53 url: "new.php",
54 data: "data="+answers,
55 // Выводим то что вернул PHP
56 success: function(html) {
57 //предварительно очищаем нужный элемент страницы
58 $("#result").empty();
59 //и выводим ответ php скрипта
60 $("#result").append(html);
61 }
62
63 });
Наверно так
var outData='';
$('.submit').click(function(){
outData = $(this).parents('form').serialize();
if(!outData) return;
// Oтcылaeм пaмeтpы
$.ajax({
type: "POST",
url: "new.php",
data: "data="+outData,
// Bывoдим тo чтo вepнyл PHP
success: function(html) {
//пpeдвapитeльнo oчищaeм нyжный элeмeнт cтpaни
$("#result").empty();
//и вывoдим oтвeт php cкpиптa
$("#result").append(html);
}
});return false;
});
|
Цитата:
|
спасайте !
|
Цитата:
<form> <div class="inputs"> <div><input type="text" name="dynamic1" class="field" > <input type="text" name="dynamic1" class="field" ><br> <input type="text" name="dynamic2" class="field" ><br> <input type="text" name="dynamic3" class="field" ><br> </div> <input type="button" class="submit" value="ОК"> </form> |
Дак вот именно что нельзя указывать dynamic1 2 3 так как формы создаются динамически ! тоесть может быть потом и dynamic 9 10 11
|
Цитата:
Проверьте воспроизводимость полученных данных из статического варианта... Не надо пробовать всё и всё сразу |
<body>
<form>
<div>
<form>
<input type="text" name="a" value="1" id="a" />
<input type="text" name="b" value="2" id="b" />
</form>
</div>
<input type="button" class="submit" value="ОК">
</form>
<div id="result"></div>
</body></html>
<script>
$(document).ready(function(){
$('.submit').click(function(){
var s = $('form').serialize();
// Отсылаем паметры
$.ajax({
type: "POST",
url: "new.php",
data: "data="+s,
// Выводим то что вернул PHP
success: function(html) {
//предварительно очищаем нужный элемент страницы
$("#result").empty();
//и выводим ответ php скрипта
$("#result").append(html);
}
});
return false;
});
});
</script>
принемаю так <? $data=$_POST[data]; var_dump($data); выдает только первый string(11) "a=sss....значение" |
Проблема не решилась... не могу даже в простой форме вывести результат форм
|
Цитата:
Ищите в гугле либо задайте вопрос в раздел http://javascript.ru/forum/server/ |
Если есть у кого нибудь подобный скрипт РАБОЧИЙ ! скиньте код! где просто работает serialize с нескольких форм.. все уже перешарил ! не могу найти
|
| Часовой пояс GMT +3, время: 16:39. |