Program-Me-Rev Program-Me-Rev - 4 months ago 23
jQuery Question

Submision via AJAX call not working

I'm trying to submit an eMail via AJAX, but for some reason, nothing is working. I have counter and counter checked that the files (

<script src="mail.js"></script>
,
jquery
and
url: "sendmail.php"
) are well mapped.

The page reloads, and nothing is submitted. I do not want any page reloads in the first place, the reason I am using AJAX.

What am I doing wrong? Thank you all in advance.

index.html

<!DOCTYPE html>
<html lang="en">

<head>
<script src="mail.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>

<body>

<!-- Content -->
<div class="container">
<div class="row">
<div class="span12 subscribe">
<h3>Subscribe to our newsletter</h3>
<p>Sign up now to our newsletter and you'll be one of the first to know when the site is ready:</p>
<form class="form-inline" action="" method="post">
<input type="text" name="tasktitle" placeholder="Enter your email...">
<button type="submit" class="btn">Subscribe</button>
</form>
<div class="success-message"></div>
<div class="error-message"></div>
</div>
</div>
</div>

</body>

</html>


mail.js

$(document).ready(function(){

$('.btn').click(function(e){

var current_time = 123;
var tasktitle = $("input#tasktitle").val();
var dataString = 'current_time='+ current_time + '&tasktitle=' + tasktitle;

$.ajax({
type: "POST",
url: "sendmail.php",
data: dataString,

success: function() {
$('.title').html("");
$('.success-message').html("✓ Logged!")
.hide()

.fadeIn(1500, function() {
$('success-message').append("");
});
}
});
return false;

});
});


sendmail.php

I have already created the directory ccts for the file to be written into.

<?php
$tasktitle = $_POST['tasktitle'];
setlocale(LC_TIME, "fi_FI");
date_default_timezone_set("Europe/Helsinki");
$date = strftime("%Y-%m-%d-%A");
$timesaved = strftime("%H:%M:%S");
$elapsedtime = $_POST['current_time'];
$file = "ccts/".$date.".txt";
$cont = 'time submitted: '.$timesaved.' - time elapsed: '.$elapsedtime.' - Email Address http://onvill.com/ : '.$tasktitle.''. "n";



function isEmail($email) {
return(preg_match("/^[-_.[:alnum:]]+@((([[:alnum:]]|[[:alnum:]][[:alnum:]-]*[[:alnum:]])\.)+(ad|ae|aero|af|ag|ai|al|am|an|ao|aq|ar|arpa|as|at|au|aw|az|ba|bb|bd|be|bf|bg|bh|bi|biz|bj|bm|bn|bo|br|bs|bt|bv|bw|by|bz|ca|cc|cd|cf|cg|ch|ci|ck|cl|cm|cn|co|com|coop|cr|cs|cu|cv|cx|cy|cz|de|dj|dk|dm|do|dz|ec|edu|ee|eg|eh|er|es|et|eu|fi|fj|fk|fm|fo|fr|ga|gb|gd|ge|gf|gh|gi|gl|gm|gn|gov|gp|gq|gr|gs|gt|gu|gw|gy|hk|hm|hn|hr|ht|hu|id|ie|il|in|info|int|io|iq|ir|is|it|jm|jo|jp|ke|kg|kh|ki|km|kn|kp|kr|kw|ky|kz|la|lb|lc|li|lk|lr|ls|lt|lu|lv|ly|ma|mc|md|mg|mh|mil|mk|ml|mm|mn|mo|mp|mq|mr|ms|mt|mu|museum|mv|mw|mx|my|mz|na|name|nc|ne|net|nf|ng|ni|nl|no|np|nr|nt|nu|nz|om|org|pa|pe|pf|pg|ph|pk|pl|pm|pn|pr|pro|ps|pt|pw|py|qa|re|ro|ru|rw|sa|sb|sc|sd|se|sg|sh|si|sj|sk|sl|sm|sn|so|sr|st|su|sv|sy|sz|tc|td|tf|tg|th|tj|tk|tm|tn|to|tp|tr|tt|tv|tw|tz|ua|ug|uk|um|us|uy|uz|va|vc|ve|vg|vi|vn|vu|wf|ws|ye|yt|yu|za|zm|zw)$|(([0-9][0-9]?|[0-1][0-9][0-9]|[2][0-4][0-9]|[2][5][0-5])\.){3}([0-9][0-9]?|[0-1][0-9][0-9]|[2][0-4][0-9]|[2][5][0-5]))$/i", $email));
}

if($_POST) {

// Enter the email where you want to receive the notification when someone subscribes
$emailTo = 'Contact.@site.com';

$subscriber_email = ($_POST['tasktitle']);

if(!isEmail($subscriber_email)) {
$array = array();
$array['valid'] = 0;
$array['message'] = 'Insert a valid email address!';
echo json_encode($array);
}
else {
$f = fopen ($file, 'w');
fwrite($f, $cont);
fclose($f);

$array = array();
$array['valid'] = 1;
$array['message'] = 'Thanks for your subscription!';
echo json_encode($array);

// Send email
$subject = 'New Subscriber!';
$body = "You have a new subscriber!\n\nEmail: " . $subscriber_email;
// uncomment this to set the From and Reply-To emails, then pass the $headers variable to the "mail" function below
//$headers = "From: ".$subscriber_email." <" . $subscriber_email . ">" . "\r\n" . "Reply-To: " . $subscriber_email;
mail($emailTo, $subject, $body);
}

}

?>


UPDATE

I get the error:

Uncaught ReferenceError: $ is not defined(anonymous function) @ mail.js:1

Answer

HTML code

<!DOCTYPE html>
<html lang="en">

<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
<script src="mail.js"></script>
</head>

<body>

    <!-- Content -->
    <div class="container">
        <div class="row">
            <div class="span12 subscribe">
                <h3>Subscribe to our newsletter</h3>
                <p>Sign up now to our newsletter and you'll be one of the first to know when the site is ready:</p>
                <form class="form-inline" action="" method="post">
                    <input type="text" name="tasktitle" placeholder="Enter your email...">
                    <button type="submit" class="btn">Subscribe</button>
                </form>
                <div class="success-message"></div>
                <div class="error-message"></div>
            </div>
        </div>
    </div>

</body>

</html>

in mail.js

$(document).ready(function(){     

  $('.btn').click(function(e){ 

    var current_time = 123;
    var tasktitle = $("input#tasktitle").val();
    var dataString = 'current_time='+ current_time + '&tasktitle=' + tasktitle;

    $.ajax({
      type: "POST",
      url: "sendmail.php",
      data: $("form.form-inline").serialize(),
      dataType:'json',
      success: function(data) {
        if(data.type=="success")
        {
            $('.title').html("");
            $('.success-message').html("✓ Logged!")
            .hide()

            .fadeIn(1500, function() {
              $('success-message').append("");
            });
        }
        else
        {
            alert(data.message);
        }
      }
    });
    return false;

  });
});

in PHP file

<?php

$response=array();

if(!empty($_POST))
{
    $tasktitle = $_POST['tasktitle'];
    setlocale(LC_TIME, "fi_FI"); 
    date_default_timezone_set("Europe/Helsinki");
    $date = strftime("%Y-%m-%d-%A");
    $timesaved = strftime("%H:%M:%S");
    $elapsedtime = $_POST['current_time'];
    $file = "ccts/".$date.".txt";
    $cont = 'time submitted: '.$timesaved.' - time elapsed: '.$elapsedtime.' - Email Address http://onvill.com/ : '.$tasktitle.''. "n"; 

    function isEmail($email) {
        return(preg_match("/^[-_.[:alnum:]]+@((([[:alnum:]]|[[:alnum:]][[:alnum:]-]*[[:alnum:]])\.)+(ad|ae|aero|af|ag|ai|al|am|an|ao|aq|ar|arpa|as|at|au|aw|az|ba|bb|bd|be|bf|bg|bh|bi|biz|bj|bm|bn|bo|br|bs|bt|bv|bw|by|bz|ca|cc|cd|cf|cg|ch|ci|ck|cl|cm|cn|co|com|coop|cr|cs|cu|cv|cx|cy|cz|de|dj|dk|dm|do|dz|ec|edu|ee|eg|eh|er|es|et|eu|fi|fj|fk|fm|fo|fr|ga|gb|gd|ge|gf|gh|gi|gl|gm|gn|gov|gp|gq|gr|gs|gt|gu|gw|gy|hk|hm|hn|hr|ht|hu|id|ie|il|in|info|int|io|iq|ir|is|it|jm|jo|jp|ke|kg|kh|ki|km|kn|kp|kr|kw|ky|kz|la|lb|lc|li|lk|lr|ls|lt|lu|lv|ly|ma|mc|md|mg|mh|mil|mk|ml|mm|mn|mo|mp|mq|mr|ms|mt|mu|museum|mv|mw|mx|my|mz|na|name|nc|ne|net|nf|ng|ni|nl|no|np|nr|nt|nu|nz|om|org|pa|pe|pf|pg|ph|pk|pl|pm|pn|pr|pro|ps|pt|pw|py|qa|re|ro|ru|rw|sa|sb|sc|sd|se|sg|sh|si|sj|sk|sl|sm|sn|so|sr|st|su|sv|sy|sz|tc|td|tf|tg|th|tj|tk|tm|tn|to|tp|tr|tt|tv|tw|tz|ua|ug|uk|um|us|uy|uz|va|vc|ve|vg|vi|vn|vu|wf|ws|ye|yt|yu|za|zm|zw)$|(([0-9][0-9]?|[0-1][0-9][0-9]|[2][0-4][0-9]|[2][5][0-5])\.){3}([0-9][0-9]?|[0-1][0-9][0-9]|[2][0-4][0-9]|[2][5][0-5]))$/i", $email));
    }

    // Enter the email where you want to receive the notification when someone subscribes
    $emailTo = 'Contact.@site.com';

    $subscriber_email = ($_POST['tasktitle']);

    if(!isEmail($subscriber_email)) {
        $response['type'] = 'error';
        $response['message'] = 'Insert a valid email address!';
    }
    else {
        $f = fopen ($file, 'w');
        fwrite($f, $cont);
        fclose($f);

        $array = array();
        $array['valid'] = 1;
        $array['message'] = 'Thanks for your subscription!';
        echo json_encode($array);

        // Send email
        $subject = 'New Subscriber!';
        $body = "You have a new subscriber!\n\nEmail: " . $subscriber_email;
        // uncomment this to set the From and Reply-To emails, then pass the $headers variable to the "mail" function below
        //$headers = "From: ".$subscriber_email." <" . $subscriber_email . ">" . "\r\n" . "Reply-To: " . $subscriber_email;
        mail($emailTo, $subject, $body);
        $response['type'] = 'success';
        $response['message'] = 'Mail sent successfully!';
    }

}
else
{
    $response['type'] = 'error';
    $response['message'] = 'Invalid  post request';
}
ob_clean();
echo json_encode($response);