Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 29.08.2011, 06:30
Интересующийся
Отправить личное сообщение для Jnas Посмотреть профиль Найти все сообщения от Jnas
 
Регистрация: 28.08.2011
Сообщений: 20

Как убрать кнопку и добавить надпись "Идет загрузка"
Здравствуйте ув.-мые форумчанины.
Сразу хочу сказать, в яваскриптах я полный чайник или самовар, по этой причине прошу Вашей помощи.
Есть у мня страница, в этой странице имеется 2 поля ввода
в одно вбивают данные, в другое капчу, и после чего нажимает пользователь на кнопку "отправить"
Что стоить подправить в коде, чтоб после нажатия кнопки отправить , кнопка исчезала и появлялась надпись "Идет загрузка" и только после загрузки данных, опять появлялась данная кнопка.
Или хотя бы просто , после нажатия кнопки "Идет загрузка". после получения данных данная надпись исчезала.

На данный момент ситуация такова, данная загружает (но не ясно загружает или нет, поэтой причине охото нажать еще раз на кнопку отправить и возникает караул)

Код конечно не мой, взял на просторах инета и чуть подкорректировал

Имеется код

Код:
<?php
ob_start("ob_gzhandler");
?>
<html>
<head>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
function sendRequest() {
new Ajax.Request("/ajaxvalidate.php",
{
method: 'post',
parameters: 'username='+$F('username')+'&recaptcha_challenge_field='+$F('recaptcha_challenge_field')+'&recaptcha_response_field='+$F('recaptcha_response_field'),
onComplete: showResponse
});
}
function showResponse(req){
$('show').innerHTML= req.responseText;
Recaptcha.reload();
}
</script>
<style type="text/css">
P.yellow {background-color: #ffff00;}
</style>
</head>
<body>

<form action="/ajaxvalidate.php" method="post" onsubmit="return false;">

Вставте ссылку:<br />
<input style="background-color: #FFFFC0" type="text" name="username" id="username" size="90">
<br />
<?php
require_once('recaptchalib.php');
$publickey = "мой ключик)"; 
echo recaptcha_get_html($publickey);
?>
<input type="submit" value="Отправить" onClick="sendRequest()">
</form>

<p class="yellow" id="show"></p>
<br />
</font>
</body>
</html>
Ответить с цитированием
  #2 (permalink)  
Старый 29.08.2011, 08:24
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

Понятия не имею как это делать с прототиповской библой, но через jQuery это делается так:
Подключаем библу jQuery
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

Добавляем такой скрипт:
function sendRequest() {
    $.ajax({
        url: "/ajaxvalidate.php",
        type: 'post',
        dataType: 'html',
        data: 'username='+$('#username').val()+'&recaptcha_challenge_field='+$('#recaptcha_challenge_field').val()+'&recaptcha_response_field='+$('#recaptcha_response_field').val(),
        success: function( data ) {
            $('#show').html( data );
            // тут отрабатываешь появления кнопки обратно...
            // например так
            $('#text_label').hide();
            $('#submit_button').show();
        },
        error: function( xhr, status ) {
            // тут отрабатываешь появления кнопки обратно и выдаешь сообщение об ошибке
        }
    });
    // тут прячешь кнопку и отображаешь текст
    // например так
    $('#text_label').show();
    $('#submit_button').hide();
}
Ответить с цитированием
  #3 (permalink)  
Старый 29.08.2011, 11:28
Интересующийся
Отправить личное сообщение для Jnas Посмотреть профиль Найти все сообщения от Jnas
 
Регистрация: 28.08.2011
Сообщений: 20

Заменил свой function на Ваш function
подключил jquery , но теперь капча перестала работать.(

Может мне надо отсюда что нить добавить ?

Последний раз редактировалось Jnas, 29.08.2011 в 11:31.
Ответить с цитированием
  #4 (permalink)  
Старый 29.08.2011, 11:34
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

success: function( data ) {
            $('#show').html( data );
            // тут отрабатываешь появления кнопки обратно...
            // например так
            $('#text_label').hide();
            $('#submit_button').show();
*!*
            Recaptcha.reload();
*/!*
        },
Ответить с цитированием
  #5 (permalink)  
Старый 29.08.2011, 11:59
Интересующийся
Отправить личное сообщение для Jnas Посмотреть профиль Найти все сообщения от Jnas
 
Регистрация: 28.08.2011
Сообщений: 20

блин.... чето не хочет работать, капчу то грузит (и меня заодно)
но вот на неверный ввод и вообще на кнопку отправить не реагирует будто. Может я что то напутал
Вот весь теперь код
<?php
ob_start("ob_gzhandler");
?>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
function sendRequest() {
    $.ajax({
        url: "/ajaxvalidate.php",
        type: 'post',
        dataType: 'html',
        data: 'username='+$('#username').val()+'&recaptcha_challenge_field='+$('#recaptcha_challenge_field').val()+'&recaptcha_response_field='+$('#recaptcha_response_field').val(),
        success: function( data ) {
            $('#show').html( data );
            // тут отрабатываешь появления кнопки обратно...
            // например так
            $('#text_label').hide();
            $('#submit_button').show();
           Recaptcha.reload(); 
        },
        error: function( xhr, status ) {
            // тут отрабатываешь появления кнопки обратно и выдаешь сообщение об ошибке
        }
    });
    // тут прячешь кнопку и отображаешь текст
    // например так
    $('#text_label').show();
    $('#submit_button').hide();
</script>

<style type="text/css">
P.yellow {background-color: #ffff00;}
</style>
</head>
<body>

<form action="/ajaxvalidate.php" method="post" onsubmit="return false;">

Вставте ссылку:<br />
<input style="background-color: #FFFFC0" type="text" name="username" id="username" size="90">
<br />
<?php
require_once('recaptchalib.php');
$publickey = "fgdf"; 
echo recaptcha_get_html($publickey);
?>
<input type="submit" value="Отправить" onClick="sendRequest()">
</form>

<p class="yellow" id="show"></p>
<br />
</font>
</body>
</html>

Последний раз редактировалось Jnas, 29.08.2011 в 12:03.
Ответить с цитированием
  #6 (permalink)  
Старый 29.08.2011, 12:01
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

Ты сгенерированный код покажи, тот что не php файле, а тот что на выходе, готовый.
Ответить с цитированием
  #7 (permalink)  
Старый 29.08.2011, 12:05
Интересующийся
Отправить личное сообщение для Jnas Посмотреть профиль Найти все сообщения от Jnas
 
Регистрация: 28.08.2011
Сообщений: 20

Вот этот имеете ввиду?
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
function sendRequest() {
    $.ajax({
        url: "/ajaxvalidate.php",
        type: 'post',
        dataType: 'html',
        data: 'username='+$('#username').val()+'&recaptcha_challenge_field='+$('#recaptcha_challenge_field').val()+'&recaptcha_response_field='+$('#recaptcha_response_field').val(),
        success: function( data ) {
            $('#show').html( data );
            // тут отрабатываешь появления кнопки обратно...
            // например так
            $('#text_label').hide();
            $('#submit_button').show();
            Recaptcha.reload();
        },
        error: function( xhr, status ) {
            // тут отрабатываешь появления кнопки обратно и выдаешь сообщение об ошибке
        }
    });
    // тут прячешь кнопку и отображаешь текст
    // например так
    $('#text_label').show();
    $('#submit_button').hide();
</script>

<style type="text/css">
P.yellow {background-color: #ffff00;}
</style>
</head>
<body>

<form action="/ajaxvalidate.php" method="post" onsubmit="return false;">

Вставте ссылку:<br />
<input style="background-color: #FFFFC0" type="text" name="username" id="username" size="90">

<br />
<script type="text/javascript" src="http://api.recaptcha.net/challenge?k=мой паблик кей"></script>

	<noscript>
  		<iframe src="http://api.recaptcha.net/noscript?k=мой паблик кей" height="300" width="500" frameborder="0"></iframe><br/>
  		<textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
  		<input type="hidden" name="recaptcha_response_field" value="manual_challenge"/>
	</noscript><input type="submit" value="Отправить" onClick="sendRequest()">
</form>

<p class="yellow" id="show"></p>
<br />
</font>
</body>
</html>
Ответить с цитированием
  #8 (permalink)  
Старый 29.08.2011, 12:17
Аватар для B@rmaley.e><e
⊞ Развернуть
Отправить личное сообщение для B@rmaley.e><e Посмотреть профиль Найти все сообщения от B@rmaley.e><e
 
Регистрация: 11.01.2010
Сообщений: 1,810

Сообщение от devote
        error: function( xhr, status ) {
            // тут отрабатываешь появления кнопки обратно и выдаешь сообщение об ошибке
        }
Сообщение от api.jquery.com
error(jqXHR, textStatus, errorThrown)
A function to be called if the request fails.
Надо ещё как-то сказать клиенту, что каптча у него неправильная и запрос должен провалиться. Хотя на сайте api jQuery не сказано, каковы условия для "request fails", я думаю, вернуть какой-нибудь код ошибки будет достаточно.
Ответить с цитированием
  #9 (permalink)  
Старый 29.08.2011, 12:20
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

<?php
ob_start("ob_gzhandler");
?>
<html>
  <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script type="text/javascript">
    function sendRequest() {

        $('#error_label').hide();

        $.ajax({
            url: "/ajaxvalidate.php",
            type: 'post',
            dataType: 'html',
            data: 'username='+$('#username').val()+'&recaptcha_challenge_field='+$('#recaptcha_challenge_field').val()+'&recaptcha_response_field='+$('#recaptcha_response_field').val(),
            success: function( data ) {
                $('#show').html( data );
                // тут отрабатываешь появления кнопки обратно...
                // например так
                $('#text_label').hide();
                $('#submit_button').show();
                Recaptcha.reload(); 
            },
            error: function( xhr, status ) {
                $('#text_label').hide();
                $('#error_label').show();
                $('#submit_button').show();
            }
        });
        // тут прячешь кнопку и отображаешь текст
        // например так
        $('#text_label').show();
        $('#submit_button').hide();
    }
  </script>
 
  <style type="text/css">
      P.yellow {background-color: #ffff00;}
  </style>
</head>
<body>
  <form action="/ajaxvalidate.php" method="post" onsubmit="return false;">
    Вставте ссылку:<br />
    <input style="background-color: #FFFFC0" type="text" name="username" id="username" size="90">
    <br />
<?php
  require_once('recaptchalib.php');
  $publickey = "fgdf"; 
  echo recaptcha_get_html($publickey);
?>
    <div id="error_label" style="display: none;">Произошла ошибка</div>
    <div id="text_label" style="display: none;">Идет отправка, подождите...</div>
    <input id="submit_button" type="submit" value="Отправить" onClick="sendRequest()">
  </form>
 
  <p class="yellow" id="show"></p>
  <br />
  </font>
</body>
</html>
Ответить с цитированием
  #10 (permalink)  
Старый 29.08.2011, 12:55
Интересующийся
Отправить личное сообщение для Jnas Посмотреть профиль Найти все сообщения от Jnas
 
Регистрация: 28.08.2011
Сообщений: 20

Спасибо большое! Всё прекрасно работает!!!
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как убрать округление bookman Events/DOM/Window 4 02.08.2011 00:30
Добавить функцию, не знаю как сделать maxim96 Элементы интерфейса 0 23.07.2011 21:16
Как добавить метод ко всем элементам? zubr80 Events/DOM/Window 3 06.04.2009 05:46
Как добавить свой блог в раздел feeds этого сайта IzumeRoot Ваши сайты и скрипты 13 30.10.2008 21:11
Подскажите как убрать часть текста при нажатии на кномпу или гиперссылку. potkin Общие вопросы Javascript 6 10.10.2008 07:55