Log in

View Full Version : 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:


<!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>&nbsp;&nbsp;
<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:


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
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!
brazil
11-09-2010, 04:16 AM
i'm getting an error on this line:

if(!el){ alert("Error: cannot find div."); return false; }


thanks
Nile
11-09-2010, 04:17 AM
When pasting a code, please remember to use [code] tags. That includes [ html ], [ code ], and [ php ].
You can go ahead and get rid of that line.
brazil
11-09-2010, 04:30 AM
Nile Thank you very very much for your help! Works great! I hope to work with you again!

Isaac
Nile
11-10-2010, 12:48 PM
No problem, I'm glad to help :D

Here on DD, we like to keep things organized. In an effort to do so, you have the option to set a thread to resolved when an issue is fixed. To make the status of the thread resolved:
1. Go to your first post
2. Edit your first post
3. Click "Go Advanced"
4. In the dropdown next to the title, select "RESOLVED"
brazil
06-07-2012, 03:30 AM
this post has been resolved
keyboard
06-07-2012, 03:38 AM
If this thread is finished, please set it to resolved.
You can do this by editing the first post within the thread - Pressing go advanced - Then where it says no prefix, selecting resolved then save.

That's what he's talking about... Setting the thread to resolved shows that your question has been answered (Saves people looking all the way through to check, etc...)

You may not be able to set this thread to resolved (because it's so old). Admins/Moderators can close the thread (Resolved just tells people the threads finished, Closed means you physically can't post in it anymore).
brazil
06-07-2012, 03:48 AM
Keyboard1333,

I cannot edit. On others where I have tried to edit, goto advanced, etc. I cannot find the option to set status to "resolved". Could it be my browser? Mozilla? Any ideas?
keyboard
06-07-2012, 03:58 AM
It should work fine in all browsers. You probably can't find it in this particular thread because it's so old (after a while the edit bar is removed).

When you finish a different thread, try to follow the instructions provided...
It's not critical, it just makes it easier for everyone.
Keyboard1333