Question

I’ve got a simple form that takes user feedback. Basically I just want to toggle the input values – Name, E-mail, Subject, Comments.

<form name="email_rep" id="email_rep" method="POST">
    <input type="text" width="100" name="cust" value="Name" maxlength="100" class="fields" onFocus="toggleLabels(1)" onBlur="toggleLabels(5)">
    <input type="text" width="100" name="cust_email" maxlength="100" value="E-mail" class="fields" onFocus="toggleLabels(2)" onBlur="toggleLabels(6)"><br />
    <input type="text" width="100" name="cust_subject" value="Subject" maxlength="100" class="fields-alt" onFocus="toggleLabels(3)" onBlur="toggleLabels(7)"><br />
    <input type="text" width="100" name="cust_comment" maxlength="500" value="Comments" class="fields-alt" onFocus="toggleLabels(4)" onBlur="toggleLabels(8)"><br />
    <input type="submit" value="Send" name="submit_email" id="submit" onClick="sendButton()">
</form>

and the corresponding JS:

function toggleLabels(x) {
    switch(x) {
        case 1: (document.email_rep.cust.value=="Name") ? (document.email_rep.cust.value="") : (false); break;
        case 2: (document.email_rep.cust_email.value=="E-mail") ? (document.email_rep.cust_email.value="") : (false); break;
        case 3: (document.email_rep.cust_subject.value=="Subject") ? (document.email_rep.cust_subject.value="") : (false); break;
        case 4: (document.email_rep.cust_comment.value=="Comments") ? (document.email_rep.cust_comment.value="") : (false); break;
        case 5: (document.email_rep.cust.value=="") ? (document.email_rep.cust.value="Name") : (false); break;
        case 6: (document.email_rep.cust_email.value=="") ? (document.email_rep.cust_email.value="E-mail") : (false); break;
        case 7: (document.email_rep.cust_subject.value=="") ? (document.email_rep.cust_subject.value="Subject") : (false); break;
        case 8: (document.email_rep.cust_comment.value=="") ? (document.email_rep.cust_comment.value="Comments") : (false); break;
    }
}

I mean it works, but it’s not exactly concise and definitely isn’t reusable. I was thinking passing another variable – say “y” where y=”email_rep”, and possibly another – say “z” where z=”Name”/”E-mail”/”Subject”/”Comments”, but it’s not working for me, I don’t know if it’s like the strings being passed or what the issue is. Any suggestions for making this simpler?

Answer 1

I think this is what you’re trying to do:

function toggleLabelValue(obj, val) {
    if (obj.value == val) {
        obj.value = "";
    } else {
        obj.value = val;
    }
}

// examples:
toggleLabelValue(document.email_rep.cust, "Name");
toggleLabelValue(document.email_rep.cust_email, "E-mail");

Or, since all your objects have the same root, you could build that root into the function like this:

function toggleRepLabelValue(field, val) {
    if (document.email_rep[field].value == val) {
        document.email_rep[field].value = "";
    } else {
        document.email_rep[field].value = val;
    }
}

// examples:
toggleRepLabelValue("cust", "Name");
toggleRepLabelValue("cust_email", "E-mail");