从php和jquery发送电子邮件

Question

i am trying to send email using jquery and php.

my html code is

<form id="contactform">
            <table border="0" cellpadding="0" cellspacing="0" width="186">
              <tbody>
                <tr>
                  <td bgcolor="#2A677E" width="25">&nbsp;</td>
                  <td bgcolor="#2A677E" width="161">&nbsp;</td>
                </tr>
                <tr>
                  <td bgcolor="#2A677E">&nbsp;</td>
                  <td bgcolor="#2A677E"><img src="images/icon-email.jpg" alt="" align="left" height="17" hspace="2" width="27"><span class="text-white">Email this page</span></td>
                </tr>
                <tr>

                  <td bgcolor="#2A677E">&nbsp;</td>


                  <td bgcolor="#2A677E">
                      <input name="email"  onFocus="this.value=''" onMouseOver="window.status='Enter email address here and tell a friend about this site...'; return true" onMouseOut="window.status='';return true" size="22" type="text" class="button required email">
                      <table border="0" cellpadding="0" cellspacing="0" width="80%">
                        <tbody>
                          <tr>
                            <td align="right" height="30"><input class="button-dark"  onMouseOver="window.status='Click to send an email (with this page address) to a friend! Enter email address above...'; return true" onMouseOut="window.status='';return true" value="Send" type="submit">


                            </td>


<div class="saving" style="background-color:#D1F4DA;border:1px solid #017F1F;display:none;width:175px; font-size:12px; padding:5px;text-align:center; margin-left:-25px; margin-top:0px; position:absolute;"><img src="validate/ajax-loader.gif"/> Please Wait Processing Request </div>
                              <div class="success"  style="background-color:#D1F4DA;border:1px solid #017F1F;display:none;width:175px; font-size:12px;padding:5px;text-align:center; margin-left:-25px; margin-top:0px; position:absolute;"> <img src="validate/validYes.png"/> Message Sent.<br />
                                Thanks.</div>
                              <div class="nosuccess" style="background-color:#ffebe8;border:1px solid #dd3c10;display:none;width:175px; font-size:12px;padding:5px;text-align:center; margin-left:-25px; margin-top:0px; position:absolute;"> <img src="validate/failed.png"/> Error Sending Email. </div>                        


                          </tr>

                        </tbody>
                    </table>
                     </form>

i have following jquery code.

<script src="validate/jquery.js" type="text/javascript"></script>
<script id="demo" type="text/javascript">
$(document).ready(function() {
        var validator = $("#contactform").validate({
        submitHandler: function() {

      $('div.sending').fadeIn('slow');
        var a     = <?php echo $_SERVER["HTTP_HOST"].$_SERVER["PHP_SELF"]; ?>;
        var email     = $('#email').attr('value');

          $.ajax({
            type: "POST",
            url: "send_page_friend.php",
            data: "a="+ a +"&email="+ email,
            success: function(html){

                if (html==1){
                $('div.saving').hide();
                $('div.success').fadeIn();
                setTimeout(function() {
                $('div.success').fadeOut('slow');

                }, 3000);
                }

                if (html==2){
                $('div.saving').hide();
                $('div.nosuccess').fadeIn();
                setTimeout(function() {
                $('div.nosuccess').fadeOut('slow');

                }, 3000);
                }




                }
              });
        }

    });

});
</script>

but the error i am getting is, once i press the submit button i go same page with query string like /?email=....

its not calling that php Page and also not hiding div.

Thanks

Answer 1

May I suggest IMO a bit cleaner solution. Your html is at least a messy one with inline styles, jQuery can be better and html formatting isolated in stylesheet.

html form:

<form id="contactform" class="t">
    <div class="h">
        <img src="images/icon-email.jpg" alt="" height="17" width="27"><span class="text-white">Email this page</span>
    </div>
    <div>
        <input id="email" type="text" class="button required email">
    </div>
    <div>
        <input id="send" type="submit" value="Send" class="b">
    </div>

    <div class="saving message"> <img src="validate/ajax-loader.gif"/> Please Wait Processing Request </div>
    <div class="success message"> <img src="validate/validYes.png"/> Message Sent.<br />Thanks.</div>
    <div class="nosuccess message"> <img src="validate/failed.png"/> Error Sending Email. </div>
</form>

styles:

<style type="text/css">
.t {width:185px; background-color:#2A677E; }
.t div { padding:3px; }    
.b {margin-left:100px;}
div.h {padding-top:14px;}
#email {width:100%;}
.message {display:none; width:175px; font-size:12px; padding:5px; text-align:center; margin-left:-25px; margin-top:0px; position:absolute;}
.saving, .success {background-color:#D1F4DA; border:1px solid #017F1F;}
.nosuccess {background-color:#ffebe8; border:1px solid #dd3c10;}
</style>

javascript (jQuery 1.7+):

<script id="demo" type="text/javascript">
$(document).ready(function() {

    // helper function for errorneous responses
    var failed = function() {
        $('div.nosuccess').fadeIn();
        setTimeout(function() {
            $('div.nosuccess').fadeOut('slow');
        }, 3000);
    }

    $('div.saving').ajaxStart(function(){
        $('#send').attr("disabled","disabled");
        $(this).show();
    });

    $('div.saving').ajaxStop(function(){
        $(this).hide();
        $('#send').removeAttr("disabled");
    });

    $('#send').click(function(){
    //var validator = $("#contactform").validate({
        var $ajax = $.ajax({
            url: "send_page_friend.php",
            data: {
                "a": "http://<?php echo $_SERVER["HTTP_HOST"].$_SERVER["PHP_SELF"]; ?>",
                "email": $('#email').attr('value')
            },
            type: "POST",
            cache: false
        });

        $ajax.done(function(r) {
            if (r == '1') {
                $('div.success').fadeIn();
                setTimeout(function() {
                    $('div.success').fadeOut('slow');
                }, 3000);
            } else {
                failed();
            }
        });

        $ajax.fail(function(r) {
            failed();
        });

        return false;
    });
});
</script>

A good practice is to localise $.ajax() and use the latest functions .done() , .fail() and .always() as recommended on jQuery page http://api.jquery.com/jQuery.ajax/ since .success(), .error() and .complete() are planned to be deprecated in 1.8+

I'm not sure why you use var validator = $("#contactform").validate({ ... this way, so for testing purposes I put $('#send').click(function(){...

Happy coding!

Answer 2

You are defining a variable without the quotes. Should be something like that but could require some kind of more trustworthy escaping:

var a     = '<?php echo $_SERVER["HTTP_HOST"].$_SERVER["PHP_SELF"]; ?>';