jQuery form throws "missing ) after argument list" error if optional inputs are not filled in
I have a form that submits to a jQuery plugin I've written and used on several projects, and I'm trying to expand its functionality. I've never had any issues with it until now, when I decided to add optional fields to my form. All input text fields on my form are pre-populated via another jQuery function with brief instructions, which disappear when the field receives focus and the user begins typing.
The problem is, the optional inputs post their pre-populated values if the user does not enter his own, and in this case my jQuery plugin returns a "missing ) after argument list" error. The error does not appear if the user fills in all fields.
Here is the code I'm using:
$(document).ready(function(){
$("#contact-submit").click(function(){
var valid = '';
var isr = ' is required.';
var fname = $("#cfname").val();
var company = $("#ccompany").val();
var email = $("#cemail").val();
var phone = $("#cphone").开发者_C百科val();
var location = $("#clocation").val();
var website = $("#cwebsite").val();
var design = $("#cdesign:checked").val();
var security = $("#csecurity:checked").val();
var social = $("#csocial:checked").val();
var seo = $("#cseo:checked").val();
var video = $("#cvideo:checked").val();
var presence = $("#cpresence:checked").val();
var customers = $("#ccustomers:checked").val();
var showcase = $("#cshowcase:checked").val();
var campaign = $("#ccampaign:checked").val();
var ecommerce = $("#cecommerce:checked").val();
var digital = $("#cdigital:checked").val();
var sec = $("#csec:checked").val();
var vid = $("#cvid:checked").val();
var gseo = $("#cgseo:checked").val();
var other = $("#cother:checked").val();
var budget = $("#cbudget").val();
var time = $("#ctime").val();
var os = $("#cos").val();
var comment = $("#ccomment").val();
if (!email.match(/^([a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,4}$)/i)) {
valid += '<br />A valid Email'+isr;
}
if (fname.length<1) {
valid += '<br />Your name'+isr;
}
if (phone.length<13) {
valid += '<br />A 10-digit phone number of the format (xxx)xxx-xxxx'+isr;
}
if (phone.length>13) {
valid += '<br />A 10-digit phone number of the format (xxx)xxx-xxxx'+isr;
}
if (valid!='') {
$("#contact-message").fadeIn("slow");
$("#contact-message").html("Error:"+valid);
}
else {
var datastr ='fname=' + fname + '&company=' + company + '&email=' + email + '&phone=' + phone + '&location=' + location + '&website=' + website + '&design=' + design + '&security=' + security + '&social=' + social + '&seo=' + seo + '&video=' + video + '&presence=' + presence + '&customers=' + customers + '&showcase=' + showcase + '&campaign=' + campaign + '&ecommerce=' + ecommerce + '&digital=' + digital + '&sec=' + sec + '&vid=' + vid + '&gseo=' + gseo + '&other=' + other + '&budget=' + budget + '&time=' + time + '&os=' + os + '&comment=' + comment;
$("#contact-message").css("display", "block");
$("#contact-message").html("Submitting...");
$("#contact-message").fadeIn("slow");
setTimeout("send('"+datastr+"')",2000);
}
return false;
});
});
function send(datastr){
$.ajax({
type: "POST",
url: "plugins/hm_custom/mail-consult.php",
data: datastr,
cache: false,
success: function(html){
$("#contact-message").fadeIn("slow");
$("#contact-message").html(html);
setTimeout('$("#contact-message").fadeOut("slow")',2000);
}
});
}
What makes it even more confusing, is that if I reduce the number of inputs back to my original six text fields, no errors are thrown, even if I fail to insert text into the optional fields. I'm sure that my code is much more complex than it has to be, it's a work in progress and I'm slowly learning how to condense it bit by bit. I have to think my problem must be a syntax error that is being tripped conditionally, but I am very new to Javascript and jQuery, so I have no clue.
Any ideas?
Your issue, i think, is this line:
setTimeout("send('"+datastr+"')",2000);
You are building a string that defines the function name, and by adding in the dataStr
, you are building an invalid name.
If you use a closure instead of a hardcoded string, this should alleviate the issue:
setTimeout(function() { send(dataStr); },2000);
精彩评论