jQuery TypeError: 'undefined' is not a function on AJAX submit
Question
Does anybody see a problem with the following?
jQuery(document).ready(function($) {
$("#ajax-form").submit(function(e) {
e.preventDefault();
$("#result").html('Sending…').fadeIn();
var fields = '{';
$('#ajax-form').filter(':input').each(function() {
fields = fields + $(this).attr("name")+' : '+$(this).val()+', ';
});
fields = fields + '}';
url = '/scripts/form-submit.php';
$.post(url,fields, function(data, respText, xhr){
alert('ok-'+data+'-'+respText+'-'+xhr);
})
.error(function(d) {
alert('no good');
});
});
});
In Inspector, I get the following error on submit:
TypeError: 'undefined' is not a function (near '....error(function(d) {...')
on the line that closes .error ( });
). That's line 17.
On submit I get one alert which reads: "ok--success-[object XMLHttpRequest]
". The script I'm submitting to is supposed to send an email and return "It worked" as AJAX response data, and the email is never sent nor is the response received. I know the script works, because when I post do it regularly (not asynchronously), it all works perfectly.
Any insight is very appreciated. Thanks.
Solution
use serialize
to generate post data
$('#form').submit(function(){
$.ajax({
type: "POST",
url: "/scripts/form-submit.php",
data: $(this).serialize(),
success:function(response){
alert('ok-'+data+'-'+respText+'-'+xhr);
alert("Details saved successfully!!!");
},
error: function (request, status, error) {
alert(request.responseText);
}
});
})
OTHER TIPS
I think the problem lies in your variable fields
, which seems to be a json data, but you failed to wrap the value in quotes as a string
here is a reference from jQuery:
jQuery.post( url [, data] [, success(data, textStatus, jqXHR)] [, dataType] ) ... dataTypeThe type of data expected from the server. Default: Intelligent Guess (xml, json, script, text, html)
it treats your data type as json, but actually it is invalid