Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.03.2013, 19:25
Новичок на форуме
Отправить личное сообщение для nsk_1945 Посмотреть профиль Найти все сообщения от nsk_1945
 
Регистрация: 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.
Ответить с цитированием
  #2 (permalink)  
Старый 01.03.2013, 20:00
Новичок на форуме
Отправить личное сообщение для nsk_1945 Посмотреть профиль Найти все сообщения от nsk_1945
 
Регистрация: 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;
        }
    });

теперь строка передается но не выполняется передача данных формы, как заново запустить ее?
Ответить с цитированием
  #3 (permalink)  
Старый 02.03.2013, 09:55
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 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();
        }
    });
});
Ответить с цитированием
  #4 (permalink)  
Старый 04.03.2013, 14:18
Новичок на форуме
Отправить личное сообщение для nsk_1945 Посмотреть профиль Найти все сообщения от nsk_1945
 
Регистрация: 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
Ответить с цитированием
  #5 (permalink)  
Старый 04.03.2013, 15:59
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 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>
Ответить с цитированием
  #6 (permalink)  
Старый 04.03.2013, 16:43
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

А нафиг iframe. Не проще ли через $.post() ?
Ответить с цитированием
  #7 (permalink)  
Старый 04.03.2013, 16:50
Новичок на форуме
Отправить личное сообщение для nsk_1945 Посмотреть профиль Найти все сообщения от nsk_1945
 
Регистрация: 01.03.2013
Сообщений: 6

вообщем сделал как описал выше, только она загвоздка почему то не работает в Лисе, может там свой обработчик отправки формы?

Последний раз редактировалось nsk_1945, 04.03.2013 в 17:26.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать disabled кнопки во время отправки формы? Bad Request Events/DOM/Window 7 16.04.2014 13:49
Отправка формы по нажатию на ENTER Vuzy Общие вопросы Javascript 9 24.01.2013 23:36
Как отделить нажатие кл. Enter в поле INPUT от нажатия Enter в выпадающем списке? Маэстро Events/DOM/Window 7 18.07.2012 09:11
Создаваемое поле невидимо для формы. Dimasick Элементы интерфейса 2 15.04.2011 19:59
Отмена submit по нажатию Enter Bratok Events/DOM/Window 1 28.04.2009 05:11