Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Display text field information

Status
Not open for further replies.
Killborg

Killborg

Technical User
Jul 16, 2007
46
US
Hello
I am creating a form. for the user to enter information.
What I am trying to do is display the information at the bottom of the form so they can review before the forms is sent. I got it to display the information being entered into the text field to display correctly at the bottom of the form. But I am unable to generate the label for the field. Name Address City etc.... I want the field label to display after the user enters the information. Can anyone help.


<script type="text/javascript">
<!--
function changeIp() {
document.getElementById('a1').innerHTML = document.getElementById('Name').value;
document.getElementById('a2').innerHTML = document.getElementById('Address').value;
document.getElementById('a3').innerHTML = document.getElementById('City').value;
document.getElementById('a4').innerHTML = document.getElementById('State').value;
document.getElementById('a5').innerHTML = document.getElementById('Zip').value;

}
//-->
</script>
<style type="text/css">
<!--
#Quote{
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
margin-bottom: 10px;
font-size: 12px;
line-height: 15px;
color: #FF0000;
padding-left: 20px;
font-style: normal;
font-weight: bold;
padding-top: 5px;
.style1 {font-family: "Times New Roman", Times, serif}
.style1 {
font-family: "Times New Roman", Times, serif;
font-size: 14px;
font-weight: bold;
color: #0000FF;
}
-->
</style>

<br>
<form name="form1" method="post" action="">
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><p>Name:
<input onChange="changeIp()" type="text" id="Name" name="Name">
</p>
<p>Address:
<input onChange="changeIp()" type="text" id="Address" name="Address">
</p>
<p>City:
<input onChange="changeIp()" type="text" id="City" name="City">
</p>
<p>State:
<input onChange="changeIp()" type="text" id="State" name="State">
</p>
<p>Zip:
<input onChange="changeIp()" type="text" id="Zip" name="Zip">
</p></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>Below is the information you will be sending.<br>
Please review the information and make any corrections before sending your information </td>
</tr>
<tr>
<td><p>&nbsp;</p>
</td>
</tr>
</table>
</form>
<table width="595" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="61"><p align="right">Name: </p>
<p align="right">Address:</p>
<p align="right">City:</p>
<p align="right">State:</p>
<p align="right">Zip</p></td>
<td width="534" valign="middle"><table width="300" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><p><a name="a1" class="style1"></a> </p>
<p><a name="a2"></a></p>
<p><a name="a3"></a></p>
<p><a name="a4" class="style1"></a></p>
<p><a name="a5"></a></p></td>
</tr>
</table></td>
</tr>
</table>
<p>&nbsp;</p>
<p>&nbsp;</p>

Thanks
 
Sort by date Sort by votes
Instead of this
Code: 
<p><a name="a2"></a></p>
try this
Code: 
<p id="a2"></p>

You have no elements with the IDs you're looking for, and you'd be better off using <p>s or <div>s as containers.

Lee
 
Upvote 0 Downvote
THANKS that is a great tip.
But it still only displays the information entered into the text field. What I need to happen is when you enter "Your Name' in the text field. the result would display

Name: Your Name
Address: Your Address
City: Your State
Zip: Your Zip

that way I can eliminate the headings I have at the bottom of the form. Let the header for that field be displayed when the information is entered into the text field.
 
Upvote 0 Downvote
I copied and pasted your code into an HTML page, and it worked perfect in IE, and showed in Firefox that you should use a valign="top" in your <td>s. It won't display "Your Address" until you actually type in "Your Address".

If you mean you want "Address:" and so on not to display until something is actually entered for the address, you need to give the <p> tags for that information some IDs and then fill in or remove the text from the innerHTML in your function.

Lee
 
Upvote 0 Downvote
Trollacious Thanks for the valign tip.

I do not think I explained my self correctly. I am still new to this. The text displays at bottom of form correctly that is working fine. I changed the code to your suggestions.
I eliminated the text at the bottom of the form Name, Address, City, State and Zip.

When you enter your name in the text field it needs to display what is typed but also add information at the beginning.

Example:
Now currently displays Your Name
What needs to displays Name: Your Name

I do not want anything to show at bottom of form until information is entered.

Hope this makes sense.




<script type="text/javascript">
<!--
function changeIp() {
document.getElementById('a1').innerHTML = document.getElementById('Name').value;
document.getElementById('a2').innerHTML = document.getElementById('Address').value;
document.getElementById('a3').innerHTML = document.getElementById('City').value;
document.getElementById('a4').innerHTML = document.getElementById('State').value;
document.getElementById('a5').innerHTML = document.getElementById('Zip').value;

}
//-->
</script>
<style type="text/css">
<!--
#Quote{
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
margin-bottom: 10px;
font-size: 12px;
line-height: 15px;
color: #FF0000;
padding-left: 20px;
font-style: normal;
font-weight: bold;
padding-top: 5px;
.style1 {font-family: "Times New Roman", Times, serif}
.style1 {
font-family: "Times New Roman", Times, serif;
font-size: 14px;
font-weight: bold;
color: #0000FF;
}
-->
</style>

<br>
<form name="form1" method="post" action="">
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><p>Name:
<input onChange="changeIp()" type="text" id="Name" name="Name">
</p>
<p>Address:
<input onChange="changeIp()" type="text" id="Address" name="Address">
</p>
<p>City:
<input onChange="changeIp()" type="text" id="City" name="City">
</p>
<p>State:
<input onChange="changeIp()" type="text" id="State" name="State">
</p>
<p>Zip:
<input onChange="changeIp()" type="text" id="Zip" name="Zip">
</p></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>Below is the information you will be sending.<br>
Please review the information and make any corrections before sending your information </td>
</tr>
<tr>
<td><p>&nbsp;</p>
</td>
</tr>
</table>
</form>
<table width="595" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><table width="300" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top"><p id="a1"></p>
</p> <p id="a2"></p>
<p id="a3"></p>
<p id="a4"></p>
<p id="a5"></p> </tr>
</table></td>
</tr>
</table>
 
Upvote 0 Downvote
Where are your empty <p>s for the "header" information? You need those (without text in them), like you had before, and you need them to have unique IDs.

Then in your Javascript function changeIp() you need to write code to check the length of each of the text input fields and display the appropriate "header" for the <p> with the associated ID if it's greater than 0. If the text input is 0 length, you should set the innerHTML for the associated "header" <p> an empty string.

Lee
 
Upvote 0 Downvote
Thanks for your help.
I will need to do some more research on what you described.
This is now getting above me skill level.
 
Upvote 0 Downvote
Here's a sample:
Code: 
function changeIp() {
document.getElementById('a1').innerHTML = document.getElementById('Name').value;

if (document.getElementById('Name').value.length > 0)
  {
  document.getElementById('PName').innerHTML = 'Name:';
  }
else
  {
  document.getElementById('PName').innerHTML = '';
  }

document.getElementById('a2').innerHTML = document.getElementById('Address').value;
document.getElementById('a3').innerHTML = document.getElementById('City').value;
document.getElementById('a4').innerHTML = document.getElementById('State').value;
document.getElementById('a5').innerHTML = document.getElementById('Zip').value;
}
and
Code: 
<td width="61"><p id="PName" align="right"></p>
      <p align="right"></p>
      <p align="right"></p>
      <p align="right"></p>
    <p align="right"></p></td>
<td valign="top"><p id="a1"></p>
    <p id="a2"></p>
    <p id="a3"></p>
    <p id="a4"></p>
    <p id="a5"></p></td>

Lee
 
Upvote 0 Downvote
T Thanks for your help.
I reviewed the code and it looks pretty straight forward.
Still need to do more research. But it give me a starting point. This is a learning process and every little bit helps for that process. Again thank you.

I made changes you can view what I have done.

<script type="text/javascript">
<!--
function changeIp() {
document.getElementById('a1').innerHTML = document.getElementById('Name').value;
document.getElementById('a2').innerHTML = document.getElementById('Address').value;
document.getElementById('a3').innerHTML = document.getElementById('City').value;
document.getElementById('a4').innerHTML = document.getElementById('State').value;
document.getElementById('a5').innerHTML = document.getElementById('Zip').value;
document.getElementById('a6').innerHTML = document.getElementById('Home').value;

if (document.getElementById('Name').value.length > 0)
{
document.getElementById('PName').innerHTML = 'Name:';
}
else
{
document.getElementById('PName').innerHTML = '';
}
if (document.getElementById('Address').value.length > 0)
{
document.getElementById('PAddress').innerHTML = 'Address: ';
}
else
{
document.getElementById('PAddress').innerHTML = '';
}
if (document.getElementById('City').value.length > 0)
{
document.getElementById('PCity').innerHTML = 'City: ';
}
else
{
document.getElementById('PCity').innerHTML = '';
}
if (document.getElementById('State').value.length > 0)
{
document.getElementById('PState').innerHTML = 'State: ';
}
else
{
document.getElementById('PState').innerHTML = '';
}
if (document.getElementById('Zip').value.length > 0)
{
document.getElementById('PZip').innerHTML = 'Zip: ';
}
else
{
document.getElementById('PHome').innerHTML = '';
}
if (document.getElementById('Home').value.length > 0)
{
document.getElementById('PHome').innerHTML = 'Home: ';
}
else
{
document.getElementById('PHome').innerHTML = '';
}
}
//-->
</script>
<style type="text/css">
<!--
#Quote{
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
margin-bottom: 10px;
font-size: 12px;
line-height: 15px;
color: #FF0000;
padding-left: 20px;
font-style: normal;
font-weight: bold;
padding-top: 5px;
.style1 {font-family: "Times New Roman", Times, serif}
.style2 {color: #FF0000}
-->
</style>

<br>
<form name="form1" method="post" action="">
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><p>Name:
<input onChange="changeIp()" type="text" id="Name" name="Name">
</p>
<p>Address:
<input onChange="changeIp()" type="text" id="Address" name="Address">
</p>
<p>City:
<input onChange="changeIp()" type="text" id="City" name="City">
</p>
<p>State:
<input onChange="changeIp()" type="text" id="State" name="State">
</p>
<p>Zip:
<input onChange="changeIp()" type="text" id="Zip" name="Zip">
</p>
<label>Home
<select id="Home" name="Home" input onChange="changeIp()">
<option> </option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</label>
</p></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td><p>Below is the information you will be sending.<br>
Please review the information and make any corrections before sending your information </p> </td>
</tr>
<tr>
<td><p>&nbsp;</p> </td>
</tr>
</table>
</form>
<b id="PName" align="right"></b><small id="a1" class="style2" ></small>
<p><b id="PAddress" align="right"></b><small id="a2" class="style2" ></small></p>
<p><b id="PCity" align="right"></b><small id="a3" class="style2" ></small></p>
<p><b id="PState" align="right"></b><small id="a4" class="style2" ></small></p>
<p><b id="PZip" align="right"></b><small id="a5" class="style2" ></small></p>
<p><b id="PHome" align="right"></b><small id="a6" class="style2" ></small></p>
 
Upvote 0 Downvote
Put the PAddress and other related <p>s inside one <td>, and then put the other original <p>s inside the second <td> in a single <table>.

Lee
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
307
lexer
lexer
edgarv
  • Locked
  • Question
Field with numbers and characters get nan
Replies
1
Views
104
ggriffit
ggriffit
chikwendu
  • Locked
  • Question
How do I display an extra input box for editing an existing data?
Replies
1
Views
104
chikwendu
chikwendu
keisha1
  • Locked
  • Question
How can I append/insert multiple text files into one .dbf file using java script /html command
Replies
1
Views
107
Samthyr
Samthyr
JScannell
  • Locked
  • Question
Programmatically inserting a newline in a &lt;textarea&gt;, &lt;span&gt;, or &lt;div&gt;
Replies
5
Views
653
ggriffit
ggriffit

Part and Inventory Search

Sponsor

Back
Top