Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: для новичков > AJAX запрос при изменении любого элемента формы


Автор: serezhka1986 23.12.2011, 12:25
Необходимо отправить 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
Есть ли лучшее решение чем вызывать в каждом элементе в onchange скрипт отправки запроса?

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

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

Автор: ksnk 23.12.2011, 15:45
Код

$(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)
})

})

Автор: serezhka1986 23.12.2011, 15:49
В очередной раз спасибо!  smile 
Сейчас попробую!

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

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

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

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

Автор: ksnk 27.12.2011, 14:30
http://api.jquery.com/serialize/
http://api.jquery.com/serializeArray/

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

Автор: serezhka1986 28.12.2011, 12:03
Скажите, а если отправлять данные таким макаром:
Код

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
Нашел ошибку:
Код

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);}
   })
} 

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)