How to copy input value from one field to another?

Page 1 of 1

4 Replies - 1747 Views - Last Post: 18 May 2012 - 04:49 PM

#1 so0oma  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 93
  • Joined: 01-January 11

How to copy input value from one field to another?

Posted 18 May 2012 - 03:45 PM

hi guy ,
in my code
i enter the employee ID and the user name
both is the same and i wanna when i enter the employee id
it is display in the user name filed automatically
<?php
session_start();

?>




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><META http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body style="text-align: center">



 <head>


<title>Add Employee</title>
 <link rel="stylesheet" type="text/css"
href="style.css"/>



<script language="javascript">

function validation(form)
 {
 
 if ((form.id_Num.value)=="" || (form.id_Num.value).length < 4 )
{
alert("Employee ID  must be 4 characters  !!");
return false;
}

if ((form.Fname.value)=="" )
{
alert("Please enter Fname  !!");
return false;
}

if ((form.Mname.value)=="" )
{
alert("Please enter Mname  !!");
return false;
}

if ((form.Lname.value)=="" )
{
alert("Please enter Lname  !!");
return false;
}

if ((form.Position.value)== 0 )
{
alert("Please enter Position  !!");
return false;
}



if ((form.dev_1.value)== "" )
{
alert("Please enter the device id of employee  !!");
return false;
}


if ((form.jop.value)== 0 )
{
alert("Please enter Job Title  !!");
return false;
}


if ((form.username.value)==""  || (form.username.value).length < 4)
{
alert("The username must be 4 characters  !!");
return false;
}
if ((form.password.value)=="" || (form.password.value).length < 6)
{
alert("Password must be 6 characters !! ");
return false;
}
  return true;
}
//--></script>



</head>


<div>



<center>

<font face="Arial Narrow,Bold" size="1">
<b>
 </b></font></center>

<form  action='add-done.php' method='POST' >



 
    	<b>
<div align="center">
	<table border='0' width='100%'  height='20'  div align='center' cellspacing='0'><tr><td class='bar' width='5%'><img  src='user_add.png' width='80' height='48' ></td> 
<td class='bar'><font size='5' face='Arial'>Add Employee</td></tr>
</table>

	<p>&nbsp;</p>
	<table border="2" width="35%" bordercolorlight="#996633" bordercolordark="#5A3A0B" bordercolor="#5A3A0B" >
		<tr>
			<td width="451" align="center" colspan="3">
			<p align="left"><b>Employee ID:<font size="3"><input type="text"   name="id_Num" size='20'/></font></td>
			
		</tr>
		<tr>
			
			<td width="132" align="center">
			<p align="left"><b>First:<font size="3"><input   type="text" name="Fname" size='15'/></font></td>
			
			<td width="132"><b>Middle:<font size="3"><input  type="text" name="Mname" size='15'/></font></td>
			<td align="center" width="132">

<b>Last :<font size="3"><input  type="text" name="Lname" size='15'/></font></td>
		</tr>
	<p align="left">&nbsp;</div>

</b>
		<div align="center">
	<table border="2" width="27%" bordercolorlight="#996633" bordercolordark="#5A3A0B" bordercolor="#5A3A0B" >
		<tr>
			
			<td width="353">
			<p align="left"><b>Employee Login</b></td>
			
		</tr>
		<tr>
			
			<td width="353">
			<p align="left"><b>Username:<input type="text"   name="username" size='30'/></td>
			
		</tr>
		<tr>
			<td width="353">
			<p align="left"><b>Password:<input type="text"   name="password" size='30'/></td>
			
		</tr>
		</table>
                    
                    
					   	</div>
		<p align="left">&nbsp;</p>
		<p style="text-align: center"><b>
		<font FACE="Arial Narrow,Bold" SIZE="1">

		<font size="4">
	<input type="submit" value="ADD"  onclick="return validation(form);" name="B1" style="font-weight: bold; background-color: #996633; font-size:12pt"></font>&nbsp;&nbsp; 
</font>
</form>
</b></p>

                    
                   </div>

</body></html>

This post has been edited by Atli: 18 May 2012 - 04:11 PM
Reason for edit:: Titled updated. Please use the title to describe the question, not to tell us you need help. We already know that.


Is This A Good Question/Topic? 0
  • +

Replies To: How to copy input value from one field to another?

#2 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3113
  • View blog
  • Posts: 4,675
  • Joined: 08-June 10

Re: How to copy input value from one field to another?

Posted 18 May 2012 - 04:27 PM

I'm assuming you would want that done in Javascript, not PHP, right?

Well, if that is the case, I suggest you put IDs on both the input elements to make them easy to reference in your Javascript code (strictly not necessary, but tends to make things simpler) and then create a function to be called in the "onkeyup" event of the Employee ID input, which copies the value of the Employee ID input over to the Username input.

This isn't at all complicated, and if you know the basics of DOM manipulation you should do fine. Try it and see what you come up with.


P.S.
I'm moving this over to the Javascript forum, seeing as this isn't actually a PHP related question.
Was This Post Helpful? 0
  • +
  • -

#3 so0oma  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 93
  • Joined: 01-January 11

Re: How to copy input value from one field to another?

Posted 18 May 2012 - 04:31 PM

thank you to move my question in correct place ..
i understand your idea but i don't know how to do it
can you help my by example then i will try ?
Was This Post Helpful? 0
  • +
  • -

#4 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3113
  • View blog
  • Posts: 4,675
  • Joined: 08-June 10

Re: How to copy input value from one field to another?

Posted 18 May 2012 - 04:43 PM

I'll show you the individual components you need for this. Understanding each of these concepts should allow you to do what you are asking. (Or at least try.) - Note that none of this code applies to your code specifically, so don't try to copy/paste any of it into your code. They are just examples.

First, to set an ID on the input elements:
<input type="text" name="source" id="txtSource"/>
<input type="text" name="target" id="txtTarget"/>

After that you can fetch references to them in your Javascript code by using the document.getElementById function.
var txtSource = document.getElementById("txtSource");
var txtTarget = document.getElementById("txtTarget");

With those references you just copy the .value from the source to the target.
txtTarget.value = txtSource.value;


And second, to set a function to execute on an event, you can just set the "oneventname" property of the element, where "eventname" is the name of the event. For instance, to set the "click" event, you do:
<input type="button" onclick="onMyButtonclick(this, event);"/>

Then you just define the function somewhere in your Javascript code, so that it will be available when the button is clicked.
function onMyButtonclick(elem, e) {
    alert("My button was clicked!");
}


An alternative to this method is to set the event in Javascript.
var myButton = document.getElementById("myButton");
myButton.onclick = function(e) {
    alert("My button was clicked!");
}

Many prefer this (myself included), mostly because it keeps the HTML clear of Javascript code, and setting it in code gives you more control.
Was This Post Helpful? 0
  • +
  • -

#5 so0oma  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 93
  • Joined: 01-January 11

Re: How to copy input value from one field to another?

Posted 18 May 2012 - 04:49 PM

i will try then come back for any problem ^_^
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1