Как из alert сделать автоматику

Тема в разделе "JavaScript", создана пользователем AGENT131313, 4 июл 2012.

Модераторы: ZiX
  1. AGENT131313

    AGENT131313 Забанен

    Регистр.:
    17 мар 2009
    Сообщения:
    279
    Симпатии:
    28
    Здраствуйте.
    Появилась потребность сделать автоматический вывод информации врзле поля ввода информации, на данный момент это сделано через alert при помощи нажания кнопки.
    Подскажите, каким образом сделать чтобы было без кнопки? тоесть вписал инфу и рядо возле поля вывело что что раньше в окошке при открытии.
     
  2. ShaDeRzz

    ShaDeRzz

    Регистр.:
    16 окт 2007
    Сообщения:
    176
    Симпатии:
    65
    Код:
    <textarea id="your_textarea"></textarea>
    <div id="your_message_div">Тут будет появляться текст</div> 
    <script>
    $('#your_textarea').change(function() {
    var text_to_show =  $('#your_textarea').html(); 
      $('#your_message_div').html(text_to_show);
    });
    </script>
    В переменную text_to_show вы можете загнать статичный текст, который хотите выводить в момент когда юзер начинает вводить текст в textarea.

    Надеюсь, я правильно понял задачу?

    Забыл отметить, что вышеуказанный код актуален при наличии подключенной библиотеки jquery
     
  3. AGENT131313

    AGENT131313 Забанен

    Регистр.:
    17 мар 2009
    Сообщения:
    279
    Симпатии:
    28
    Дело в том что у меня идет проверка, и выводит 3 разных сообщения в зависимости от результата.
    Вот код который использую:

    И форма ввода у меня input
     
  4. ShaDeRzz

    ShaDeRzz

    Регистр.:
    16 окт 2007
    Сообщения:
    176
    Симпатии:
    65
    Ага... Причем проверка у вас идёт на результат, который отсылается на другую страницу...

    Тогда как-то так:
    Код:
    <input type="text" id="nick_for_search" />
    <div id="your_message_div">Тут будет появляться текст</div>
    <script>
    $('#your_textarea').change(function() {
      var nick_for_search=  $('#nick_for_search').val();
    $.post("file.php", { nick_for_search: nick_for_search},
            function(data) {
                if(data == 'error'){
                   $('#your_message_div').html('первый вариант!');
    }
                if(data == '1'){
                  $('#your_message_div').html('второй вариант!');
    }
                if(data == '2'){
                  $('#your_message_div').html('третий вариант!');
                }
            }
    );
    });
    </script>
    Но тут недостаток в том, что запрос будет отсылаться каждый раз, когда вы изменяете текст (добавляете символ, стираете и т.п.).
    Немного подумав, можно усовершенствовать сценарий до такого вида:

    Код:
    <input type="text" id="nick_for_search" />
    <div id="your_message_div">Тут будет появляться текст</div>
    <script>
    var timer_id;
    $("# nick_for_search ").keyup(function() {
      clearTimeout(timer_id);
      timer_id = setTimeout(function() { 
        var nick_for_search=  $('#nick_for_search').val();
     
    $.post("file.php", { nick_for_search: nick_for_search},
            function(data) {
                if(data == 'error'){
                   $('#your_message_div').html('первый вариант!');
    }
                if(data == '1'){
                  $('#your_message_div').html('второй вариант!');
    }
                if(data == '2'){
                  $('#your_message_div').html('третий вариант!');
                }
            }
    );
     
      }, 500);
    });
    </script>
     
    AGENT131313 нравится это.
  5. AGENT131313

    AGENT131313 Забанен

    Регистр.:
    17 мар 2009
    Сообщения:
    279
    Симпатии:
    28
    Поставил, но не катит, ничего не выводит
     
  6. zaxap83

    zaxap83 Постоялец

    Регистр.:
    6 дек 2010
    Сообщения:
    87
    Симпатии:
    28
    А jQuery у тс вообще подключен? Для наглядности при работе с ajax (да и вообще с js) очень полезно использовать firebug для firefox, сразу видно ошибки в коде js и в консоли видно ajax запрос/ответ, если что-то не заладится, то видно хоть в каком направлении рыть.
     
  7. AGENT131313

    AGENT131313 Забанен

    Регистр.:
    17 мар 2009
    Сообщения:
    279
    Симпатии:
    28
    Да, естественно подключено))
     
  8. ShaDeRzz

    ShaDeRzz

    Регистр.:
    16 окт 2007
    Сообщения:
    176
    Симпатии:
    65
    1) У вас скрипт - с именем file.php?
    2) file.php кроме 1, 2 или error, согласно условию, ничего выводить не должен. Никаких тегов, пробелов, прочих текстов.
    Чтобы проверить, добавьте следующее:
    вместо
    Код:
    function(data) {
                if(data == 'error'){
                  $('#your_message_div').html('первый вариант!');
    }
                if(data == '1'){
                  $('#your_message_div').html('второй вариант!');
    }
                if(data == '2'){
                  $('#your_message_div').html('третий вариант!');
                }
            }
    вставьте:

    Код:
    function(data) {
                  $('#your_message_div').html(data);
            }

    3) Включите в фаерфоксе firebug или в Хроме - Консоль Ошибок. Убедитесь, что ошибок нет. Если есть, устраняйте.
    В крайнем случае - выложите тут ваши файлы, я их исправлю
     
  9. AGENT131313

    AGENT131313 Забанен

    Регистр.:
    17 мар 2009
    Сообщения:
    279
    Симпатии:
    28
    Нет. Файл не с таким названием, но эти переменные я вставлял в ваш код свои. Вот вам полностью код вывода:
     
  10. ShaDeRzz

    ShaDeRzz

    Регистр.:
    16 окт 2007
    Сообщения:
    176
    Симпатии:
    65
    Вот полностью готовое и протестированное решение:

    PHP:
    <?php
    //header("Content-Type: content=text/html; charset=utf-8");
    $section = isset($_POST['section'])?$_POST['section']:'start';
     
     
    switch (
    $section){
       
        case 
    "start":
            
    ?>
           
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"  type="text/javascript"></script>
            <script>       
            $(document).ready(function()
            {
                function send_data(){
                    var nick_for_search=  $('#nick_for_search').val();
                    $.post("test-user-nick.php", { nick_for_search: nick_for_search, section : 'search'},
                    function(data) {
                        if(data == 'error'){
                            $('#your_message_div').html('Неправильно введен никнейм');
                            //alert('Неправильно введен никнейм');
                        }else if(data == '1'){
                            $('#your_message_div').html('Логин свободен!');
                            //alert('Логин свободен!');
                        }else if(data == '2'){
                            $('#your_message_div').html('Логин занят!');
                            //alert('Логин занят!');
                        }else{
                            $('#your_message_div').html('Ошибко:');
                        }
                    });
                }
     
     
                $("#test_nick").click(function(){send_data();});
     
                var delay = (function(){
                    var timer = 0;
                    return function(callback, ms){
                        clearTimeout (timer);
                        timer = setTimeout(callback, ms);
                    };
                })();
                   
     
                $("#nick_for_search").keyup(function() {
                    delay(function(){
                        send_data();
                    }, 1000 );
                });
               
     
            }); 
            </script>
            <input type="text" id="nick_for_search" name="new_user_name" class="f_input" /> <a href="#" id="test_nick">проверить</a>
            <div id="your_message_div"></div>
           
           
            <?php
           
            
    break;
           
        case 
    "search":
           
            
    $aviable_nick_arr = array('test','user','admin');
           
            
    $nick_for_search = isset($_POST['nick_for_search'])?$_POST['nick_for_search']:'';
            
    //echo $nick_for_search.' --- ';
            
    if ($nick_for_search == ''){
                echo 
    'error';
                exit;
            }
            if (
    in_array($nick_for_search$aviable_nick_arr)){
                echo 
    '2';
            }else{
                echo 
    '1';
            }
            exit;
            break;
       
    }
     
     
     
    ?>