Page 1 of 2

auto populated field

Posted: Thu Dec 08, 2011 6:59 pm
by jauson
some please help.

I need to know what code should i put on my field to make other field auto populated.

look at this.

these are my fields:

field_firstname
field_lastname
field_email
field_username

when i input my firstname and lastname i want my email and username to be auto fill.

for example:

firstname: john- manually
lastname: laurence - manually

username: john.laurence - auto fill in
email: john.laurence - auto fill in

many thanks.

Re: auto populated field

Posted: Thu Dec 08, 2011 10:27 pm
by Gopesh
Hi U need to use javascript or jquery .Check this Link http://jsfiddle.net/d5bHp/. Hope it helps

Re: auto populated field

Posted: Sat Dec 10, 2011 1:00 am
by jauson
Hi Gopesh

thanks for a post. but it seems i have a problem

Code: Select all

<head>
<title> MY TITLE </title>
<script type="text/javascript">
$('#fname, #lname').bind('keyup blur', function() {
    $('#uname,#email').val($('#fname').val() + '.' +$('#lname').val());
   
    
});
  </script>
</head>
<body>
FirstName:<input type="text" id="fname" class="populate"><br/><br/>
LastName:<input type="text" id="lname" class="populate"><br/><br/>
UserName:<input type="text" id="uname" value=""><br/><br/>
Email:<input type="text" id="email" value="">
</body>
</html>
my form didnt work so fine. thanks

Re: auto populated field

Posted: Sat Dec 10, 2011 6:57 pm
by jauson
I copy and paste all the codes in javascript and html to my form and I attached the javascript inside of <head> tags but when i try to run the code. It didnt work. Do i have to add something in my head tags? thanks

Re: auto populated field

Posted: Sun Dec 11, 2011 12:01 am
by Gopesh
Hi,u need to include the jquery library file in the head section.For this,u need to download the jquery library from jquery site and mention the path in the src

Code: Select all

<script type="text/javascript" src="jquery-1.6.4.js"></script>
Tip: Inorder to view the javascript & jquery errors,
1. use firebug
2.press ctrl+shift+j,error console will open and it displays the javascript errors.
Note:Both will work only on Firefox.

Re: auto populated field

Posted: Sun Dec 11, 2011 4:09 am
by jauson
thanks Gopesh!

Code: Select all

<html>
<head><script type="text/javascript" src="jquery-1.6.4.js">
$('#fname, #lname').bind('keyup blur', function() {
    $('#uname,#email').val($('#fname').val() + '.' +$('#lname').val());
   
    
});
 </script></head>
<body>
FirstName:<input type="text" id="fname" class="populate"><br/><br/>
LastName:<input type="text" id="lname" class="populate"><br/><br/>
UserName:<input type="text" id="uname" value=""><br/><br/>
Email:<input type="text" id="email" value="">
</body>
</html>
it still not working. :( do i have wrong syntax?

I downloaded the jquery-1.6.4.js and place to the same folder of populate.php.

Re: auto populated field

Posted: Sun Dec 11, 2011 4:23 am
by Gopesh
Hi,here is the problem.
<head><script type="text/javascript" src="jquery-1.6.4.js">
$('#fname, #lname').bind('keyup blur', function() {
$('#uname,#email').val($('#fname').val() + '.' +$('#lname').val());


});
</script></head>
Pls close the script tag properly like this

Code: Select all

<head><script type="text/javascript" src="jquery-1.6.4.js"></script>
<script>
$('#fname, #lname').bind('keyup blur', function() {
$('#uname,#email').val($('#fname').val() + '.' +$('#lname').val());


});
</script></head>


Re: auto populated field

Posted: Sun Dec 11, 2011 5:03 am
by jauson
Hi Gopesh,

You're the man dude! but it seems i have a big problem. :(

Code: Select all

<html>
<head>
<head><script type="text/javascript" src="jquery-1.6.4.js"></script>
<script>
$('#fname, #lname').bind('keyup blur', function() {
$('#uname,#email').val($('#fname').val() + '.' +$('#lname').val());


});
</script></head>
 </head>
<body>
FirstName:<input type="text" id="fname" class="populate"><br/><br/>
LastName:<input type="text" id="lname" class="populate"><br/><br/>
UserName:<input type="text" id="uname" value=""><br/><br/>
Email:<input type="text" id="email" value="">
</body>
</html>

Re: auto populated field

Posted: Sun Dec 11, 2011 7:11 pm
by jauson
still not working :(

Re: auto populated field

Posted: Sun Dec 11, 2011 11:04 pm
by Gopesh
Hi,It is because of missing $(document).ready().Try this

Code: Select all

<html>

<head><script type="text/javascript" src="jquery-1.6.4.min.js"></script>
<script>
$(document).ready(function() {
$('#fname, #lname').bind('keyup blur', function() {
$('#uname,#email').val($('#fname').val() + '.' +$('#lname').val());


});
});
</script></head>

<body>
FirstName:<input type="text" id="fname" class="populate"><br/><br/>
LastName:<input type="text" id="lname" class="populate"><br/><br/>
UserName:<input type="text" id="uname" value=""><br/><br/>
Email:<input type="text" id="email" value="">
</body>
</html>

Try to debug the page as i mentioned earlier.Then it is easy to understand what is the error.Hope it helps u

Re: auto populated field

Posted: Mon Dec 12, 2011 12:04 am
by jauson
thanks dude!

what if i want to add on my email
ex. john.ken@company.com auto fill also? can i do that?

Re: auto populated field

Posted: Mon Dec 12, 2011 6:05 am
by Gopesh
Hi, check this http://jsfiddle.net/d5bHp/2/ .I think there is more another efficent method to do it.It is not the right area to discuss jquery related problems.For those queries Use javascript section. Hope it helps u.

Re: auto populated field

Posted: Mon Dec 12, 2011 10:29 am
by pickle
Do you want to auto-fill on page load? i.e. if the person submits the form but is missing a field, the values they entered will re-appear in the form?

You haven't given us much information as to when you want to do this or where the data is coming from, so saying Javascript is the solution is a bit presumptuous.

Re: auto populated field

Posted: Mon Dec 12, 2011 6:25 pm
by jauson
Hi Gopesh!


Thankssssssssss alot dude! you really help me a lot. long live! Godbless

Re: auto populated field

Posted: Mon Dec 12, 2011 10:13 pm
by Gopesh
Welcome..Hope that u got the idea to solve the problem.