Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Как убрать кнопку и добавить надпись "Идет загрузка" (https://javascript.ru/forum/events/21095-kak-ubrat-knopku-i-dobavit-nadpis-idet-zagruzka.html)

Jnas 29.08.2011 06:30
Как убрать кнопку и добавить надпись "Идет загрузка"
 
Здравствуйте ув.-мые форумчанины.
Сразу хочу сказать, в яваскриптах я полный чайник или самовар, по этой причине прошу Вашей помощи.
Есть у мня страница, в этой странице имеется 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>

devote 29.08.2011 08:24
Понятия не имею как это делать с прототиповской библой, но через 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();
}

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

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

melky 29.08.2011 11:34 
success: function( data ) {
            $('#show').html( data );
            // тут отрабатываешь появления кнопки обратно...
            // например так
            $('#text_label').hide();
            $('#submit_button').show();
*!*
            Recaptcha.reload();
*/!*
        },

Jnas 29.08.2011 11:59
блин.... чето не хочет работать, капчу то грузит (и меня заодно)
но вот на неверный ввод и вообще на кнопку отправить не реагирует будто. Может я что то напутал
Вот весь теперь код 
<?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>

devote 29.08.2011 12:01
Ты сгенерированный код покажи, тот что не php файле, а тот что на выходе, готовый.

Jnas 29.08.2011 12:05
Вот этот имеете ввиду?
<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>

B@rmaley.e><e 29.08.2011 12:17
Цитата:
Сообщение от 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", я думаю, вернуть какой-нибудь код ошибки будет достаточно.

devote 29.08.2011 12: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() {

        $('#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>

Jnas 29.08.2011 12:55
Спасибо большое! Всё прекрасно работает!!!


Часовой пояс GMT +3, время: 09:06.