Autopopulate fields on a form [Archive]

Click to See Complete Forum and Search --> : Autopopulate fields on a form

cheesy

05-12-2003, 06:02 AM

Hi all,

this has been driving me mad but I'm sure I'll get my answer here. I have created a form (form is written in HTML) that should auto populate when a field is filled, but for the life of me I can't get this to work. There are three fields inside a form, when a value is entered into the first field, I want the other two to automatically write their values in depending on what was written in the first field. For eg.

FIELD 1 FIELD 2 FIELD 3

if field 1 == (a) field 2 =(b) field 3 =(c)

Field 1 will have a lot of valiables, but each variable will only be either true or false.

I hope I have been clear in what I'm trying to do. If you need any more info (or an interpreter!) let me know.

Thankin' you in advance, Cheesy.

Charles

05-12-2003, 06:19 AM

1) It would be helpful to have the mark up for the form that you are using.

2) I would need to know how you are going to keep your page working for the one in ten users who do not use JavaScript.

cheesy

05-12-2003, 07:21 AM

I've included the entire code. This will only be used by a select few so browser problems are not an issue. There is also and external .js file for the calender but I didn't figure you would need it. The reason I've included the whole code is incase you can see any conflicting commands.

Thanks again for your help, Cheesy

<HTML>
<HEAD>
<TITLE>Unnecesary Calls List
</TITLE>

<SCRIPT LANGUAGE="JavaScript">




</script>

<SCRIPT LANGUAGE="JavaScript" src="date-picker.js">



</SCRIPT>

<SCRIPT LANGUAGE="JavaScript">




</script>

</HEAD>

<STYLE type="text/css">
body {font-family:Arial;
color:blue;
font-size:18;
background:beige}
h1 {font-family:Times New Roman;
color:red;
font-size:80}
</STYLE>

<BODY>

<IMG src="logo.gif" type="image/gif" height="90" width="150" align="right" alt="Vodafone Logo">

<H1>Unnecessary Call List</H1>

<FORM name="calform" onSubmit="return checkrequired(this)" method=post action="http://cgi.freedback.com/mail.pl" name="emailform">

<SCRIPT language=JavaScript>

var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December")
document.write("<small><font color='blue' face='Arial'><b>"+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+"</b></font></small>")

</script>

<br>
<br>
<br>

CSR Login :
<INPUT type="text" name="requiredCSR login" size="27" Value="" onChange="javascript:this.value=this.value.toLowerCase();">
CSR Name :
<INPUT type="text" name="CSR name" size="27" Value="" onChange="javascript:this.value=this.value.toLowerCase();">
CSR Team Leader :
<INPUT type="text" name="CSR team leader" size="27" Value="" onChange="javascript:this.value=this.value.toLowerCase();">

<br>
<br>
<br>

<TABLE>
<TR>
<TD>
<B>COST csr name : </B>
</TD>
<TD>
<INPUT type="text" name="requiredCOST csr name" size="40" value="" onChange="javascript:this.value=this.value.toLowerCase();">
</TD>
<TD>
<B>Date (ddmmyy) : </B>
</TD>
<TD>
<INPUT type="text" name="requireddatebox" size="40"><a href="javascript:show_calendar('calform.requireddatebox');" onmouseover="window.status='Date Picker';return true;" onmouseout="window.status='';return true;"><img src="show-calendar.gif" width=24 height=22 border=0></a>
</TD>

<TR>
<TD>
<B>Customer Mobile : </B>
</TD>
<TD>
<INPUT type="text" name="requiredMobile Number" size="40">
</TD>
<TD>
<B>Customer Name : </B>
</TD>
<TD>
<INPUT type="text" name="requiredCustomer Name" size="40" onChange="javascript:this.value=this.value.toLowerCase();">
</TD>

<TR>
<TD>
<B>Details of Call :</B>
</TD>
<TD>
<TEXTAREA name="requiredDetails of Call" rows=10 cols=40 onChange="javascript:this.value=this.value.toLowerCase();">
</TEXTAREA>
</TD>
<TD>
<B>Proposed Resolution :</B>
</TD>
<TD>
<TEXTAREA name="requiredProposed Resolution" rows=10 cols=40 onChange="javascript:this.value=this.value.toLowerCase();">
</TEXTAREA>
</TD>

<TR>
<TD>&nbsp</TD>
<TD>&nbsp</TD>
<TD>&nbsp</TD>
<TD>&nbsp</TD>

<TR>
<TD>
<input type=hidden name=to value="">
</TD>
<TD align="right">
<input type="submit" value="Submit Form">
</TD>
<TD>
<input type="reset" value="Clear Form">
</TD>
<TD>
<input type=hidden name=subject value="Unnecessary List">
</TD>

</TABLE>

<center>
<script language="JavaScript">

</script>
</center>

</FORM>

</BODY>

</HTML>

Charles

05-13-2003, 02:50 PM

Ok, I've cleaned things up a bit but I have two more questions. What, exactly does checkrequired do and what exactly was your first question? What fields do you want to change to what when what other field is changed?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title>Unnecesary Calls List</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<script type="text/javascript">

</script>

<style type="text/css">

</style>
</head>
<body>
<img src="logo.gif" type="image/gif" height="90" width="150" align="right" alt="Vodafone Logo">
<h1>Unnecessary Call List</h1>
<form onsubmit="return checkrequired(this)" method="post" action="http://cgi.freedback.com/mail.pl" name="emailform"><script type="text/javascript" language="JavaScript">

document.write("<small><font color='blue' face='Arial'><b>", new Date(), "<\/b><\/font><\/small>")
</script>
<br>
<br>
<br>
CSR Login : <input type="text" name="requiredCSR login" size="27" value="" onchange="this.value=this.value.toLowerCase();"> CSR Name : <input type="text" name="CSR name" size="27" value="" onchange="this.value=this.value.toLowerCase();"> CSR Team Leader : <input type="text" name="CSR team leader" size="27" value="" onchange="this.value=this.value.toLowerCase();">
<br>
<br>
<br>

<table>
<tr>
<td><b>COST csr name :</b></td>
<td><input type="text" name="requiredCOST csr name" size="40" value="" onchange="this.value=this.value.toLowerCase();"></td>
<td><b>Date (ddmmyy) :</b></td>
<td><input type="text" name="requireddatebox" size="40" onchange="this.value = new Date(this.value).toFormString()"><a href="show_calendar('calform.requireddatebox');" onmouseover="window.status='Date Picker';return true;" onmouseout="window.status='';return true;"><img src="show-calendar.gif" width="24" height="22" border="0"></a></td>
</tr>
<tr>
<td><b>Customer Mobile :</b></td>
<td><input type="text" name="requiredMobile Number" size="40"></td>
<td><b>Customer Name :</b></td>
<td><input type="text" name="requiredCustomer Name" size="40" onchange="this.value=this.value.toLowerCase();"></td>
</tr>
<tr>
<td><b>Details of Call :</b></td>
<td><textarea name="requiredDetails of Call" rows="10" cols="40" onchange="this.value=this.value.toLowerCase();">
</textarea></td>
<td><b>Proposed Resolution :</b></td>
<td><textarea name="requiredProposed Resolution" rows="10" cols="40" onchange="this.value=this.value.toLowerCase();">
</textarea></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><input type="hidden" name="to" value=""></td>
<td align="right"><input type="submit" value="Submit Form"></td>
<td><input type="reset" value="Clear Form"></td>
<td><input type="hidden" name="subject" value="Unnecessary List"></td>
</tr>
</table>
</form>
</body>
</html>

cheesy

05-14-2003, 11:23 AM

Hi,

The checkrequired makes sure that the fields are entered before the submit button is pressed.

My original question was if I entered a value in the 1st field of the form, how could I get the other two to populate.

The fields in question are the 1st three fields, all on the same line. I want it so if an entry in the first field is deemed "true" the 2nd and 3rd field will autopopulate with the set condition. So for example if field 1 =a, the other two fields would automatically populate with b&c or whatever I chose.

I hope you can make sense of this,

Thanks for your help thus far,

Yours gratefully,
Cheesy.

Charles

05-14-2003, 11:53 AM

Originally posted by cheesy
Hi,

The checkrequired makes sure that the fields are entered before the submit button is pressed.

My original question was if I entered a value in the 1st field of the form, how could I get the other two to populate.

The fields in question are the 1st three fields, all on the same line. I want it so if an entry in the first field is deemed "true" the 2nd and 3rd field will autopopulate with the set condition. So for example if field 1 =a, the other two fields would automatically populate with b&c or whatever I chose.

I hope you can make sense of this,

Thanks for your help thus far,

Yours gratefully,
Cheesy. 1) Which fields are required?

2) What will make field 1 true?

3) What is it that you will choose to put in those other fields?

There are lots of ways to satisfy your broad parameters. I need the answer to the second and third questions so that I can determine which one to use.

cheesy

05-14-2003, 01:50 PM

You will have to fill field 1

I have tried an if else statement but could not get it to work.

There will be over 200 possible true enteries for field 1. These possibilites are work logins for employees.

Field 2 will then populate with their full name

Field 3 will then populate with their supervisor

I'm looking to see how this can be done (with an example if possible) and I'll fill in the particulars for each.

Thanks again for the help you are giving,

Yours gratefully,
Cheesy