jQuery AJAX form error. Empty string

I am having a problem when I submit a contact form via Ajax to a PHP s开发者_开发百科cript. I have used the jQuery/Ajax function previously as well as the contact script, however on this occaison the process runs as far as the ajax request and then returns the error: empty string.

$(document).ready(function(){
    jQuery("#sendmail").click(function(){
        var name = $("#name").val();
        var phone = $("#phone").val();
        var email = $("#email").val();
        var text = $("#message").val(); 

        //var datastr ='name=' + name + '&mail=' + mail + '&subject=' + subject + '&text=' + text;
        var datastr ='name=' + name + '&phone=' + phone + '&email=' + email + '&text=' + text;
        $("#form-div").css("float", "left");
        $("#form-div").html("<p>Thank you for contacting Stillframe Photography.</p><p>Please wait for just a few moments while your enquiry is being sent.</p>");
        $("#form-div").fadeIn("slow");

        alert(datastr);

        jQuery.ajax({
            type: "POST",
            url: "contact.script.php",
            data: datastr,
            success: function(html){
            $("#response").fadeIn("slow");
            $("#response").html(html);
            //setTimeout('$("#response").fadeOut("slow")',2000);
            }
            ,error: function (XMLHttpRequest, textStatus, errorThrown) {
                                $("#response").html('there was an error');
                            console.log('error thrown');
                            console.log(errorThrown); 
            }
        });
    });
});

You can see the page in operation at http://www.stillframe.com.au/test.php and you can see the form without the page media at at the same link above but test2.php

I've also added the script without any other jQuery to the same url but test3.php which posts directly to the contact PHP script to confirm there are no errors in that script.

SOLVED: Removed the base href tag from the head and the script now works fine.

Instead of using field by field, use the FORM ID <form id="myform"> and serialize it. Try this:

$(document).ready(function(){
    jQuery("#sendmail").click(function(){
        jQuery.ajax({
            type: "POST",
            url: "contact.script.php",
            data: $('#myform').serialize(),
            cache: false,
            success: function(output) {
                $("#form-div").css("float", "left");
                $("#form-div").html("<p>Thank you for contacting Stillframe Photography.</p><p>Please wait for just a few moments while your enquiry is being sent.</p>");
                $("#form-div").fadeIn("slow");
                $("#response").html(output);
                $("#response").fadeIn("slow");
                //setTimeout('$("#response").fadeOut("slow")',2000);
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                                $("#response").html('there was an error');
                            console.log('error thrown');
                            console.log(errorThrown); 
            }
        });
    });
});

It is better to use ajax with raw javascript because of the following reasons.

1. Code is very simple and short.
2. You will never end with any error.

3. You target is just to send variables from javascript to php in correct rest will be taken care of , lemme add a sample code below for you.

   function insert(){
   if(window.XMLHttpRequest)
   {
       xmlhttp = new window.XMLHttpRequest();
   }
   else
   {
       xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
   }
   
   xmlhttp.onreadystatechange = function() {
       if(xmlhttp.readyState == '4' && xmlhttp.status == '200')
       {
           document.getElementById('msg').innerHTML = xmlhttp.responseText;    
       }
   }
   
   name = document.getElementById('insert').value;
   
   parameters = 'insert=' + name;
   
   xmlhttp.open('POST', 'day3.include.php', true);
   xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
   xmlhttp.send(parameters);
   

   }

In parameters pass all of your variables accordingly and create a div#msg to display the reply from php.

If you have any confusion ask me back on http://www.thetutlage.com