Member Avatar for Usura

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.

  • 3 Contributors
  • 10 Replies
  • 138 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Usura
Member Avatar for urtrivedi 
<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>
Edited by urtrivedi because: n/a
Member Avatar for Usura

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

Member Avatar for Usura

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?

Member Avatar for urtrivedi 
<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()'>
Member Avatar for Usura

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?

Edited by Usura because: n/a
Member Avatar for urtrivedi 
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.

Edited by urtrivedi because: n/a
Member Avatar for Usura

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 :)

Member Avatar for urtrivedi

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>
Edited by urtrivedi because: n/a
Member Avatar for SKANK!!!!!

hi. you may want to use

type="hidden"

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

Member Avatar for Usura

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.