pookeybear
asked on
How to Set a Default Submit to One of Several buttons per Page
I have an HTML page which has one text box and several submit buttons. I want the page to default to one action if the person hits enter instead of clicking the appropriate submit button. This is a phonebook lookup and the person can type various criteria in the textbox and then pick sorted output by First Name, Last Name, Department, etc. They usually select a last name but forget to click the button and get mad because it doesn't think for them. I don't know much Java, but the actions for the submits are in Javascript. I use Interdev, but can code straight HTML in addition to the ASP pages used by the actions.
ASKER
As I said, I know little Java and the way I produced the page was the way I knew how to handle it. If there is a better way, please enlighten me.
Can you post the code or the URL?
ASKER
Okay; I changed some sensitive names to innocuous stuff. Please be kind; this is my first web effort. :)
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<script ID="clientEventHandlersJS" LANGUAGE="javascript">
<!--
/* set focus to the input field on window load */
function window_onload()
{
document.PhoneIn.text1.foc us();
document.PhoneIn.text1.sel ect();
}
function btnLastName_onclick() {
document.PhoneIn.action = "LastName.asp"
}
function btnFirstName_onclick() {
document.PhoneIn.action = "FirstName.asp"
}
function btnCCID_onclick() {
document.PhoneIn.action = "CCID.asp"
}
function btnBadge_onclick() {
document.PhoneIn.action = "Badge.asp"
}
function btnDept_onclick() {
document.PhoneIn.action = "Dept.asp"
}
function btnRoom_onclick() {
document.PhoneIn.action = "Room.asp"
}
function btnMS_onclick() {
document.PhoneIn.action = "MailStop.asp"
}
function btnPhone_onclick() {
document.PhoneIn.action = "Phone.asp"
}
function btnConfRm_onclick() {
document.PhoneIn.action = "ConfRm.asp"
}
function btnRepro_onclick() {
document.PhoneIn.action = "Repro.asp"
}
function btnMailRoom_onclick() {
document.PhoneIn.action = "MailRoom.asp"
}
function btnFaxes_onclick() {
document.PhoneIn.action = "Faxes.asp"
}
function btnMiscName_onclick() {
document.PhoneIn.action = "MiscName.asp"
}
//-->
</script>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="VI60_DefaultClientSc ript" content="javaScript">
<meta name="GENERATOR" content="Mozilla/4.5 [en] (WinNT; U) [Netscape]">
<title> Company Local PhoneBook</title>
</head>
<form NAME="PhoneIn" METHOD="get">
<body text="#cc6666" bgcolor="#ffffff" link="brown" vlink="crimson" alink="#cc6666" background="phonback.gif" LANGUAGE="javascript" onload="return window_onload()">
<table width="75%" cellPadding="1" cellSpacing="1">
<tr>
<td>
<strong>
<font color="#cc6666" face="Boulder" size="3">
COMPANY
</font>
<br>
<font color="#cc6666" face="Boulder" size="4">
PHONEBOOK
</font>
</strong>
</td>
<td>
<img src="phonering.gif" WIDTH="99" HEIGHT="76" style="HEIGHT: 76px; WIDTH: 99px" tabindex="-1">
</td>
</tr>
<tr>
<td>
<img SRC="wb01682_.gif" height="7" width="90%" tabindex="-1">
</td>
</tr>
</table>
<p><strong><font size="+0" color=#cc6666>Type in a single word or
number to search on. Then click the button for your search
option. & nbsp;  ;</font></ strong>
<input NAME="text1" MAXLENGTH="30" SIZE="30" tabindex="1">
<br>
</p>
<p><strong><u><font size="+1">Employee Data</font></u></strong></ p>
<p>
<table ALIGN="left" BORDER="0">
<tr>
<td ALIGN="middle" VALIGN="center">
<input type="submit" NAME="FirstName" value="First Name" ID="btnFirstName" alt = "First" size = "75" style ="CURSOR: hand; HEIGHT: 30px; WIDTH: 75px" LANGUAGE="javascript" onclick="return btnFirstName_onclick()" tabindex="2">
</td>
<td ALIGN="middle" VALIGN="center">
<input type="submit" NAME="LastName" value="Last Name " ID="btnLastName" alt = "Last" size = "75" style ="CURSOR: hand; HEIGHT: 30px; WIDTH: 75px" LANGUAGE="javascript" onclick="return btnLastName_onclick()" tabindex="3">
</td>
<td ALIGN="middle" VALIGN="center">
<input type="submit" NAME="CCID" value=" CCID " ID="btnCCID" alt = "CCID" size = "75" style ="CURSOR: hand; HEIGHT: 30px; WIDTH: 75px" LANGUAGE="javascript" onclick="return btnCCID_onclick()" tabindex="4">
</td>
<td ALIGN="middle" VALIGN="center">
<input type="submit" NAME="Badge" value=" Badge " ID="btnBadge" alt = "Badge" size = "75" style ="CURSOR: hand; HEIGHT: 30px; WIDTH: 75px" LANGUAGE="javascript" onclick="return btnBadge_onclick()" tabindex="5">
</td>
</tr>
<tr>
<td ALIGN="middle" VALIGN="center">
<input type="submit" NAME="Dept" value=" Dept " ID="btnDept" alt = "Dept" size = "75" style ="CURSOR: hand; HEIGHT: 30px; WIDTH: 75px" LANGUAGE="javascript" onclick="return btnDept_onclick()" tabindex="6"></td>
<td ALIGN="middle" VALIGN="center">
<input type="submit" NAME="Room" value=" Room " ID="btnRoom" alt = "Room" size = "75" style ="CURSOR: hand; HEIGHT: 30px; WIDTH: 75px" LANGUAGE="javascript" onclick="return btnRoom_onclick()" tabindex="7">
</td>
<td ALIGN="middle" VALIGN="center">
<input type="submit" NAME="MS" value=" MS " ID="btnMS" alt = "MS" size = "75" style ="CURSOR: hand; HEIGHT: 30px; WIDTH: 75px" LANGUAGE="javascript" onclick="return btnMS_onclick()" tabindex="8">
</td>
<td ALIGN="middle" VALIGN="center">
<input type="submit" NAME="Phone" value=" Phone " ID="btnPhone" alt = "Phone" size = "75" style ="CURSOR: hand; HEIGHT: 30px; WIDTH: 75px" LANGUAGE="javascript" onclick="return btnPhone_onclick()" tabindex="9">
</td>
</tr>
</table>
</p>
<br>
<br>
<p>
<strong><u><font size="+1">Conference Room/Functional Area
Data</font></u></strong><b r>
<strong>Click on a button below to see a listing of the data for that item or
enter a keyword (such as Accounting) and click the "Search by Keyword" button.</strong></p>
<p>
<table ALIGN="left" BORDER="0">
<tr>
<td ALIGN="middle" VALIGN="center">
<strong>
<input type="submit" NAME="MiscName" value="ConfRooms" ID="btnConfRm" alt = "ConfRm" size = "80" style ="CURSOR: hand; HEIGHT: 30px; WIDTH: 80px" LANGUAGE="javascript" onclick="return btnConfRm_onclick()" tabindex="10">
</strong>
</td>
<td ALIGN="middle" VALIGN="center">
<strong>
<input type="submit" NAME="Faxes" value="Faxes" ID="btnFaxes" alt = "Faxes" size = "75" style ="CURSOR: hand; HEIGHT: 30px; WIDTH: 75px" LANGUAGE="javascript" onclick="return btnFaxes_onclick()" tabindex="11">
</strong>
</td>
<td ALIGN="middle" VALIGN="center">
<strong>
<input type="submit" NAME="Repro" value="Repro" ID="btnRepro" alt = "Repro" size = "75" style ="CURSOR: hand; HEIGHT: 30px; WIDTH: 75px" LANGUAGE="javascript" onclick="return btnRepro_onclick()" tabindex="12">
</strong>
</td>
<td ALIGN="middle" VALIGN="center">
<strong>
<input type="submit" NAME="MailRoom" value="MailRoom" ID="btnMailRoom" alt = "MailRoom" size = "75" style ="CURSOR: hand; HEIGHT: 30px; WIDTH: 75px" LANGUAGE="javascript" onclick="return btnMailRoom_onclick()" tabindex="13">
</strong>
</td>
<td ALIGN="middle" VALIGN="center">
<strong>
<input type="submit" NAME ="" value ="Search by Keyword" ID="btnMiscName" alt = "MiscName" size = "100" style="CURSOR: hand; HEIGHT: 30px; WIDTH: 150px" LANGUAGE="javascript" onclick="return btnMiscName_onclick()" tabindex="14">
</strong>
</td>
</tr>
</table>
</p>
<br>
<br>
<br>
<br>
<p>
Please <a href="mailto:emailaccount@ .com">noti fy us</a> of any changes which need to be made to the data provided
here.<br>
</p>
<p>
<a href="http://www.somewhere.com" target="_top"><img src="wb00677_.gif" border="0" tabindex="-1" WIDTH="32" HEIGHT="32"> Return to Intranet Home Page</a><br>
</p>
<br>
<p></p>
</body>
</form>
</html>
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<script ID="clientEventHandlersJS"
<!--
/* set focus to the input field on window load */
function window_onload()
{
document.PhoneIn.text1.foc
document.PhoneIn.text1.sel
}
function btnLastName_onclick() {
document.PhoneIn.action = "LastName.asp"
}
function btnFirstName_onclick() {
document.PhoneIn.action = "FirstName.asp"
}
function btnCCID_onclick() {
document.PhoneIn.action = "CCID.asp"
}
function btnBadge_onclick() {
document.PhoneIn.action = "Badge.asp"
}
function btnDept_onclick() {
document.PhoneIn.action = "Dept.asp"
}
function btnRoom_onclick() {
document.PhoneIn.action = "Room.asp"
}
function btnMS_onclick() {
document.PhoneIn.action = "MailStop.asp"
}
function btnPhone_onclick() {
document.PhoneIn.action = "Phone.asp"
}
function btnConfRm_onclick() {
document.PhoneIn.action = "ConfRm.asp"
}
function btnRepro_onclick() {
document.PhoneIn.action = "Repro.asp"
}
function btnMailRoom_onclick() {
document.PhoneIn.action = "MailRoom.asp"
}
function btnFaxes_onclick() {
document.PhoneIn.action = "Faxes.asp"
}
function btnMiscName_onclick() {
document.PhoneIn.action = "MiscName.asp"
}
//-->
</script>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="VI60_DefaultClientSc
<meta name="GENERATOR" content="Mozilla/4.5 [en] (WinNT; U) [Netscape]">
<title> Company Local PhoneBook</title>
</head>
<form NAME="PhoneIn" METHOD="get">
<body text="#cc6666" bgcolor="#ffffff" link="brown" vlink="crimson" alink="#cc6666" background="phonback.gif" LANGUAGE="javascript" onload="return window_onload()">
<table width="75%" cellPadding="1" cellSpacing="1">
<tr>
<td>
<strong>
<font color="#cc6666" face="Boulder" size="3">
COMPANY
</font>
<br>
<font color="#cc6666" face="Boulder" size="4">
PHONEBOOK
</font>
</strong>
</td>
<td>
<img src="phonering.gif" WIDTH="99" HEIGHT="76" style="HEIGHT: 76px; WIDTH: 99px" tabindex="-1">
</td>
</tr>
<tr>
<td>
<img SRC="wb01682_.gif" height="7" width="90%" tabindex="-1">
</td>
</tr>
</table>
<p><strong><font size="+0" color=#cc6666>Type in a single word or
number to search on. Then click the button for your search
option. &
<input NAME="text1" MAXLENGTH="30" SIZE="30" tabindex="1">
<br>
</p>
<p><strong><u><font size="+1">Employee Data</font></u></strong></
<p>
<table ALIGN="left" BORDER="0">
<tr>
<td ALIGN="middle" VALIGN="center">
<input type="submit" NAME="FirstName" value="First Name" ID="btnFirstName" alt = "First" size = "75" style ="CURSOR: hand; HEIGHT: 30px; WIDTH: 75px" LANGUAGE="javascript" onclick="return btnFirstName_onclick()" tabindex="2">
</td>
<td ALIGN="middle" VALIGN="center">
<input type="submit" NAME="LastName" value="Last Name " ID="btnLastName" alt = "Last" size = "75" style ="CURSOR: hand; HEIGHT: 30px; WIDTH: 75px" LANGUAGE="javascript" onclick="return btnLastName_onclick()" tabindex="3">
</td>
<td ALIGN="middle" VALIGN="center">
<input type="submit" NAME="CCID" value=" CCID " ID="btnCCID" alt = "CCID" size = "75" style ="CURSOR: hand; HEIGHT: 30px; WIDTH: 75px" LANGUAGE="javascript" onclick="return btnCCID_onclick()" tabindex="4">
</td>
<td ALIGN="middle" VALIGN="center">
<input type="submit" NAME="Badge" value=" Badge " ID="btnBadge" alt = "Badge" size = "75" style ="CURSOR: hand; HEIGHT: 30px; WIDTH: 75px" LANGUAGE="javascript" onclick="return btnBadge_onclick()" tabindex="5">
</td>
</tr>
<tr>
<td ALIGN="middle" VALIGN="center">
<input type="submit" NAME="Dept" value=" Dept " ID="btnDept" alt = "Dept" size = "75" style ="CURSOR: hand; HEIGHT: 30px; WIDTH: 75px" LANGUAGE="javascript" onclick="return btnDept_onclick()" tabindex="6"></td>
<td ALIGN="middle" VALIGN="center">
<input type="submit" NAME="Room" value=" Room " ID="btnRoom" alt = "Room" size = "75" style ="CURSOR: hand; HEIGHT: 30px; WIDTH: 75px" LANGUAGE="javascript" onclick="return btnRoom_onclick()" tabindex="7">
</td>
<td ALIGN="middle" VALIGN="center">
<input type="submit" NAME="MS" value=" MS " ID="btnMS" alt = "MS" size = "75" style ="CURSOR: hand; HEIGHT: 30px; WIDTH: 75px" LANGUAGE="javascript" onclick="return btnMS_onclick()" tabindex="8">
</td>
<td ALIGN="middle" VALIGN="center">
<input type="submit" NAME="Phone" value=" Phone " ID="btnPhone" alt = "Phone" size = "75" style ="CURSOR: hand; HEIGHT: 30px; WIDTH: 75px" LANGUAGE="javascript" onclick="return btnPhone_onclick()" tabindex="9">
</td>
</tr>
</table>
</p>
<br>
<br>
<p>
<strong><u><font size="+1">Conference Room/Functional Area
Data</font></u></strong><b
<strong>Click on a button below to see a listing of the data for that item or
enter a keyword (such as Accounting) and click the "Search by Keyword" button.</strong></p>
<p>
<table ALIGN="left" BORDER="0">
<tr>
<td ALIGN="middle" VALIGN="center">
<strong>
<input type="submit" NAME="MiscName" value="ConfRooms" ID="btnConfRm" alt = "ConfRm" size = "80" style ="CURSOR: hand; HEIGHT: 30px; WIDTH: 80px" LANGUAGE="javascript" onclick="return btnConfRm_onclick()" tabindex="10">
</strong>
</td>
<td ALIGN="middle" VALIGN="center">
<strong>
<input type="submit" NAME="Faxes" value="Faxes" ID="btnFaxes" alt = "Faxes" size = "75" style ="CURSOR: hand; HEIGHT: 30px; WIDTH: 75px" LANGUAGE="javascript" onclick="return btnFaxes_onclick()" tabindex="11">
</strong>
</td>
<td ALIGN="middle" VALIGN="center">
<strong>
<input type="submit" NAME="Repro" value="Repro" ID="btnRepro" alt = "Repro" size = "75" style ="CURSOR: hand; HEIGHT: 30px; WIDTH: 75px" LANGUAGE="javascript" onclick="return btnRepro_onclick()" tabindex="12">
</strong>
</td>
<td ALIGN="middle" VALIGN="center">
<strong>
<input type="submit" NAME="MailRoom" value="MailRoom" ID="btnMailRoom" alt = "MailRoom" size = "75" style ="CURSOR: hand; HEIGHT: 30px; WIDTH: 75px" LANGUAGE="javascript" onclick="return btnMailRoom_onclick()" tabindex="13">
</strong>
</td>
<td ALIGN="middle" VALIGN="center">
<strong>
<input type="submit" NAME ="" value ="Search by Keyword" ID="btnMiscName" alt = "MiscName" size = "100" style="CURSOR: hand; HEIGHT: 30px; WIDTH: 150px" LANGUAGE="javascript" onclick="return btnMiscName_onclick()" tabindex="14">
</strong>
</td>
</tr>
</table>
</p>
<br>
<br>
<br>
<br>
<p>
Please <a href="mailto:emailaccount@
here.<br>
</p>
<p>
<a href="http://www.somewhere.com" target="_top"><img src="wb00677_.gif" border="0" tabindex="-1" WIDTH="32" HEIGHT="32"> Return to Intranet Home Page</a><br>
</p>
<br>
<p></p>
</body>
</form>
</html>
Well you could route the user to a default page from the form tag if a return is pressed instead of selecting a button;
<form NAME="PhoneIn" METHOD="get" ACTION="defaultp.htm">
Where defaultp.htm states;
<body>
You need to press the corresponding button for your query... Go back and press a button!
</body>
<form NAME="PhoneIn" METHOD="get" ACTION="defaultp.htm">
Where defaultp.htm states;
<body>
You need to press the corresponding button for your query... Go back and press a button!
</body>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
What if I used your two examples together?? Have a
<form NAME="PhoneIn" METHOD="get" ACTION="defaultp.htm">
that = LastName query??
<form NAME="PhoneIn" METHOD="get" ACTION="defaultp.htm">
that = LastName query??
Yes you can do this, but then your query is going to do a look-up on LastName only right? What if they type in a Dept #, have you ever returned a LastName match on Dept12?
You could have defaultp.htm use the passed in value of the form and run a query against the dB until a 'true' value is found, this is how most of the search engines do there look-ups, return everything that matches a field entry.
You could have defaultp.htm use the passed in value of the form and run a query against the dB until a 'true' value is found, this is how most of the search engines do there look-ups, return everything that matches a field entry.
ASKER
When it goes to the lastname.asp, a SQL lookup is done; if no match found, a message returns the user that status with a back arrow which returns to default page for retyping. Their request is to default to last name, since that's 90% of the requests processed. Since there's only one textbox, I have no way of knowing whether they type a dept., badge, etc. as all are alphachar fields.
ASKER
This last works perfectly. I'll enhance the error response to unmatched entries and all will be well. Thanks so much - you really are "Experts"!
ASKER
Thanks again!
Your welcome, and have fun!
Mark
Mark
Mark