Jump to content

Concatenate form items with JS


Recommended Posts

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 post
Share on other sites

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 post
Share on other sites

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 post
Share on other sites

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 post
Share on other sites
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 post
Share on other sites
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 post
Share on other sites
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 post
Share on other sites
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...