Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.07.2015, 15:07
Интересующийся
Отправить личное сообщение для Bananza Посмотреть профиль Найти все сообщения от Bananza
 
Регистрация: 26.12.2014
Сообщений: 21

ajax отправка формы
Всем привет!
Как сделать так чтобы форма отправлялась не по нажатию кнопки а при вводе данных в поля (Автоматический подсчёт).
P.S в примере jquery, но можно помочь и на JavaScript дальше разберусь.
Заранее спасибо
<form id="ajax-calculation-form" action="<?=$_SERVER['PHP_SELF']?>" method="POST">
Количество человек:
<input type="text"  id="input1" name="number1" size="5" pattern="\d{1,5}" >
Количество дней:
<input type="text"  id="input2" name="number2" size="5" pattern="\d{1,5}" >
</form>

jQuery(document).ready(function() {
jQuery("#ajax-calculation-form").submit(function(){
var str = jQuery(this).serialize();
alert(str);
jQuery.ajax({
type: "POST",
/*url: "/wp-content/themes/clean_by_saxap/calc/calc.php",*/
url: "wp-content/themes/bridge/hostelcalc/calc.php",
data: str,
success: function(msg) {

if(msg == 'OK') {
/*result = '<div class="notification_ok">Ваше сообщение было отправлено</div>';*/
result = '';
$("#fields1").hide();
} else {
result = msg;
}
jQuery('#note1').html(result)/*.fadeIn().delay(3000).fadeOut("slow");*/

/*$(".btn_calc").on( "click", function() {*/

jQuery(".btn_calc").on( "click", function() {

jQuery.when( effect() ).done(function() {

});
});
}
});
return false;
});
});

Последний раз редактировалось Bananza, 07.07.2015 в 15:17.
Ответить с цитированием
  #2 (permalink)  
Старый 07.07.2015, 16:26
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

Надо повесить все то же самое на событие нажатия кнопок в сфокусированном поле ввода: keyup например.
Ответить с цитированием
  #3 (permalink)  
Старый 08.07.2015, 11:56
Интересующийся
Отправить личное сообщение для Bananza Посмотреть профиль Найти все сообщения от Bananza
 
Регистрация: 26.12.2014
Сообщений: 21

Спасибо Вам большое!
jQuery(document).ready(function() {
jQuery("#ajax-calculation-form").keyup(function(){
var str = jQuery(this).serialize();
alert(str);
jQuery.ajax({
type: "POST",
/*url: "/wp-content/themes/clean_by_saxap/calc/calc.php",*/
url: "wp-content/themes/bridge/hostelcalc/calc.php",
data: str,
success: function(msg) {

if(msg == 'OK') {
/*result = '<div class="notification_ok">Ваше сообщение было отправлено</div>';*/
result = '';
$("#fields1").hide();
} else {
result = msg;
}
jQuery('#note1').html(result)/*.fadeIn().delay(3000).fadeOut("slow");*/

/*$(".btn_calc").on( "click", function() {*/

jQuery(".btn_calc").on( "click", function() {

jQuery.when( effect() ).done(function() {

});
});
}
});
return false;
});
});
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Ajax и отправка файлов с формы miker059 jQuery 5 10.01.2018 03:12
Отправка Ajax комментов блокирует все формы arimanecro AJAX и COMET 9 07.11.2014 17:32
Не работает отправка формы через ajax Asrover jQuery 8 23.08.2014 16:44
Ajax отправка формы без перезагрузки страници Slava-web AJAX и COMET 10 27.02.2014 18:14
Отправка формы по ENTER (ajax) и перенос строки VEGA jQuery 18 01.03.2013 14:09