JQuery AJAX form error. Empty line

Question

I am having a problem when I submit a contact form via Ajax to a PHP script. I previously used the jQuery / Ajax function as well as the contact script, however in this case the process is executed before the ajax request and then returns an 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 the mode of http://www.stillframe.com.au/test.php , and you can see the form without the page medium using the same link above, but test2.php

I also added a script without any other jQuery to the same url, but test3.php, which is sent directly to the contact of the PHP script to confirm that there are no errors in this script.

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

Answer 1

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

 $(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); } }); }); }); 

Answer 2

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

• The code is very simple and short.
• You will never end up with a mistake.

• You only aim to send the variables from javascript to php on the right rest, take care, lemme add the 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 the parameters all your variables are passed accordingly and div # msg is created to display the response with php.

If you have any confusion, ask me to return to http://www.thetutlage.com