Javascript-форум - Как убрать кнопку и добавить надпись "Идет загрузка"

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)

Как убрать кнопку и добавить надпись "Идет загрузка"

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

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

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

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

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

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

<?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>

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

Вот этот имеете ввиду?

<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>

Цитата:

Сообщение от 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", я думаю, вернуть какой-нибудь код ошибки будет достаточно.

<?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>

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