Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Shaun E on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Trouble Populating Input Fields from Selection from Select Box 1

Status
Not open for further replies.

dnayana

Programmer
Nov 14, 2002
53
US
I've been working this problem for days ... and I still can't figure out what it is that I am doing wrong.

What I am trying to do is (automatically) populate input fields from a user's selection from a drop-down box. The First Name (first field) and the User Name (last field) fields are the only fields that display properly (via my javascript code). Everything else in-between displays the same text. It displays ALL of the remaining content from within the option value. It doesn't break (stop) at the specified stopping points in my javascript. (See text in red)

If someone can possibly take a look at the attached code and let me know what it is I am doing wrong, I'd greatly appreciate it. I can finally stop pulling my hair out. [bigsmile]

Thank you in advance to anyone that can help me resolve this problem.

Nicole [ponytails2]


Code:
[COLOR=red]<script language="JavaScript" type="text/javascript">
<!-- Hide script from old browsers
//Change the value of the User's First Name, Last Name, Phone, Email, Office, and Location based upon the user's selection in the drop-down box//
function PopulateFields(selectedIndex) {
/*Retrieve User's First Name*/
document.user.txtFirstName.value=document.user.selectuser.options[selectedIndex].value.substring(0,document.user.selectuser.options[selectedIndex].value.indexOf("**"));
/*Retrieve User's Last Name*/
document.user.txtLastName.value=document.user.selectuser.options[selectedIndex].value.substring(document.user.selectuser.options[selectedIndex].value.indexOf("**")+2,document.user.selectuser.options[selectedIndex].value.lastIndexOf("**"));
/*Retrieve User's Phone Number*/
document.user.txtPhoneNo.value=document.user.selectuser.options[selectedIndex].value.substring(document.user.selectuser.options[selectedIndex].value.indexOf("**")+2,document.user.selectuser.options[selectedIndex].value.lastIndexOf("**"));
/*Retrieve User's Email Address*/	
document.user.txtEmail.value=document.user.selectuser.options[selectedIndex].value.substring(document.user.selectuser.options[selectedIndex].value.indexOf("**")+2,document.user.selectuser.options[selectedIndex].value.lastIndexOf("**"));
/*Retrieve User's Office*/
document.user.txtOffice.value=document.user.selectuser.options[selectedIndex].value.substring(document.user.selectuser.options[selectedIndex].value.indexOf("**")+2,document.user.selectuser.options[selectedIndex].value.lastIndexOf("**"));
/*Retrieve User's Location*/
document.user.txtLocation.value=document.user.selectuser.options[selectedIndex].value.substring(document.user.selectuser.options[selectedIndex].value.indexOf("**")+2,document.user.selectuser.options[selectedIndex].value.lastIndexOf("**"));
/*Retrieve User's Username*/
document.user.txtUserId.value=document.user.selectuser.options[selectedIndex].value.substring(document.user.selectuser.options[selectedIndex].value.lastIndexOf("**")+2,document.user.selectuser.options[selectedIndex].value.length);
}
//,document.user.selectuser.options[selectedIndex].value.lastIndexOf("**")
//Put cursor in first entry field for user	
function start() {
document.forms[0].selectuser.focus();
}			
// Check if the user selected a person; if they haven't display the message and set the focus to the field
function checkform(thisform) {
if (thisform.selectuser.value == "") {
alert("You must select someone's name from the list!")
thisform.selectuser.focus()
return false
}
return true
}		
// End hiding script from old browsers -->	
</script>[/color]

<!--- Insert header --->
<cfinclude template="includes/header.cfm">
<!--- <cfdump var="#Variables#"> --->
<body onload="start()">
<form action="appaction.cfm" name="user" enctype="multipart/form-data" method="post">
<!--- Define fuction used to perform actions (i.e. add, edit, delete) --->
<input type="hidden" name="Variables.Method" value="<cfoutput>#Variables.Method#</cfoutput>">
<!--- Define component file used to perform actions (i.e. add, edit, delete) --->
<input type="Hidden" name="Variables.Component" value="useraction">
<div align="center">
	<div class="body">
		<img src="images/techpaper.jpg" border="0" alt="Technical Paper" width="730" height="88">
			<div class="login">
				<cfif IsDefined("session.txtUserid")>
					<b class="text" style="width:220; text-align:left; margin-left:4px;">&nbsp;[Print]</b>					
					<b class="text" style="width:440; text-align:right;">Logged in as: &nbsp;<cfoutput>#session.txtUserid#</cfoutput>&nbsp;</b><!--- #GetAuthUser()# --->
					<b><a href="includes/logout.cfm">[Logout]</a></b>
				<cfelse>
					<b class="text" style="width:730; text-align:right;">Logged in as: New User&nbsp;</b>
				</cfif>
			</div>

<!--- Insert content --->	
<table width ="730" border="0" cellspacing="1" cellpadding="0" align="center" bordercolor="#000000">
<tr>

<tr>
	<td colspan="2"><span class="hdg"><cfoutput>#variables.txtcaption#</cfoutput></span></td>
</tr>

<tr>
<table border="0" cellspacing="0" cellpadding="6"><!---  align="left" --->
<tr>
	<td class="rowhdg">Name:</td>
	<!--- Clear select box and enable populate fiields whether user is not logged in (i.e. Create sAccount from login page or is logged in (i.e. session txtUserid) and wants to add a new user. --->
[COLOR=red]	<td><select name="selectuser" <cfif (Not IsDefined("session.txtUserid")) or (IsDefined("session.txtUserid") and url.txtmode EQ "New")>onchange="PopulateFields(selectedIndex);"</cfif>>
	<option value="" >
	<cfoutput query="qryUsers">
	<cfif (Not IsDefined("session.txtUserid")) or (IsDefined("session.txtUserid") and url.txtmode EQ "New")>
		<option value="#qryUsers.cFirstName#**#qryUsers.cLastName#**#qryUsers.PhoneFmt#**#qryUsers.cEmail#**#qryUsers.cOffice#**#qryUsers.cRoomNum#**#qryUsers.cUserId#">#qryUsers.NmFmt#
	<cfelse>
		<option value="#qryUsers.cUserId#**#qryUsers.cFirstName#**#qryUsers.cLastName#**#qryUsers.PhoneFmt#**#qryUsers.cEmail#**#qryUsers.cOffice#**#qryUsers.cRoomNum#"
			<cfif qryUser.txtUserID IS qryUsers.cUserID>SELECTED</cfif>
		>#qryUsers.NmFmt#
	</cfif>											
	</cfoutput>
	</select>
	</td>
</tr>
<cfoutput>
<tr>
	<td class="rowhdg">First Name:</td>
	<td><input type="Text" name="txtFirstName" value="#Variables.txtFirstName#" class="txtreadonly"></td>
</tr>

<tr>
	<td class="rowhdg">Last Name:</td>
	<td><input type="Text" name="txtLastName" value="#Variables.txtLastName#" class="txtreadonly"></td>
</tr>

<tr>
	<td class="rowhdg">Phone:</td>
	<td><input type="Text" name="txtPhoneNo" value="#Variables.txtPhoneNo#" class="txtreadonly"></td>
</tr>

<tr>
	<td class="rowhdg">Email:</td>
	<td><input type="Text" name="txtEmail" value="#Variables.txtEmail#" class="txtreadonly"></td>
</tr>

<tr>
	<td class="rowhdg">Office:</td>
	<td><input type="Text" name="txtOffice" value="#Variables.txtOffice#" class="txtreadonly"></td>
</tr>

<tr>
	<td class="rowhdg">Location:</td>
	<td><input type="Text" name="txtLocation" value="#Variables.txtLocation#" class="txtreadonly"></td>
</tr>
</cfoutput>

<tr>
	<td class="rowhdg">User Type:</td>
	<td>
	<select name="intUserType">
	<option value="">&nbsp;
	<cfoutput query="qryGetUserType">
	<cfif url.txtmode IS "new">								
	<option value="#qryGetUserType.ctrAuto#">#qryGetUserType.txtUserType#
	</cfif>
	<cfif (url.txtmode IS "edit") or (url.txtmode IS "delete")>
	<option value="#qryGetUserType.ctrAuto#"
	<cfif session.txtAccessctrAuto IS qryGetUserType.ctrAuto>SELECTED
	</cfif>
	>#qryGetUserType.txtUserType#				
	</cfif>
	<cfif (url.txtmode IS "edit") and IsDefined("url.user")>
	<option value="#qryGetUserType.ctrAuto#"
	<cfif qryUser.intUserType IS qryGetUserType.ctrAuto>SELECTED
	</cfif>
	>#qryGetUserType.txtUserType#				
	</cfif>								
	</cfoutput>
	</select>
	</td>
</tr>

<cfoutput>
<tr>
	<td class="rowhdg">User Name:</td>
	<td>
	<cfif url.txtmode IS "new">
	<input type="Text" name="txtUserId" value="#Variables.txtUserID#" class="txtreadonly">
	<!--- If user selects name from userliist.cfm, then url.user will determine that person's userid to display the appropriate information. --->
	<cfelseif (url.txtmode IS "edit") and IsDefined("url.user")>
	<input type="Text" name="txtUserId" value="#qryUser.txtUserId#" class="txtreadonly">
	<cfelse>
	<input type="Text" name="txtUserId" value="#session.txtUserID#" class="txtreadonly">								
	</cfif>
	</td>[/color]
</tr>

<tr>
	<td class="rowhdg">Password:</td>
	<td>
	<cfif (url.txtmode IS "edit") and IsDefined("url.user")>
	<input type="Text" name="txtPassword" value="#qryUser.txtPassword#" class="txtentry">
	<cfelse>
	<input type="Text" name="txtPassword" value="#Variables.txtPassword#" class="txtentry"></cfif></td>
</tr>

<cfif (IsDefined("session.txtUserId") and url.txtmode NEQ "New")>
<tr>
	<td class="rowhdg">Confirm Password:</td>
	<td><input type="Text" name="txtConfirmPassword" value="" class="txtentry"></td>
</tr>
</cfif>
</cfoutput>

<tr>
	<td colspan="2" class="btns">
	
	<input type="Image" name="btnSubmit" src="images/btnSubmit.gif" align="middle" border="0" alt="Submit">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	<a href="##" onclick="this.href='javascript:document.forms[0].reset()';"><img src="images/btnClear.gif" border="0" alt="Cancel" name="btnClear" align="middle"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	<cfif IsDefined("session.txtUserId")>
	<a href="myaccount.cfm"><img src="images/btnCancel.gif" border="0" alt="Cancel" name="btnCancel" align="middle"></a>							
	<cfelse>
	<a href="admin/login.cfm"><img src="images/btnCancel.gif" border="0" alt="Cancel" name="btnCancel" align="middle"></a>
	
	</cfif>
	<cfoutput>
	<cfif IsDefined("url.txtmode")>
	<cfif url.txtMode NEQ "New">
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	<input type="Image" name="btnDelete" src="images/btnDelete.gif" align="middle" border="0" alt="Delete Record" onClick="return confirmThis('Are you sure you want to delete User: #UCase(Name)#?\n\nClick [OK] for yes or [Cancel] for no.\n\nThis action cannot be undone.');">
	</cfif>
	</cfif>
	</cfoutput>
	</td>
</tr>
</table>
</form>
 
There's no bug with your code - the behaviour you are seeing is what you are asking JavaScript to do. Basically, you're always asking for the same substring to be assigned to all fields except the first. You need to remove each portion of the string before trying to find the next.

Here's a replacement PopulateFields function that does the job:

Code:
function PopulateFields(selectedIndex) {
	var frm = document.forms['user'].elements;
	var data = frm['selectuser'].options[selectedIndex].value;

	frm.txtFirstName.value = data.substr(0, data.indexOf('**'));
	data = data.substr(data.indexOf('**') + 2);

	frm.txtLastName.value = data.substr(0, data.indexOf('**'));
	data = data.substr(data.indexOf('**') + 2);

	frm.txtPhoneNo.value = data.substr(0, data.indexOf('**'));
	data = data.substr(data.indexOf('**') + 2);

	frm.txtEmail.value = data.substr(0, data.indexOf('**'));
	data = data.substr(data.indexOf('**') + 2);

	frm.txtOffice.value = data.substr(0, data.indexOf('**'));
	data = data.substr(data.indexOf('**') + 2);

	frm.txtLocation.value = data.substr(0, data.indexOf('**'));

	data = data.substr(data.indexOf('**') + 2);
	frm.txtUserId.value = data.substr(0);
}

Hope this helps,
Dan

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Thanks for your help Dan! It worked. [medal]
Thanks,
Nicole [ponytails2]
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top