Question

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").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?

Answer 1

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);