sircharlo Posted November 29, 2007 Share Posted November 29, 2007 HelloI have XHTML and CSS under my belt, and now I'm tentavely trying to step into the world of JavaScript. I have a page with a bunch of scripts, but one of them doesn't do what I want it to.As the title says, I'm trying to concatenate two form fields (firstName and lastName) and to make the result appear in a third field (fullName). It is not working, though, and I would need some help on why and how to fix it.Here is the page source: <html><head><title>My First Script</title><style type="text/css">.hl{color:red}</style><script type="text/javascript">function showBrowserType() { document.getElementById("readout").innerHTML = "Your browser says it is " + "<span class='hl'>" + navigator.appName +' ' + navigator.appCodeName + ' ' + navigator.appVersion + "</span>.<hr />"}window.onload = loadedfunction loaded() { showBrowserType(); done();}function done() { alert("The page is loaded!")}</script><script type="text/javascript">function fullName() { var firstName = document.getElementById("firstName").value; var lastName = document.getElementById("lastName").value; var fullName = firstName + " " + lastName; return document.getElementById("fullName").value = fullName;}</script></head><body><h1>Let's Script !</h1><hr /><div id="readout">If JS is not working correctly, you see this.</div><form><input type="button" onclick="alert('Your browser says it is ' + navigator.appName +' ' + navigator.appCodeName + ' ' + navigator.appVersion + '.\n\nWhatever that means !')" value="Don't know what your browser type is ?" /><br /><input type="text" id="firstName" name="firstName"><br /><input type="text" id="lastName" name="lastName"><br /><input type="text" id="fName" name="fullName"><input type="button" onclick="fullName()" value="Full Name" /><br /></form></body></html> And here is the page: Script1.htmlThank you all very much ! Link to comment Share on other sites More sharing options...
jesh Posted November 29, 2007 Share Posted November 29, 2007 I think there are a couple of issues here:1) The input to display the full name has an ID of "fName" but you are trying to get at it in your javascript using an ID of "fullName".2) The input to display the full name has a name of "fullName" and your function is called "fullName" and I think there is some collusion there. Try using "displayFullName" as your function name instead. Link to comment Share on other sites More sharing options...
Ingolme Posted November 29, 2007 Share Posted November 29, 2007 Another detail:Your function fullName() returns a value, but you aren't doing anything with the value. Try alerting it:<input type="button" onclick="alert(fullName())" value="Full Name" /><br /> Link to comment Share on other sites More sharing options...
sircharlo Posted November 29, 2007 Author Share Posted November 29, 2007 Good grief, it works !Here is the final code: <html><head><title>My First Script</title><style type="text/css">.hl{color:red}</style><script type="text/javascript">function showBrowserType() { document.getElementById("readout").innerHTML = "Your browser says it is " + "<span class='hl'>" + navigator.appName +' ' + navigator.appCodeName + ' ' + navigator.appVersion + "</span>.<hr />"}window.onload = loadedfunction loaded() { showBrowserType(); done();}function done() { alert("The page is loaded!")}function displayFullName() { var firstName = document.form.firstName; var lastName = document.form.lastName; var displayFullName = firstName.value + " " + lastName.value; return document.form.fullName.value = displayFullName;}</script></head><body><h1>Let's Script !</h1><hr /><div id="readout">If JS is not working correctly, you see this.</div><form name="form"><input type="button" onclick="alert('Your browser says it is ' + navigator.appName +' ' + navigator.appCodeName + ' ' + navigator.appVersion + '.\n\nWhatever that means !')" value="Don't know what your browser type is ?" /><br /><input type="text" id="firstName" name="firstName" onchange="displayFullName()"><br /><input type="text" id="lastName" name="lastName" onchange="displayFullName()"><br /><input type="text" id="fullName" name="fullName"><input type="button" onclick="alert(displayFullName())" value="Full Name" /><br /></form></body></html> Any help on how to prevent user input on fullName field ? Link to comment Share on other sites More sharing options...
Ingolme Posted November 29, 2007 Share Posted November 29, 2007 Prevent a user from writing in the input field:<input type="text" id="fullName" name="fullName" readonly="readonly"> Link to comment Share on other sites More sharing options...
sircharlo Posted November 29, 2007 Author Share Posted November 29, 2007 Yeah, but that gives the field a dismal gray look, and CSS refuses to put it white ! Link to comment Share on other sites More sharing options...
justsomeguy Posted November 29, 2007 Share Posted November 29, 2007 Yep, but that's the way to do it. Link to comment Share on other sites More sharing options...
Ingolme Posted November 29, 2007 Share Posted November 29, 2007 "readonly" makes it look grey? I thought "disabled" was responsible for that. I see, both of them do it. Link to comment Share on other sites More sharing options...
jesh Posted November 29, 2007 Share Posted November 29, 2007 Any help on how to prevent user input on fullName field ?You could either disable key presses in that field:<input type="text" id="fullName" name="fullName" onkeypress="return false;" /> Or, you could use a div and style it to look like your styled inputs. Then, rather than doing: document.form.fullName.value = displayFullName; You could use: document.getElementById("TheIDForTheDiv").innerHTML = displayFullName; Link to comment Share on other sites More sharing options...
Reg Edit Posted November 30, 2007 Share Posted November 30, 2007 You could either disable key presses in that field:<input type="text" id="fullName" name="fullName" onkeypress="return false;" /> Or, you could use a div and style it to look like your styled inputs... But then again, you could leave the dismal look, beause it's there for a good reason. Changing the appearance of a read-only/disabled input field is an important part of good UI design, because it communicates to the user that the field will act differently from the non-dismal ones. A UI that fails to make this distinction is likely to cause confusion/annoyance when users try and type in the field. Link to comment Share on other sites More sharing options...
jesh Posted November 30, 2007 Share Posted November 30, 2007 Changing the appearance of a read-only/disabled input field is an important part of good UI design, because it communicates to the user that the field will act differently from the non-dismal ones.I agree with you there. But using an input field to display the result of some calculation probably isn't the greatest UI design decision either. Simple text is probably the better solution. Link to comment Share on other sites More sharing options...
Reg Edit Posted November 30, 2007 Share Posted November 30, 2007 I agree with you there. But using an input field to display the result of some calculation probably isn't the greatest UI design decision either. Simple text is probably the better solution.Absolutely. Just do the same as for "readout", where a div is already used instead of an input field. Link to comment Share on other sites More sharing options...
sircharlo Posted November 30, 2007 Author Share Posted November 30, 2007 Thanks for all your help, everyone ! Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.