Auto Fill Form Script Request

**brazil** · 11-06-2010, 02:41 AM

I am looking for a simple java script I can implement on a site that auto fills form fields if a specific name is selected from another form field (dropdown) of the same form.

for example,

If name=somebody(dropdown list of names)
then: field2=somebody's phone number
and: field3=somebody's email address
or if name=somebody else's name
then field2=somebody else's phone number
and: field3=somebody else's email address
.....
etc.
etc.
end

**Nile** · 11-07-2010, 02:06 AM

Give this a try:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<title>Name Select</title>
	<script type="text/javascript">
	var nameSelect = function(name, el){
	 	if(!el){ alert("Error: cannot find div."); return false; }
	 	var select = document.createElement('select');
	 	var number, email, first = true;
	 	var b = select.options[select.length] = new Option("Chose a contact", "chose");
		for(key in name){
	  		select.options[select.length] = new Option(key, key);
		}
		var number = document.createElement('input');
		number.type = "text";
		number.name = "number";
		var email = document.createElement('input');
		email.type = "text";
		email.name = "email";
		select.onchange = function(){
			if(first) { select.removeChild(select.options[0]); }
			number.value = names[select.value].phone;
			email.value = names[select.value].email;
			first = false;
		};
		el.appendChild(select);
		el.appendChild(number);
		el.appendChild(email);
	};
	</script>
</head>
<body>
	<div id="name_select">
	
	</div>
	<script type="text/javascript">
	var names = {
	  "John": {"phone": "12312341234", "email": "john.123@gmail.com"},
	  "Tedd": {"phone": "9879879876", "email": "tedd.987@gmail.com"},
	  "Bob": {"phone": "58198314871", "email": "bob.581@gmail.com"},
	  "Fred": {"phone": "5437279876", "email": "fred543@gmail.com"}
	};
	nameSelect(names, document.getElementById('name_select'))
	</script>

</body>
</html>

Good luck!

**brazil** · 11-08-2010, 03:08 PM

Works great! However I need it to fill the following fields in the form after the name is selected.... (your div already is inserted)

<p>Name:<font color="red">*</font><br /><br/></p>
<div id="name_select"></div>

<p>Phone:<font color="red">*</font><br />
<input id="phone" type="text" name="phone" value="" />
<br/></p>

<p>E-mail:<br />

<input id="email" type="text" name="email" value="" /><br/></p>

Please advise.

**Nile** · 11-08-2010, 11:00 PM

I dont understand.

**brazil** · 11-08-2010, 11:24 PM

Sorry....

Essentially this is a mobile website...

Your code works great, it does exactly what I need. However, I need to break out the fields (name,phone,email) so it populates the names in the fields on the webpage, not side by side fields. Also the form is not passing the name in the email....

Check it out... I hope it helps.

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

<link href="style.css" media="handheld, screen" rel="stylesheet" type="text/css" />

<title>Tool </title>
<script type="text/javascript">

<script type="text/javascript">
var nameSelect = function(name, el){
if(!el){ alert("Error: cannot find div."); return false; }
var select = document.createElement('select');
var number, email, first = true;
var b = select.options[select.length] = new Option("Chose a contact", "chose");
for(key in name){
select.options[select.length] = new Option(key, key);
}
var number = document.createElement('input');
number.type = "text";
number.name = "Phone";
var email = document.createElement('input');
email.type = "text";
email.name = "E-mail";
select.onchange = function(){
if(first) { select.removeChild(select.options[0]); }
number.value = names[select.value].phone;
email.value = names[select.value].email;
first = false;
};
el.appendChild(select);
el.appendChild(number);
el.appendChild(email);
};
</script>

</head>

<body>

<div class="mainwrapper">
<div id="header">
<div class="extra-bg2">
<div class="right-bg">
<div class="home-tab">
<a href="index.html">Menu</a>
</div>
<div id="logo">
<a href="index.html"><img alt="" src="images/logo.png" /></a><br />
<img alt="" src="images/slogan.png" /><br />
</div>
<div id="breadcrumb">
<a href="#"></a>
</div>
</div>
</div>
</div>
<div id="content">
<div class="min-width">
<h2 class="title">Schedule an <span>Inspection</span></h2>
Use our interactive form to call, email or use our schedule form to shedule an inspection. We will followup shortly!<br />
<br />

<div id="contact">
<div class="f-left">Schedule Now: <strong><a href="wtai://wp/mc;somenumber"> somenumber</a></strong></div><div class="f-right nowrp"></div>
<p><br class="clear" />
</p>

<div class="f-left">Email: <a href="mailto:someemail"><strong>someemail</strong></a></div><div class="f-right nowrp"></div><br class="clear" />
<div class="f-left"></div><div class="f-right"><br class="clear"/>
</div>
</div>
<h2 class="title margin2">Schedule <span>Form</span></h2>
<form method="post" action="http://somedomain.com/cgi-bin/FormMail.pl" enctype="application/x-www-form-urlencoded" id="ContactForm">
<div>

<div class="text3">

<p>Name:<font color="red">*</font><br/></p>
<div id="name_select"></div>
<input id="name" type="text" name="name" value="" />

<p>Phone:<font color="red">*</font><br />
<input id="phone" type="text" name="phone" value="" />
<br/></p>

<p>E-mail:<br />
<input id="email" type="text" name="email" value="" /><br/></p>

<p>Address of Inspection:<font color="red">*</font><br />
<input id="Address" type="text" name="Address" value="" /><br/></p>

<p>City:<br/></p>
<select name="City">
<option>Please Choose One</option>
<option>city1</option>
<option>city2</option>
<option>city3</option>
</select>
<br/>
</p>
</div>

<div class="taright">

<button id="clear" type="reset">Clear</button>  
<button id="send" type="submit" onsubmit="return ContactForm(this);">Send </button>
<input id="form_id" type="hidden" name="myemail" value=""/>
<input type="hidden" name="redirect" value="sometarget" />
<input type="hidden" name="subject" value="somestatemtent!" />

</div>

</div>

</form>
</div>
<script type="text/javascript">
var names = {
"John": {"phone": "12312341234", "email": "john.123@gmail.com"},
"Tedd": {"phone": "9879879876", "email": "tedd.987@gmail.com"},
"Bob": {"phone": "58198314871", "email": "bob.581@gmail.com"},
"Fred": {"phone": "5437279876", "email": "fred543@gmail.com"}
};
nameSelect(names, document.getElementById('name_select'))
</script>

</div>

<div class="home-tab">

<a href="index.html">Menu</a>

</div>

</div>

<div id="footer">

</div>

</div>

<script language="JavaScript">
<!--

</body>

</html>

**Nile** · 11-08-2010, 11:38 PM

Okay- here's what I suggest:
When using the nameSelect function, for the second perimeter, put in the ID of your form. In the form, give the email and name inputs the name of email and name.

Change your Javascript to this:

Code:

	var nameSelect = function(name, el){
	 	if(!el){ alert("Error: cannot find div."); return false; }
	 	var select = document.createElement('select');
	 	var number, email, first = true;
	 	select.name = "name";
	 	var b = select.options[select.length] = new Option("Chose a contact", "chose");
		for(key in name){
	  		select.options[select.length] = new Option(key, key);
		}
		var number = document.createElement('input');
		number.type = "text";
		number.name = "number";
		var email = document.createElement('input');
		email.type = "text";
		email.name = "email";
		select.onchange = function(){
			if(first) { select.removeChild(select.options[0]); }
			el.number.value = names[select.value].phone;
			el.email.value = names[select.value].email;
			first = false;
		};
		el.insertBefore(select, el.firstChild);
	};

The select where you choose the names name is 'name'. Ha

Good luck!

**brazil** · 11-09-2010, 03:35 AM

It behaves weird now...

If I select a name and return to the menu to select another name the name I previously selected has disappeared from the menu... If I continue to select names, each name goes away until there are no more names in the menu.
.....

Thank you very much for your help !

**Nile** · 11-09-2010, 03:43 AM

I understand. Have you changed anything in the javascript? Especially having to do with line 25, or the first variable? If you did, can I see it? Also remember to use the [code] tags.

**brazil** · 11-09-2010, 04:02 AM

I've only cut and paste what you provided. I hope this is what you'd like to see!

Here's the Javascript:

<script type="text/javascript">
var nameSelect = function(name, el){
if(!el){ alert("Error: cannot find div."); return false; }
var select = document.createElement('select');
var number, email, first = true;
select.name = "name";
var b = select.options[select.length] = new Option("Choose a contact", "chose");
for(key in name){
select.options[select.length] = new Option(key, key);
}
var number = document.createElement('input');
number.type = "text";
number.name = "number";
var email = document.createElement('input');
email.type = "text";
email.name = "email";
select.onchange = function(){
if(first) { select.removeChild(select.options[0]); }
el.number.value = names[select.value].phone;
el.email.value = names[select.value].email;
first = false;
};

el.insertBefore(select, el.firstChild);
};
</script>

Here are the form fields:

<form method="post" action="http://gogreennmllc.com/cgi-bin/FormMail.pl" enctype="application/x-www-form-urlencoded" id="ContactForm">
<div>
<div class="text3">
<p>Name:<font color="red">*</font><br/></p>
<div id="name_select"></div>

<p>Phone:<font color="red">*</font><br />
<input id="phone" type="text" name="phone" value="" />
<br/></p>

<p>E-mail:<br />
<input id="email" type="text" name="email" value="" /><br/></p>
</form>

<script type="text/javascript">
var names = {
"John": {"phone": "12312341234", "email": "john.123@gmail.com"},
"Tedd": {"phone": "9879879876", "email": "tedd.987@gmail.com"},
"Bob": {"phone": "58198314871", "email": "bob.581@gmail.com"},
"Fred": {"phone": "5437279876", "email": "fred543@gmail.com"}
};
nameSelect(names, document.getElementById('name_select'))
</script>

thank you!

**Nile** · 11-09-2010, 04:09 AM

Please use the [code] tags.

Give this a try:

Code:

<script type="text/javascript">
var nameSelect = function(name, el){
if(!el){ alert("Error: cannot find div."); return false; }
var select = document.createElement('select');
var number, email, first = true;
select.name = "name";
var b = select.options[select.length] = new Option("Choose a contact", "chose");
for(key in name){
select.options[select.length] = new Option(key, key);
}
var number = document.createElement('input');
number.type = "text";
number.name = "number";
var email = document.createElement('input');
email.type = "text";
email.name = "email";
select.onchange = function(){
if(first) { select.removeChild(select.options[0]); }
el.phone.value = names[select.value].phone;
el.email.value = names[select.value].email;
first = false;
};

document.getElementById('select').appendChild(select);
};
</script>

Here are the form fields:

<form method="post" action="http://gogreennmllc.com/cgi-bin/FormMail.pl" enctype="application/x-www-form-urlencoded" id="name_select">
<div>
<div class="text3">
<p>Name:<font color="red">*</font><br/></p>
<span id="select"></span>
<p>Phone:<font color="red">*</font><br />
<input id="phone" type="text" name="phone" value="" />
<br/></p>

<p>E-mail:<br />
<input id="email" type="text" name="email" value="" /><br/></p>
</form>

<script type="text/javascript">
var names = {
"John": {"phone": "12312341234", "email": "john.123@gmail.com"},
"Tedd": {"phone": "9879879876", "email": "tedd.987@gmail.com"},
"Bob": {"phone": "58198314871", "email": "bob.581@gmail.com"},
"Fred": {"phone": "5437279876", "email": "fred543@gmail.com"}
};
nameSelect(names, document.getElementById('name_select'))
</script>

thank you!

Thread: Auto Fill Form Script Request

Thread Tools

Search Thread

Auto Fill Form Script Request

The Following User Says Thank You to Nile For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions