Hey Ive been searching all over for an example but cant seem to find anything to close to what im after, Im really new to javascript so dont know how to start coding it myself.

Ive got a form with 3 text fields, one for first name, last name and one i dont what the user to be able to write things in(if that cant be done no biggy), when I hit submit, I want to move these two entries (first name and lastname) into uneditable text field so basically just combine the two, and then the user can add more names and it just keeps adding them to the end of the other text field... kinda hard to explain, basically like a chat type thing, where hitting enter just adds more names to the other text field except only you can see it...

If anyone can point me to some examples or tutorials similar to this that would be great, thank you.

Recommended Answers

All 10 Replies

<script lang='javascript'>
function joinname()
{
   document.frm.fullname.value= document.frm.fname.value+' ' +document.frm.lname.value;
}
</script>
<form name=frm id=frm >
<input type=text name=fname id=fname onblur='javascript:joinname()'>
<input type=text name=lname id=lname  onblur='javascript:joinname()'>
<input type=text name=fullname id=fullname readonly >
</form>

thanks so much, lol i was trying to run what you had originaly, thank you very much for the reply :) it works great

Is there a way i can get this to work when the user hits submit? and then they can add another name on top of that one?

<input type=text name=fname id=fname >
<input type=text name=lname id=lname  >
<input type=text name=fullname id=fullname readonly >
<input type=submit name=btnsub id=btnsub  onclick='javascript:joinname()'>

This is what im hoping to get

<html>
<head>
<script lang='javascript'>
function joinname()
{
   		document.completenameform.fullname.value = document.joinnameform.fname.value + ' ' + document.joinnameform.lname.value;
   		
   		return document.completenameform.fullname.value;
}
</script>
</head>
<form name=joinnameform id=joinnameform onSubmit="return joinname()"> 
<input type=text name=fname id=fname >
<input type=text name=lname id=lname ><br>
<input type="submit" value="Submit">


<br><br><br><br>
<form name=completenameform id=completenameform >
<input type=text name=fullname id=fullname readonly ><br>
<input type="submit" value="Submit"></p>
</form>
</html>

its giving an error with the onsubmit, I know im doing it wrong lol im just so new to any of this, thanks so much for your help so far, do you know how I can get this to work?

----

Sorry didnt see your previous post, added the onclick instead of the onsubmit for the button, how would i get this to be shown in the value of another forms text area?

function joinname()
{   		
document.completenameform.fullname.value = document.joinnameform.fname.value + ' ' + document.joinnameform.lname.value;

return true;
}

Return true instead of fullname value.
I cannot understand why you are using two forms. You should keep fullname under joinnameform.

I get the error ("document.completenameform.fullname.value" is null or not an object) when i inserted it into the html code, I know its weird, Im using two forms because I need to get the first name and last name from one text field, allow the user to submit as many names as they like, as it gets appended to the fullname text field of the other form, then when they've entered all the names they want, they use the other form to submit the completednameform list to a cgi script.

<html>
<head>
<script lang='javascript'>
function joinname()
{   		
	document.completenameform.fullname.value = document.joinnameform.fname.value + ' ' + document.joinnameform.lname.value;
	
	return true;
}
</script>

</head>

<form name=joinnameform id=joinnameform > 
<input type=text name=fname id=fname >
<input type=text name=lname id=lname ><br>
<input type=submit name=btnsub id=btnsub  onclick='javascript:joinname()'>


<br><br><br><br>
<form name=completenameform id=completenameform >
<input type=text name=fullname id=fullname readonly ><br>
<input type="submit" value="Submit"></p>
</form>
</html>

again thanks for sticking with me this whole time :)

I have written following code try. I have used only one form.
I hope this is what you are looking for.

<script lang='javascript'>
function joinname()
{   	
 	if(document.joinnameform.fullname.value!='')
 	{
	 document.joinnameform.fullname.value=document.joinnameform.fullname.value+',';	
	}
	document.joinnameform.fullname.value=document.joinnameform.fullname.value+ document.joinnameform.fname.value + ' ' + document.joinnameform.lname.value;
	document.joinnameform.fname.value ='';
	 document.joinnameform.lname.value='';
	
	//return true;
}
</script>

</head>

<form name=joinnameform id=joinnameform action='mycgiscript'> 
First name <input type=text name=fname id=fname >
Last name <input type=text name=lname id=lname ><br>
All names <input type=text name=fullname id=fullname readonly style='width:300px'><br>
<input type=button name=btnsub id=btnsub value='Add name to list' onclick='javascript:joinname()'>
<br><br><br><br>
<input type="submit" value="Submit" name=btnsubmit></p>



</form>
</html>

hi. you may want to use

type="hidden"

for the one u dont want the user to write in.

wow that is perfect thank you so much for your help that's exactly what I was hoping for :)

cant thank you enough :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.