jquery ajax request not starting - no errors

Question

I am trying to repair a simple form which should be sending a simple email

I receive no javascript errors, but the ajax request is not fired. I seached a lot of answers here and in google, but none was helping my case.

Here the form html code

<form method="post" id="signupform">    
<input type="text" name="name" id="name" placeholder="Nimi"><br>
<input type="email" name="email" id="email" placeholder="sähköposti@osoite.com"><br>
<p><a href="#" id="send"><b>Ilmoittaudu</b></a></p>
</form>
<div id="response"></div>

And this is the jquery validation and sending code:

<script>
/* <![CDATA[ */
$(document).ready(function(){
    $("#countdown").countdown({
        date: "13 october 2013 12:00:00", <!--set website launch date and time here-->
        format: "on"
        },
        function() {
            // callback function
        });
    var left = $('.newsletter').offset().left;
    $("#subscribe").click(function(event){
        $(".newsletter").show().animate({ left : left }, { duration: 1000 });
        event.preventDefault();
        return false;               
    });
    $(".close1").click(function(event){
        $(".newsletter").animate({ left : "110%" }, { duration: 1000 });
        event.preventDefault();
        return false;               
    });
    $("#send").click(function(event){
        event.preventDefault();
        var cname = $("#signupform").find("#name").val();
        var cemail = $("#signupform").find("#email").val();
        var errcount=0;
        if(cname.length < 1) {      
            $(this).parent().find("#name").addClass("error");
            errcount = 1;
        } else
           $(this).parent().find("#name").removeClass("error");
        var emailRegex = new RegExp(/^([\w\.\-]+)@([\w\-]+)((\.(\w){2,3})+)$/i);
        var valid = emailRegex.test(cemail);
        if (!valid) {
            $(this).parent().find("#email").addClass("error");
            errcount = 1;
        } else
            $(this).parent().find("#email").removeClass("error");
        if (errcount === 0 ) {
            alert('noerror');
            //form submitted succesfully
            $.ajax ({
                type: "POST",
                url: 'send.php',
                data: {
                    name: cname,
                    email: cemail
                },
                processData: false,
                async: false,
                success: function(response) {
                    alert('success');
                    if (response == 'Kaavake ei ole täytetty oikein') {
                        $('#response').html(response);  
                    } else {
                        $('#response').html(response);
                        $('#response').fadeIn('slow');                  
                    }
                },
                error: function(xhr, text, error) {
                    alert(text);
                    alert(error);
                }                   
            });            
        } else {          
            return false;
        }
    }); 
    $("a[data-rel^='prettyPhoto']").prettyPhoto({deeplinking:false});
    $(window).resize(function(){
        var height=$('.activeslide').height();
        var sidebarheight=$('.sidebar').height();
        $('.sidebar').css('min-height',height);
    }); 
    $(window).resize();
});
/* ]]> */
</script>

The alert with noerrors is shown, but not the alert with success, and I cannot see the ajax activity in the network of chrome dev-tools.

Here the code from send.php

<?php

$subject = "Uusi ilmoittautuminen";
$error = 0;
$sendto = 'email@yahoo.com';
print_r($_POST);
if (!empty($_POST)) {
    //validate and strip user data
    if (!empty($_POST['name'])) {
        $name =  htmlspecialchars(strip_tags($_POST['name']));
    } else { 
        $error = 1; 
    }
    if (!empty($_POST['email'])) {
        $email =  htmlspecialchars(strip_tags($_POST['email']));
    } else { 
        $error = 1; 
    }   
    if ($error == 0) {
        //SENDING SECTION
        //prepare body
        $namesender = 'Yhteydenotto';
        $header  = "MIME-Version: 1.0" . "\r\n".
            "Content-type: text/plain; charset=utf-8" . "\r\n".
            "From:Yhteydenotto < noreply@mail.com >\r\n" .
            "Reply-To:".$name." <".$email.">\r\n".
            "X-Mailer: PHP/" . phpversion();
        $body = "Uusi ilmoittautuminen\n\nNimi: ".$name."\n\nSähköposti: ".$email."";
        //prepare subject
        $newsubject='=?UTF-8?B?'.base64_encode($subject).'?=';

        //send email
        $mailresult = mail($sendto, $newsubject, $body, $header);

        die("<p>Kiitos ilmoittautumisestasi!</p>");

    } else {
        echo 'Kaavake ei ole täytetty oikein';
        die;
    }

} else { echo 'no direct access allowed'; }

Answer 1

what does the return false; do after the success method? better remove that. furthermore you have semicolon after the url: 'send.php';it should be a normal comma.
Except that everything looks right.

For finding this kind of errors just check the console (i think) every browser enables you to use. There warnings and errors are logged.

http://jsfiddle.net/EvXgZ/2/ there you have working version with just the addition that i had dto change the destination url to work on jsfiddle.

your ajax call should look like

$.ajax ({
  type: "POST",
  url: 'send.php',
  data: {
    'name': cname,
    'email': cemail
  },
  async: false,
  success: function(response) {
    alert('success');
    if (response == 'Kaavake ei ole täytetty oikein') {
      $('#response').html(response);  
    } else {
      $('#response').html(response);
      $('#response').fadeIn('slow');                  
    }
  },
  error: function(xhr, text, error) {
    alert(text);
    alert(error);
  }
});

As a matter of fact this version works and all the confusion resulted of a // in front of the pasted code, which was additionally pasted in one line and therefore was never excuted. One more important thing to note is that if you develop and change your js-files, you always have to make sure that they are cleared from the cache so you really load the latest version on the website if you visit and test it

Answer 2

Syntax error

$("#send").click(function() {
    var cname = $("#signupform").find("#name").val();
    var cemail = $("#signupform").find("#email").val();
    var errcount = 0;
    if (cname.length < 1) {
        $(this).parent().find("#name").addClass("error");
        errcount = 1;
    } else
        $(this).parent().find("#name").removeClass("error");
    var emailRegex = new RegExp(/^([\w\.\-]+)@([\w\-]+)((\.(\w){2,3})+)$/i);
    var valid = emailRegex.test(cemail);
    if (!valid) {
        $(this).parent().find("#email").addClass("error");
        errcount = 1;
    } else
        $(this).parent().find("#email").removeClass("error");

    if (errcount === 0) {
        alert('noerror');
        // form submitted succesfully
        $.ajax({
            type : "POST",
            url : 'send.php',
            data : {
                name : cname,
                email : cemail
            }, //Missing , here
            processData : false,
            async : false,
            success : function(response) {
                alert('success');
                if (response == 'Kaavake ei ole täytetty oikein') {
                    $('#response').html(response);
                } else {
                    $('#response').html(response);
                    $('#response').fadeIn('slow');
                }
            },
            error : function(xhr, text, error) {
                alert(text);
                alert(error);
            }
        });
    } else {
        return false;
    }
});

Answer 3

add

     $("#send").click(function(e){
   e.preventDefault()
   //ajax code    
     })