2015-02-02 4 views
-2

Я использую Ajax с PHP для отправки данных на PHP и получения вывода на мою текущую страницу без загрузки, я отправляю данные с помощью кнопки «Отправить», и когда эта кнопка нажата Я заменил эту кнопку загрузкой.gif. Теперь, после завершения php-скрипта, и я получаю вывод, load.gif продолжает показывать. Мой вопрос: как восстановить кнопку отправки после завершения PHP-скрипта, и я хочу отправить больше данных без обновления страницы?Восстановление кнопки отправки после завершения php-скрипта

Edit:
form.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
    <title>JQuery Form Example</title> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> 
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function(){ 
     $("#myform").validate({ 

      submitHandler: function(form) { 
       // do other stuff for a valid form 
       $.post('process.php', $("#myform").serialize(), function(data) { 
        $('#results').html(data); 
       }); 
      } 
     }); 
    }); 
    </script> 
    <script type="text/javascript"> 
    function ButtonClicked(){ 

    document.getElementById("formsubmitbutton").style.display = "none"; // to undisplay 
    document.getElementById("buttonreplacement").style.display = ""; // to display 
    return true; 
    } 


    </script> 


</head> 
<body> 
<form name="myform" id="myform" action="" method="POST"> 
<!-- The Name form field --> 
    <label for="name" id="name_label">Name</label> 
    <input type="text" name="name" id="name" size="30" value=""/> 
    <br> 
<!-- The Email form field --> 
    <label for="email" id="email_label">Email</label> 
    <input type="text" name="email" id="email" size="30" value=""/> 
    <br> 
<!-- The Submit button --> 
       <div align="center" style="margin-bottom:-100px;" id="formsubmitbutton"><input type="submit" value="Submit" onclick="ButtonClicked()" /></div> 
     <center><div id="buttonreplacement" style="display:none;"> 
     <img src="http://redscopestudios.com/wp-content/uploads/edge_suite/project/red-scope_6/images/red_loader.gif"alt="loading..."></div></center> 
</form> 
<!-- We will output the results from process.php here --> 
<div id="results"><div> 
</body> 
</html> 

process.php

<?php 
    print "Form submitted successfully: <br>Your name is <b>".$_POST['name']."</b> and your email is <b>".$_POST['email']."</b><br>"; 
?> 
+1

Сообщите нам ваш код! – Zl3n

+1

Не заменяйте кнопку, спрячьте ее, а затем просто покажите ее снова, как только скрипт PHP завершится. –

+0

Выполняйте то же самое, чтобы изменить его, но в другом направлении в вашей функции успеха. – baao

ответ

0

Так что, если я понимаю, что вы хотите правильно, вы можете сделать следующее:

submitHandler: function(form) { 
    // do other stuff for a valid form 
    $("#formsubmitbutton").hide(); 
    $("#buttonreplacement").show(); 

    $.post('process.php', $("#myform").serialize(), function(data) { 
     $('#results').html(data); 
     $("#formsubmitbutton").show(); 
     $("#buttonreplacement").hide(); 
    }); 
} 

Затем удалить ButtonClicked метод, он не нужен, если вы уже закреплять в виде представить событие.

0
$('button').fadeOut(); 

Затем после Аякса закончил (в обратный вызов)

$('button').fadeIn(); 

Это d затушевывает нашу кнопку, а затем снова исчезает. Замена кнопки не требуется, и ее не следует делать.

Смежные вопросы