javascript within a script

Question

I suppose this should be pretty simple, but I'm still learning to work with javascript. I have this function that I am using to pull up a form on the click of a button

function addEmployee() {
document.getElementById("add_employee")
.innerHTML="\
        <input name=\"new_emp_name\" value=\"Employee Name\" required/>\
        <input name=\"new_emp_idp\" value=\"Employee Number\" required/>\
        <select name=\"new_emp_status\" required>\
            <option value=\"0\">Manager</option>\
            <option value=\"1\" selected>Server</option>\
            <option value=\"2\">Bartender</option>\
            <option value=\"3\">Host</option>\
        </select>\
        <input type=\"submit\" value=\"Add employee\">\
";
}

which works fine. I want to add code for each input that will clear each field when it's clicked, such as...

onfocus="if(this.value == 'Employee Name') { this.value = ''; }"

so that each input would look something like

<input name=\"new_emp_name\" onfocus="if(this.value == 'Employee Name') { this.value = ''; }" value=\"Employee Name\" required/>\

but there's obviously something terribly wrong with my understanding of the syntax. Please advise! And thank you for your patience if I haven't searched for this question thoroughly.

the backslashes are because the input is in a string in javascript — markasoftware
– markasoftware, Commented Nov 20, 2013 at 4:19

markasoftware · Accepted Answer · 2013-11-20 04:23:01Z

1

It is advisable to do this instead: have a script with an non-standard type and take it's value. E.g., put this in your head tag:

<script type="x-random/x-html-string-thingy" id="newemployeehtml">
HTML HERE
</script>

and then in your script:

document.getElementById('add_employee').innerHTML=document.getElementById('newemployeehtml').innerHTML;

also, replace HTML HERE with the HTML for the new employee thingy (obviously), and you won't need backslashes

answered Nov 20, 2013 at 4:23

markasoftware

12.7k8 gold badges47 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

vdua Over a year ago

I like your answer but the problem was @cingenius was not escaping the double quotes in onfocus attribute.

vdua · Accepted Answer · 2013-11-20 05:03:58Z

0

You can use single quotes(') for the entire string and then you won't need to put the backslash before every double quote("). Check the fiddle.

Your code is also correct. You need only to put backslashes in your onfocus attribute

onfocus=\"if(this.value == 'Employee Name') { this.value = ''; }\"

Check this fiddle as well. It is exactly your code with the escaped doble quote in the onfocus attribute

But I still prefer the answer provided above. It avoids the problems of escaping characters in String. This fiddle incorporates that answer.

Note: I am assuming that you are trying to put some sample text in the input which gets hidden whenever user focuses on the field. You can try using the html placeholder attribute to achieve the same behavior

<input placeholder="Employee Name" otherattributes />

edited Nov 20, 2013 at 5:03

answered Nov 20, 2013 at 4:55

vdua

1,3311 gold badge14 silver badges24 bronze badges

1 Comment

cingenius Over a year ago

Thank you! Placeholder was what I was looking for. Thanks for the escape info.

Collectives™ on Stack Overflow

javascript within a script

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related