Link to home
Start Free TrialLog in
Avatar of pookeybear
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.
Avatar of Mark Franz
Mark Franz
Flag of United States of America image

Why do you have several submit buttons?  I object to this action but it is not difficult to fix.  First of all, you need to have each submit button inside a seperate <form> tag.  this should default to whichever form you have filled out only.  

Mark
Avatar of pookeybear
pookeybear

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?
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.focus();
      document.PhoneIn.text1.select();
}

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_DefaultClientScript" 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.&nbsp; Then click the button for your search
option.&nbsp;&nbsp;&nbsp;&nbsp;&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>&nbsp;
<br>&nbsp;
<p>
<strong><u><font size="+1">Conference Room/Functional Area
Data</font></u></strong><br>
<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>&nbsp;
<br>&nbsp;
<br>&nbsp;
<br>&nbsp;
<p>
Please <a href="mailto:emailaccount@.com">notify 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>
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>

ASKER CERTIFIED SOLUTION
Avatar of Mark Franz
Mark Franz
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
What if I used your two examples together??   Have a
 <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.
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.
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"!
Thanks again!
Your welcome, and have fun!

Mark