
01.03.2013, 19:25
|
Новичок на форуме
|
|
Регистрация: 01.03.2013
Сообщений: 6
|
|
Приостановка отправки формы по нажатию на поле клавиши ENTER
На форуме уже была тема похожая на мою, но там как раз не полностью описан процесс отправки формы.
Что требуется: Без изменения html разметки страницы нужно ajax запросом отправить строку полученную из поля(input:text) формы. При вводе текста и нажатии кнопки ENTER происходит отправка формы, нужно перед оправкой формы послать запрос ajax. В написанном мною коде это удается, но только при выводе alert() на странице. Если же без alert(), то по моему мнению данные не успевают отправиться а страница уже меняется. Вот код:
function ajax(uOut, searchKW){
$.ajax({
type: "POST",
url: url,
data: { lang: language,
ref: referer,
urlOut: uOut,
skw: searchKW // Нужная строка
}});
}
$("input:text").keydown(function(evt){
var id = this.parentNode.id; //Узнаем id родителя(то есть нашей формы)
if(evt.keyCode == 13){ // Если нажата клавиша ENTER
infoStr = searchInfo(); // Получаем нашу строку
$(id).on("submit", ajax("", infoStr)); // Выполняем Ajax
alert(infoStr);// Если здесь ставить его то все работает как только убираю, не работает.
}
});
Также выслушаю предложения как сделать тоже самое но по нажатию на input:submit
Последний раз редактировалось nsk_1945, 01.03.2013 в 20:02.
|
|

01.03.2013, 20:00
|
Новичок на форуме
|
|
Регистрация: 01.03.2013
Сообщений: 6
|
|
в этой теме освещается как остановить выполнение действия браузера по нажатию на клавишу ENTER. Прочтя данную тему изменил код так
$("input:text").keydown(function(evt){
var id = this.parentNode.id; //Узнаем id родителя(то есть нашей формы)
if(evt.keyCode == 13){ // Если нажата клавиша ENTER
infoStr = searchInfo(); // Получаем нашу строку
$(id).on("submit", ajax("", infoStr)); // Выполняем Ajax
//alert(infoStr);// Если здесь ставить его то все работает как только убираю, не работает.
return false;
}
});
теперь строка передается но не выполняется передача данных формы, как заново запустить ее?
|
|

02.03.2013, 09:55
|
 |
Профессор
|
|
Регистрация: 11.09.2010
Сообщений: 8,804
|
|
nsk_1945, ты хочешь и рыбку съесть и в воду не лезть?
Опередись: либо ты отменяешь отправку формы, либо нет, но тогда текущий документ будет выгружен и загружен новый, и само собой твой скрипт (отправка ajax) не успеет отработать и будет прерван.
Можно конечно отметить отправку формы, или отправлять ее после ответа на ajax-запрос, тогда все будет работать, но возникает вопрос - зачем делать два запроса на сервер (ajax + POST) если можно сделать один (либо ajax либо POST) ?
$("form").submit(function(e){
var form = this;
var infoStr = searchInfo(); // Получаем нашу строку
$.ajax({
type: "POST",
url: url,
data: {
lang: language,
ref: referer,
urlOut: "",
skw: infoStr // Нужная строка
},
success: function() {
// пришел ответ, отправляем форму, не забывая удалить обработчик, иначе пойдет по кругу
$(form).off('submit').submit();
}
});
});
|
|

04.03.2013, 14:18
|
Новичок на форуме
|
|
Регистрация: 01.03.2013
Сообщений: 6
|
|
Наверно я не так изложил свою задумку  . Итак имеется некий сайт на котором есть форма поиска с полем input типа text, мне необходимо записывать то что введет пользователь в этот input(то есть то что он ищет). И отправлять эту строку или символ по отправке формы, только не туда куда отправляется сама форма а на свой сайт. Вот что у меня получилось:
function ajax(uOut, searchKW){
$.ajax({
type: "POST",
url: url,
data: { lang: language,
ref: referer,
urlOut: uOut,
skw: searchKW
}});
}
function getChar(event) {
if (event.which == null) { // IE
if (event.keyCode < 32) return null; // спец. символ
return String.fromCharCode(event.keyCode)
}
if (event.which!=0 && event.charCode!=0) { // все кроме IE
if (event.which < 32) return null; // спец. символ
return String.fromCharCode(event.which); // остальные
}
return null; // спец. символ
}
function searchInfo() {
var str = "";
$("input:text").keypress(function(evt){
str += getChar(evt)+"";
$("#texy").attr("value", str);
});
$("input:text").keydown(function(evt){ // При нажатии на backspace
if(evt.keyCode == 8){
str = str.substr(0, str.length-1);
$("#texy").attr("value", str);
}
});
return $("#texy").attr("value");
}
$(document).ready(function () {
$("<input>").attr({
type: "hidden",
id: "texy"
}).appendTo("form"); // добавляем скрытое поле для хранения строки
var infoStr = searchInfo();
$("input:text").keydown(function(evt){ // Если нажимается любая клавиша в input
var id = this.parentNode.id;
if(evt.keyCode == 13){ // Если нажат ENTER
infoStr = searchInfo(); // Строка поиска
$(id).submit(ajax("",infoStr));
$("<img>").attr({
url: url,
alt: "img",
width: "1px",
height: "1px"
}).appendTo("#sib");
}
});
});
Может весь мой текст глупость и все решается тремя строчками, то прошу хотя бы толкнуть в сторону где искать. Также хотелось бы отметить что данный "костыль" не работает в firefox. Там вообще какие то странности: при попытке вывести alert во время отправки формы, он отображается и сразу пропадает(без моего действия), хотя в других браузерах все норм. Версия лисы 19
|
|

04.03.2013, 15:59
|
без статуса
|
|
Регистрация: 25.05.2012
Сообщений: 8,219
|
|
nsk_1945,
Ну отправить Один Аякс в одну сторону, другой в другую,
Либо в одну сторону Аякс, в другую форму, форма сама автоматичеси отправит по энтер, если нужно без перезагрузки, отправляет форму по target в скрытый фрейм
<iframe name=idrame0 style="display:none"></iframe>
<form target="idrame0" action=???>
<input id=search name=search/>
</form>
|
|

04.03.2013, 16:43
|
 |
Профессор
|
|
Регистрация: 11.09.2010
Сообщений: 8,804
|
|
А нафиг iframe. Не проще ли через $.post() ?
|
|

04.03.2013, 16:50
|
Новичок на форуме
|
|
Регистрация: 01.03.2013
Сообщений: 6
|
|
вообщем сделал как описал выше, только она загвоздка почему то не работает в Лисе, может там свой обработчик отправки формы?
Последний раз редактировалось nsk_1945, 04.03.2013 в 17:26.
|
|
|
|