VPF::AJAX запрос при изменении любого элемента формы

serezhka1986

Дата 23.12.2011, 12:25 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 215
Регистрация: 12.6.2009

Репутация: нет
Всего: 0

Необходимо отправить POST-запрос с помощью AJAX с данными формы, но сразу же при изменении любого элемента формы. На форме расположены два селекта и очень много чекбоксов.
Код формы:

Код


<form action="" method="get">
    <p style="color:#b00b26; border-bottom:2px solid #b00b26; font-weight:bold;">Период</p>
 Год: 
<select name="yearfilterselect">
<option value="">Все года</option>
<optgroup label="Выберите год">
<option value="2011">2011</option>
</optgroup>
</select>
<div name="selectweek">
Неделя: 
<select>
<option value="">Все недели</option>
<optgroup label="Выберите неделю">
<option value="320"> Неделя 1 </option>
<option value="323"> Неделя 2 </option>
<option value="342"> Неделя 3 </option>
<option value="344"> Неделя 4 </option>
<option value="346"> Неделя 5 </option>
<option value="349"> Неделя 6 </option>
<option value="351"> Неделя 7 </option>
<option value="353"> Неделя 8 </option>
</optgroup>
</select>
</div>
    <p style="color:#b00b26; border-bottom:2px solid #b00b26; font-weight:bold;">Каттегории</p>
<div class="monit_block_div2">
<input name="checkbox1" type="checkbox" value="1"/>
 Каттегория 1
    <span class="spoilerCaption2" style="background-image:none; font-size:13px; font-weight:bold; float:left; margin-left:-10px; padding:0;">+</span>
<div class="spoilerContent2">
<input name="checkbox" type="checkbox" value="11"/>
 Подкатттегория 1.1
<br/>
<input name="checkbox" type="checkbox" value="12"/>
 Подкатттегория 1.2
<br/>
<input name="checkbox" type="checkbox" value="13"/>
 Подкатттегория 1.3
</div>
</div>
<div class="monit_block_div2">
<div class="monit_block_div2">
<input name="checkbox" type="checkbox" value="2"/>
 Каттегория 1
<span class="spoilerCaption2" style="background-image:none; font-size:13px; font-weight:bold; float:left; margin-left:-10px; padding:0;">+</span>
<div class="spoilerContent2">
<input name="checkbox" type="checkbox" value="21"/>
 Подкатттегория 2.1
<br/>
<input name="checkbox" type="checkbox" value="22"/>
 Подкатттегория 2.2
<br/>
<input name="checkbox" type="checkbox" value="23"/>
 Подкатттегория 2.3
<br/>
<input name="checkbox" type="checkbox" value="24"/>
 Подкатттегория 2.4
</div>
</div>
<div class="monit_block_div2">
<input name="checkbox" type="checkbox" value="3"/>
 Каттегория 3
<span class="spoilerCaption2" style="background-image:none; font-size:13px; font-weight:bold; float:left; margin-left:-10px; padding:0;">+</span>
<div class="spoilerContent2">
<input name="checkbox" type="checkbox" value="31"/>
 Подкатттегория 3.1
<br/>
<input name="checkbox" type="checkbox" value="32"/>
 Подкатттегория 3.2
<br/>
<input name="checkbox" type="checkbox" value="33"/>
 Подкатттегория 3.3
<br/>
<input name="checkbox" type="checkbox" value="34"/>
 Подкатттегория 3.4
<br/>
<input name="checkbox" type="checkbox" value="35"/>
 Подкатттегория 3.5
<br/>
<input name="checkbox" type="checkbox" value="36"/>
 Подкатттегория 3.6
<br/>
<input name="checkbox" type="checkbox" value="37"/>
 Подкатттегория 3.7
</div>
</div>
<div class="monit_block_div2">
<input name="checkbox" type="checkbox" value=""/>
  Каттегория 4</div>
<div class="monit_block_div2">
<input name="checkbox1" type="checkbox" value=""/>
  Каттегория 5</div>
<div class="monit_block_div2">
<input name="checkbox1" type="checkbox" value=""/>
  Каттегория 6</div>
<div class="monit_block_div2">
<input name="checkbox1" type="checkbox" value=""/>
  Каттегория 7</div>
</form>

Подскажите как реализовать такую задачу. Пример запроса AJAX у меня есть, но я не знаю как его вызывать при изменении любого элемента.

--------------------

Для некоторых лучший способ написать что-нибудь осмысленное - это сесть жопой на клавиатуру...

serezhka1986

Дата 23.12.2011, 14:45 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 215
Регистрация: 12.6.2009

Репутация: нет
Всего: 0

Есть ли лучшее решение чем вызывать в каждом элементе в onchange скрипт отправки запроса?

--------------------

Для некоторых лучший способ написать что-нибудь осмысленное - это сесть жопой на клавиатуру...

ksnk

Дата 23.12.2011, 15:25 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

serezhka1986, насколько оперативно нужно отравлять данные? Нужно ли внести небольшую задержку в отправке - на 2-3 секунды после последнего изменения? Это позволит сэкономить трафик немного, если юзер быстро изменяет данные...
Чтобы избежать потери данных при закрытии окна - можно отправить их еще и при window.unload

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

serezhka1986

Дата 23.12.2011, 15:38 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 215
Регистрация: 12.6.2009

Репутация: нет
Всего: 0

Можно с задержкой. Изначально так и планировалось (только задержку я думал устанавливать в самой функции отправки через setTimeout ) smile

--------------------

Для некоторых лучший способ написать что-нибудь осмысленное - это сесть жопой на клавиатуру...

ksnk

Дата 23.12.2011, 15:45 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

Код


$(function(){

var ajax_timeout=false, delay_beforesend=3000;

function sendForm(){
   $.ajax({
     url:'http://mysite.com/myurl',
     data:$('form').serialize(),
     method:'post'
   })
}
  

$('form').find('select, input').change(function(){
     if(ajax_timeout) clearTimeout(ajax_timeout);
     ajax_timeout=setTimeout(sendForm,delay_beforesend)
})

})

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

serezhka1986

Дата 23.12.2011, 15:49 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 215
Регистрация: 12.6.2009

Репутация: нет
Всего: 0

В очередной раз спасибо! smile

Сейчас попробую!

--------------------

Для некоторых лучший способ написать что-нибудь осмысленное - это сесть жопой на клавиатуру...

serezhka1986

Дата 26.12.2011, 11:50 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 215
Регистрация: 12.6.2009

Репутация: нет
Всего: 0

Подскажите, пожалуйста, сто хранится в переменной $_POST после отправки через data:$('form').serialize()?

--------------------

Для некоторых лучший способ написать что-нибудь осмысленное - это сесть жопой на клавиатуру...

ksnk

Дата 26.12.2011, 14:14 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

serezhka1986, Можно отлаживать скрипт в Chome или в FireFox+Firebug. Там можно ходить по точкам останова и выполнять javascript операторы "на лету".

$('form').serialize() будет содержать строку, в которой будут перечислены все поля формы в виде имя=зачение этого поля. Все эти поля будут отделены друг от друга символом &. Примерно такие-же данные будут отосланы при нажатии на кнопку submit формы. Никакой дополнительной обработки на сервере как правило не требуется.

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

serezhka1986

Дата 26.12.2011, 14:50 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 215
Регистрация: 12.6.2009

Репутация: нет
Всего: 0

А если использовать $('form').serializeArray() , то вернется массив?

--------------------

Для некоторых лучший способ написать что-нибудь осмысленное - это сесть жопой на клавиатуру...

ksnk

Дата 27.12.2011, 14:30 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

http://api.jquery.com/serialize/
http://api.jquery.com/serializeArray/

Да. вернется массив

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

serezhka1986

Дата 28.12.2011, 12:03 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 215
Регистрация: 12.6.2009

Репутация: нет
Всего: 0

Скажите, а если отправлять данные таким макаром:

Код


function monitfilter() { 
var tagsArray = new Array();
var id_year = $('select[name="YEAR_MON"]').val();
var id_week = $('select[name="PERIOD"]').val();
$('input[name="filtcheck"]:checked').each(function() {  
    tagsArray.push(this.value);
    }); 


   $.ajax({
     url:'/includes/test.php',
     data: {id_year: id_year, id_week:id_week, 'sect[]':tagsArray},
     method:'post',
     cache: false,
     success: function(responce){ $('div[name="resultfilter"]').html(responce);}
   })
}

Так неправильно? Потому, как в /includes/test.php только одна строчка кода:

Код


<? print_r ($_POST); ?>

Результат возвращает Array()

--------------------

Для некоторых лучший способ написать что-нибудь осмысленное - это сесть жопой на клавиатуру...

serezhka1986

Дата 28.12.2011, 13:17 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 215
Регистрация: 12.6.2009

Репутация: нет
Всего: 0

Нашел ошибку:

Код


function monitfilter() { 
var tagsArray = new Array();
var id_year = $('select[name="YEAR_MON"]').val();
var id_week = $('select[name="PERIOD"]').val();
$('input[name="filtcheck"]:checked').each(function() {  
    tagsArray.push(this.value);
    }); 

   $.ajax({
     type:"POST",
     url:"/includes/test.php",
     data: {"id_year":id_year, "id_week":id_week, "sect[]":tagsArray},
     cache: false,
     success: function(responce){ $('div[name="resultfilter"]').html(responce);}
   })
}

--------------------

Для некоторых лучший способ написать что-нибудь осмысленное - это сесть жопой на клавиатуру...

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »