ajax contact-form.js

contact-form.js

/* jquery code for Contact form overlay  starts here */
    
    var location = window.location;
    $("#cpage").val(location);
//    console.log("Current href: "+location);
    var email =  $("a[href^='mailto:']").text();
    
    $("a[href^='mailto:']").attr('id', 'messagewindow');
    $("a[href^='mailto:']").attr('href', '#');
    if(email == ""){
        email = "webmaster@default.ky";
    }
    $("#to_email").append(email);
    $("#to_email input").val(email);
    var subject = $("a#messagewindow").attr("title");
    //    var now = new Date();
    if(subject == ""){
        //        subject = "Enquiry on : "+now
        subject = "Enquiry";
    }
    $("#to_subject").append(subject);
    $("#to_subject input").val(subject);

    // console.log("Value is title: "+subject);
    
    $(function() {
        $('a#messagewindow').click(function(){
            $('#overlay').fadeIn('fast',function(){
                   
                if($('#box').width() <= 718 || $('#box').width() >= 718 ) {
                    $('#box').css({
                        width:"718px"
                    });
                }
                $("#box1").show();
                $("#reset").hide();
                $("#emailform")[0].reset();
                $("#box2").hide();
                $('#box').animate({
                    'top':'70px'
                },500);
            });
        });
        $('#boxclose').click(function(){
            $('#box').animate({
                'top':'-700px'
            },500,function(){
                $('#overlay').fadeOut('fast');
            });
        });
        
        $('.error').hide();
        $('input.text-input').css({
            backgroundColor:"#FFFFFF"
        });
        $('input.text-input').focus(function(){
            $(this).css({
            //    backgroundColor:"#9cf"
            });
        });
        $('input.text-input').blur(function(){
            $(this).css({
            //    backgroundColor:"#FFFFFF"
            });
        });
        $('textarea.text-input').focus(function(){
            $(this).css({
              //  backgroundColor:"#9cf"
            });
        });
        $('textarea.text-input').blur(function(){
            $(this).css({
                backgroundColor:"#FFFFFF"
            });
        });
        
        $("#reset_b").click(function() {
            $("#reset").fadeIn(4000).slideToggle("slow");  
        });
        $("#submit_b").click(function() {
            // validate and process form
            // first hide any error messages
            $('.error').hide();
            var submit_b = $("#submit_b").val();
            var msubject = $("#msubject").val();
            var cpage = $("#cpage").val();
            var from = $("#from").val();
            var to = $("#to").val();
            if (from == "") {
                $("label#email_error").show();
                $("input#from").focus();
//                isValidEmail(from);
//                 console.log("isValidEmail: "+isValidEmail(from));
                return false;
            }
            if (!isValidEmail(from)) {
              //  console.log("isValidEmail: "+isValidEmail(from));
                $("label#email_error").text("Enter a valid E-Mail Address.");
                $("label#email_error").show();
                $("input#from").focus();
                return false;
            }
            
            var message = $("#tmessage").val();
            if (message == "") {
                $("label#message_error").show();
                $("#tmessage").focus();
                return false;
            }

            var dataString = 'tmessage='+ message + '&from=' + from + '&submit_b=' + submit_b + '&msubject=' + msubject + '&cpage=' + cpage + '&to=' + to;
            //alert (dataString);return false;

            $.ajax({
                type: "POST",
                url: "/email/enquiry_email.php",
                data: dataString,
                success: function() {
                   
                 //   $('#box2').html("<div id='message'> </div>");
                    $("#emailform")[0].reset();
                    $("#box1").hide();
                    $('#box').css({
                        width:"400px"
                    });
                    $("#box2").show();
                    $('#message').html("<h2>Your message has been sent!</h2>")
                    .append("<p>We will be in touch soon.</p>")
                    .hide()
                    .fadeIn(1000, function() {
                        $('#message').append("<p id='checkmark'> Thank you! </p>");
                    }).fadeOut(15000, function() {
                        $('#box').animate({
                            'top':'-700px'
                        },10,function(){
                            $('#overlay').fadeOut('fast');
                        });
                    });
                }
            });
            return false;
        });
    });


    function isValidEmail(str) {

        return (str.indexOf(".") > 2) && (str.indexOf("@") > 0);
    }

/* jquery code for Contact form overlay ends here */


/* from this */
<a href="mailto:membership@xyz.co.uk">membership@xyz.co.uk</a>


/* to */
<a href="#" id="messagewindow">membership@xyz.co.uk</a>



/* HTML code for Contact form overlay starts here */


<!-- The overlay and the box -->
<div class="overlay" id="overlay" style="display:none;"></div>
<div class="box" id="box">
    <a class='boxclose' id='boxclose'></a>
    <div class='box1' id='box1'>
        <h1> Email Form</h1>
        <div id="reset">All fields are now empty</div>
        <form method=post id="emailform" name='emailform' action='#'>
            <div> <label> E-Mail: </label> <input type='text' id='from' name='from' value='' class='text-input'>
                <label class='error' for='email' id='email_error'>This field is required.</label></div>
            <div id='to_email'> <label> To: </label> <input type='hidden' id='to' name='to' value='[Email address]'>  </div>
            <div id='to_subject'>  <label> Subject: </label><input type='hidden' id='msubject' name='msubject' value='[Subject]'>  </div>
            <div>  <textarea id='tmessage' name='tmessage' cols='86' rows='7'  class='text-input'></textarea>
                <label class='error' for='message' id='message_error'>This field is required. Enter your message in the field above</label>
                <input type='hidden' id='cpage' name='cpage' value='[page]'></div>
            <div id='mbutton'> <input type='submit' id='submit_b' name='submit_b' value='Send'> <input type='reset' id='reset_b' name='reset_b' value='Reset'> </div>
        </form>
    </div>

    <div class='box2' id='box2'>
      <div id='message'> 
      </div>
    </div> 
</div>



/* HTML code for Contact form overlay ends here */