淡化联系表格“谢谢”Div

时间:2015-02-10 02:21:41

标签: javascript jquery forms

我有一个使用javascript和contact.php代码的电子邮件提交表单

这是javascript

function createRequestObject() {
    var ro;
    var browser = navigator.appName;
    if(browser == "Microsoft Internet Explorer"){
        ro = new ActiveXObject("Microsoft.XMLHTTP");
    }else{
        ro = new XMLHttpRequest();
    }
    return ro;
}
var http = createRequestObject();
function sendemail() {
    var email = document.contactform.email.value;
    document.contactform.send.disabled=true; 
    http.open('get', '/contact.php?email='+email+'&action=send');
    http.onreadystatechange = handleResponse;
    http.send(null);
}
function handleResponse() {
    if(http.readyState == 4){
        var response = http.responseText;
        var update = new Array();
        if(response.indexOf('|' != -1)) {
            update = response.split('|');
            document.getElementById(update[0]).innerHTML = update[1];
        }
    }
}

这是contact.php的一部分

<?php

$to = ""; //This is the email address you want to send the email to
$subject_prefix = ""; //Use this if you want to have a prefix before the subject

if(!isset($_GET['action']))

{
die("You must not access this page directly!"); //Just to stop people from visiting contact.php normally
}

$subject = "Newsletter Sign Up"; //The senders subject
$message = trim($_GET['email']); //The senders subject
$email = ""; //The senders email address

mail($to,$subject,$message,"From: ".$email.""); //a very simple send

echo 'contactarea|<div id="thanks">thank you</div>'; //now lets update the "contactarea" div on the contact.html page. The contactarea| tell's the javascript which div to update.
?>

和HTML

<div id="contactarea">
<form name="contactform" id="contactform">
<input class ="email" type="text" name="email" id="inputbox" value="e-mail"
onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
<input type="submit" value="sign up" name="send" onclick="sendemail(); return false; " class="signup" >
</form>
</div>

我试图淡化&#34;谢谢你&#34; 5秒后,我遇到了一些麻烦。

如果我点击提交按钮将其设置为淡入淡出,它似乎无法正常工作,因为它在点击按钮之前不存在。

如果我将其设置为在加载时淡入淡出,则仅在淡入淡出时间之前单击按钮时才有效

有没有办法淡出不是在页面的负载上,而是在div本身的负载上?

2 个答案:

答案 0 :(得分:1)

尝试

echo 'contactarea|<div id="thanks">thank you</div>';

echo '
contactarea|<div id="thanks">thank you</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
    setTimeout(function(){
        $("#thanks").fadeOut();
    },5000);
});
</script>
';

答案 1 :(得分:0)

怎么样:

function sendemail() {
var email = document.contactform.email.value;
document.contactform.send.disabled=true; 
http.open('get', '/contact.php?email='+email+'&action=send');
http.onreadystatechange = handleResponse;
http.send(null);
}

为:

function sendemail() {
var email = document.contactform.email.value;
document.contactform.send.disabled=true; 
http.open('get', '/contact.php?email='+email+'&action=send');
http.onreadystatechange = handleResponse;
http.send(null);

    setTimeout(function(){
        $(document).find("#thanks").fadeOut();
    },5000);

}