Submit Form Using Enter Or Clicking Submit
Hello,
I have a form that I am submitting (see code attached), however when I press enter it just refreshes the page and doesn't actually submit the form. I find this very inconvenient as I myself always use the enter key. We use IE6 or IE7.
Any advice on how to correct this behaviour?
Thanks,
Ryan
I have a form that I am submitting (see code attached), however when I press enter it just refreshes the page and doesn't actually submit the form. I find this very inconvenient as I myself always use the enter key. We use IE6 or IE7.
Any advice on how to correct this behaviour?
Thanks,
Ryan
<html>
<title>Customer Search</title>
<body background="../background.png" onLoad=dofo() alink="blue" vlink="blue">
<head>
<script type="text/javascript">
function dofo() {
document.fo.keyword.focus();
}
</script>
</head>
<div align="center">
<a href="http://intranet/search"><img src="../logo.png" border="0" alt=""></a>
<br>
<tr>
<td><a href="#" onClick="history.go(-1)">Back</a> <a href="http://intranet" alt="Intranet Home">Home</a> <a href="list_all.php">Show All</a></td>
</tr>
<form name="fo" method="POST" action="search.php">
<table>
<strong>Enter Customer Information</strong><br><br>
<input type="text" name="keyword" size="20" maxlength="100">
<input type="submit" name="submit" value="Search" />
</table>
</form>
</div>
</body>
</html>
Actually, it wasn't said anywhere that your posted script was called search.php, sorry for the assumption.
Here's an example of your script that I tested with:
Here's an example of your script that I tested with:
<html>
<title>Customer Search</title>
<body background="../background.png" onLoad=dofo() alink="blue" vlink="blue">
<head>
<script type="text/javascript">
function dofo() {
document.fo.keyword.focus();
}
</script>
</head>
<?php
// Output POST variables for testing
print_r($_POST);
?>
?>
<div align="center">
<a href="http://intranet/search"><img src="../logo.png" border="0" alt=""></a>
<br>
<tr>
<td><a href="#" onClick="history.go(-1)">Back</a> <a href="http://intranet" alt="Intranet Home">Home</a> <a href="list_all.php">Show All</a></td>
</tr>
<form name="fo" method="POST" action="search.php">
<table>
<strong>Enter Customer Information</strong><br><br>
<input type="text" name="keyword" size="20" maxlength="100">
<input type="submit" name="submit" value="Search" />
</table>
</form>
</div>
</body>
</html>
ASKER
The script itself works as long as you click the submit button and not press enter. So I know the script works.
Enter has the effect of the current "button" in focus. So, make sure that you are focussed on the button that is the same as the submit that you want rather than some other input on the form
Hi,
That's good, just wanted to know you're sure about that. However, I can't find any browser that wouldn't submit the form when enter is pressed in the text field.
Browsers tested (auto-focus works/submit-on-enter works):
- Firefox 3.0.5 (OK/OK)
- Internet Explorer 5.5 (OK/OK)
- Internet Explorer 6.0 (OK/OK)
- Internet Explorer 7.0 (OK/OK)
- Opera 9.26 (OK/OK)
- Chrome 1.0 (OK/OK)
That's good, just wanted to know you're sure about that. However, I can't find any browser that wouldn't submit the form when enter is pressed in the text field.
Browsers tested (auto-focus works/submit-on-enter works):
- Firefox 3.0.5 (OK/OK)
- Internet Explorer 5.5 (OK/OK)
- Internet Explorer 6.0 (OK/OK)
- Internet Explorer 7.0 (OK/OK)
- Opera 9.26 (OK/OK)
- Chrome 1.0 (OK/OK)
A couple of points of interest in your page:
- the <head> tag is misplaced, the correct structure would be <html><head></head><body><
- if the dofo() function is called on body's onLoad, there's a chance that the keyword element hasn't been loaded yet. This can actually prevent the function from working if the page's loaded very fast. More advisable is to place the function call at the end of the page, like <script type="text/javascript">dof
- the <head> tag is misplaced, the correct structure would be <html><head></head><body><
- if the dofo() function is called on body's onLoad, there's a chance that the keyword element hasn't been loaded yet. This can actually prevent the function from working if the page's loaded very fast. More advisable is to place the function call at the end of the page, like <script type="text/javascript">dof
ASKER
ansx: agreed, I don't think I was thinking when I wrote that. Changed the code regardless.
Still not able to hit enter. So if I tab over to SEARCH than I can press enter and it works fine. But if I press enter while still focused in the text box itself it just reloads the page.
Still not able to hit enter. So if I tab over to SEARCH than I can press enter and it works fine. But if I press enter while still focused in the text box itself it just reloads the page.
as I said - just force the focus to the button
I believe that it is actually defined that the Enter is like clicking in the currently focussed field. So, just focus on it
I believe that it is actually defined that the Enter is like clicking in the currently focussed field. So, just focus on it
Please try to make the page standards compliant (at least if you expect standarsd compliant behaviour).
The misplaced <head> has already been mentioned.
To add a few:
- DOCTYPE missing
- <table> contains non-table data
- <tr> is outside <table>
You can check compliance e.g. with http://validator.w3.org/
The misplaced <head> has already been mentioned.
To add a few:
- DOCTYPE missing
- <table> contains non-table data
- <tr> is outside <table>
You can check compliance e.g. with http://validator.w3.org/
ASKER
jhurst: Ok, I missed that when you first posted, but if I do that than they will not be able to just type into the box when the page loads? Which would defeat the whole purpose of this.
ASKER
thehagman: this is PHP, your validator would not accept the file.
ASKER
Updated code attached.
<html>
<head>
<script type="text/javascript">
function dofo() {
document.fo.keyword.focus();
}
</script>
</head>
<title>Customer Search</title>
<body background="../background.png" alink="blue" vlink="blue">
<div align="center">
<a href="http://intranet/search"><img src="../logo.png" border="0" alt=""></a>
</div>
<br>
<table align="center">
<div align="center">
<a href="#" onClick="history.go(-1)">Back</a> <a href="http://intranet" alt="Intranet Home">Home</a> <a href="list_all.php">Show All</a>
<form name="fo" method="POST" action="search.php">
<strong>Enter Customer Information</strong><br><br>
<input type="text" name="keyword" size="20" maxlength="100">
<input type="submit" name="submit" value="Search" />
</form>
</div>
</table>
<script type="text/javascript">dofo();</script>
</body>
</html>
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
would you by chance have a sample of how to do this?
Would it be possible that there's something in your browser that captures the enter key, preventing the browser to work as intended? Some toolbar or plugin maybe? Try uninstalling these?
That you are dealing with php does not exempt you from the need to produce vaild html.
I tested the attached modification of your latest code. It is compliant and hitting ENTER submits (with Firefox 3.05 and IE 7). Does this work for you, too?
I tested the attached modification of your latest code. It is compliant and hitting ENTER submits (with Firefox 3.05 and IE 7). Does this work for you, too?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript">
function dofo() {
document.fo.keyword.focus();
}
</script>
<title>Customer Search</title>
</head>
<body style="background: url(../background.png);" alink="blue" vlink="blue">
<div align="center">
<a href="http://intranet/search"><img src="../logo.png" border="0" alt=""></a>
</div>
<br>
<div align="center">
<a href="#" onClick="history.go(-1)">Back</a> <a href="http://intranet" title="Intranet Home">Home</a> <a href="list_all.php">Show All</a>
<form name="fo" method="POST" action="search.php">
<strong>Enter Customer Information</strong><br><br>
<input type="text" name="keyword" size="20" maxlength="100">
<input type="submit" name="submit" value="Search" />
</form>
</div>
<script type="text/javascript">dofo();</script>
</body>
</html>
ASKER
It works in FF, but we don't use FF at the terminals. I thought maybe it was my browser so I tested at two other workstations, same effect. Also tried to load mine without add-ons, same thing. Page just refreshes.
I just was able to dig up an old pc still having IE6 and can now confirm:
The code I posted ni #23296552 above works also with IE6 (I had tested IE7 and FF3 before), i.e.
Typing a few letters and hitting ENTER causes the form to be submitted to search.php (which does not exist here).
Are you sure you don't have smoe unusual extra software installed?
The code I posted ni #23296552 above works also with IE6 (I had tested IE7 and FF3 before), i.e.
Typing a few letters and hitting ENTER causes the form to be submitted to search.php (which does not exist here).
Are you sure you don't have smoe unusual extra software installed?
ASKER
Nothing special on the pc ... just my work pc. Everything else is standard. Nothing special with the browser either. Keeping in mind that this is happening on multiple PC's and not just my own. Do you want me to post the complete code with a very stripped DB?
Hi,
If we really can't figure out a reason to make a browser work like it should, here's the cheat (line 15 is only there to prove it works, remove for use):
If we really can't figure out a reason to make a browser work like it should, here's the cheat (line 15 is only there to prove it works, remove for use):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript">
function dofo() {
document.fo.keyword.focus();
}
function onKeyPress (e) {
var keycode;
if (window.event) {keycode = window.event.keyCode} // IE
else if (e) {keycode = e.which}; // Netscape
if (keycode == 13) {
alert("Captured enter, submitting form");
document.fo.submit();
}
}
if (document.layers) document.captureEvents(Event.KEYPRESS);
document.onkeypress = onKeyPress; // note capitalisation
</script>
<title>Customer Search</title>
</head>
<body style="background: url(../background.png);" alink="blue" vlink="blue">
<div align="center">
<a href="http://intranet/search"><img src="../logo.png" border="0" alt=""></a>
</div>
<br>
<div align="center">
<a href="#" onClick="history.go(-1)">Back</a>
<a href="http://intranet" title="Intranet Home">Home</a>
<a href="list_all.php">Show All</a>
<form name="fo" method="POST" action="search.php">
<strong>Enter Customer Information</strong><br><br>
<input type="text" name="keyword" size="20" maxlength="100">
<input type="submit" name="submitButton" value="Search" />
</form>
</div>
<script type="text/javascript">dofo();</script>
</body>
</html>
I see the comment that "there may be something in the browser". No. The browser is working as it should. Enter in a text field is just that.
You will need to capture the Enter key as aI said earlier
You will need to capture the Enter key as aI said earlier
ASKER
i get the alert that it was captured ... but the same thing is happening again. It look like this slowed it down enough to see that when this is happening it is going to the search but refreshing back to index.php almost immediately.
What are you referring to here. Are you saying that the enter is having some effect other than what we have been discussing here?
jhurst,
Apparently pressing enter while focused on a text field triggers page refresh instead of submitting.
Coppsbuildall, another thing that occurred to me was that maybe the HTTP server is doing something to cause this. What HTTP server are you using? Have you tested opening the HTML file directly in a browser?
Apparently pressing enter while focused on a text field triggers page refresh instead of submitting.
Coppsbuildall, another thing that occurred to me was that maybe the HTTP server is doing something to cause this. What HTTP server are you using? Have you tested opening the HTML file directly in a browser?
ASKER
absx: Wamp server. It is local on my computer.
What happens if you change the form action to a non-existing script?
In fact that is what my tests were all based upon and I took a "Not Found" with url search.php as a proof of correct functionality.
If you say that you see search.php for a short while and then it goes back - then search.php somehow distnguioshes between ENTER and a click on submit (however, I don't know how - the generated requests appear identical to me).
BTW, what happen if you use a well-known search form like www.google.com, type a search term and hit enter? Search or refresh?
In fact that is what my tests were all based upon and I took a "Not Found" with url search.php as a proof of correct functionality.
If you say that you see search.php for a short while and then it goes back - then search.php somehow distnguioshes between ENTER and a click on submit (however, I don't know how - the generated requests appear identical to me).
BTW, what happen if you use a well-known search form like www.google.com, type a search term and hit enter? Search or refresh?
ASKER
Google works like a charm. I am seeing that this is a bug in IE?
It can hardly be a bug in IE if it works at my place ...
Did you try my test with a non-existing search.php? (You may simply copy / paste attached code to a new file testing.html )
Or could you post search.php? Maybe the error is there instead of what we are looking at all the time ...
Did you try my test with a non-existing search.php? (You may simply copy / paste attached code to a new file testing.html )
Or could you post search.php? Maybe the error is there instead of what we are looking at all the time ...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript">
function dofo() {
document.fo.keyword.focus();
}
</script>
<title>Customer Search - Test Version</title>
</head>
<body style="background: url(../background.png);" alink="blue" vlink="blue">
<div align="center">
<a href="http://intranet/search"><img src="../logo.png" border="0" alt=""></a>
</div>
<br>
Attention! This is only a test version!
<div align="center">
<a href="#" onClick="history.go(-1)">Back</a> <a href="http://intranet" title="Intranet Home">Home</a> <a href="list_all.php">Show All</a>
<form name="fo" method="POST" action="non-existing-search.php">
<strong>Enter Customer Information</strong><br><br>
<input type="text" name="keyword" size="20" maxlength="100">
<input type="submit" name="submit" value="Search" />
</form>
</div>
<script type="text/javascript">dofo();</script>
</body>
</html>
Hi,
To nutshell the situation a bit:
1) Browser bugs have been ruled out. Several browsers, hosts and users have proven this to be out of option. Also, a browser bug like this would've been all over Google.
2) The HTML is good-enough to work, JavaScript keylisteners have been tried, problems with these are also out.
3) The HTTP server can still cause this. Try reinstalling the WAMP kit or at least testing without the Apache server, as in opening the HTML page directly in your browser (File->Open->...)
To nutshell the situation a bit:
1) Browser bugs have been ruled out. Several browsers, hosts and users have proven this to be out of option. Also, a browser bug like this would've been all over Google.
2) The HTML is good-enough to work, JavaScript keylisteners have been tried, problems with these are also out.
3) The HTTP server can still cause this. Try reinstalling the WAMP kit or at least testing without the Apache server, as in opening the HTML page directly in your browser (File->Open->...)
ASKER
When I do it directly from the browser it goes to the search page ... as PHP code as it should.
Search.php attached.
Search.php attached.
<?php
if (!isset($_POST["submit"]))
{
header("Location: index.php");
exit;
}
else
{
$db = 'C:\\Program Files\\Wamp\\www\\search\\Accounts.mdb';
$conn = new COM("ADODB.Connection") or exit('Cannot start ADO.');
$conn->Open("Provider=Microsoft.Jet.OLEDB.4.0; Data Source=$db");
$sql = "SELECT Acct_No, Acct_Type, First_Name, Last_Name, Full_Name, City, State, Zip_Code, Area_Code, Phone_No, Addr_Line_1, Addr_Line_2, Comment_1, Comment_2
FROM Data WHERE
Acct_No LIKE '%".$_POST["keyword"]."%' OR
Acct_Type LIKE '%".$_POST["keyword"]."%' OR
First_Name LIKE '%".$_POST["keyword"]."%' OR
Last_Name LIKE '%".$_POST["keyword"]."%' OR
Full_Name LIKE '%".$_POST["keyword"]."%' OR
City LIKE '%".$_POST["keyword"]."%' OR
State LIKE '%".$_POST["keyword"]."%' OR
Zip_Code LIKE '%".$_POST["keyword"]."%' OR
Area_Code LIKE '%".$_POST["keyword"]."%' OR
Phone_No LIKE '%".$_POST["keyword"]."%' OR
Addr_Line_1 LIKE '%".$_POST["keyword"]."%' OR
Addr_Line_2 LIKE '%".$_POST["keyword"]."%' OR
Comment_1 LIKE '%".$_POST["keyword"]."%' OR
Comment_2 LIKE '%".$_POST["keyword"]."%'
ORDER BY Acct_No";
$rs = $conn->Execute($sql);
}
?>
<html>
<head>
<style>
table
{
font-size: 15px;
}
table input { font-size: 10px; }
table select { font-size: 10px; }
</style>
<title>Customer Search</title>
<body background="../background.png" alink="blue" vlink="blue">
</head>
<center><a href="http://intranet/search"><img src="../../logo.png" border="0"></a><br>
<a href="#" onClick="history.go(-1)">Back</a> <a href="list_all.php">Show All</a>
</center>
<br>
<body background="../background.png">
<div align="center">
<table border="1" style="empty-cells:show">
<tr border="1">
<th width="125">Account Number</th>
<th>First Name</th>
<th>Last Name</th>
<th>City</th>
<th>Province</th>
<th width="80">Postal Code</th>
<th>Area Code</th>
<th>Phone Number</th>
<th>Address Line 1</th>
<th>Address Line 2</th>
<th>Comments</th>
<th>Comments</th>
</tr>
<?php while (!$rs->EOF) { ?>
<tr>
<td align="center"><?php if ($rs->Fields['Acct_No']->Value =="") echo " "; else echo $rs->Fields['Acct_No']->Value; ?></td>
<td align="center"><?php if ($rs->Fields['First_Name']->Value =="") echo " "; else echo $rs->Fields['First_Name']->Value; ?></td>
<td align="center"><?php if ($rs->Fields['Last_Name']->Value =="") echo " "; else echo $rs->Fields['Last_Name']->Value; ?></td>
<td align="center"><?php if ($rs->Fields['City']->Value =="") echo " "; else echo $rs->Fields['City']->Value; ?></td>
<td align="center"><?php if ($rs->Fields['State']->Value =="") echo " "; else echo $rs->Fields['State']->Value; ?></td>
<td align="center"><?php if ($rs->Fields['Zip_Code']->Value =="") echo " "; else echo $rs->Fields['Zip_Code']->Value; ?></td>
<td align="center"><?php if ($rs->Fields['Area_Code']->Value =="") echo " "; else echo $rs->Fields['Area_Code']->Value; ?></td>
<td align="center"><?php if ($rs->Fields['Phone_No']->Value =="") echo " "; else echo $rs->Fields['Phone_No']->Value; ?></td>
<td align="center"><?php if ($rs->Fields['Addr_Line_1']->Value =="") echo " "; else echo $rs->Fields['Addr_Line_1']->Value; ?></td>
<td align="center"><?php if ($rs->Fields['Addr_Line_2']->Value =="") echo " "; else echo $rs->Fields['Addr_Line_2']->Value; ?></td>
<td align="center"><?php if ($rs->Fields['Comment_1']->Value =="") echo " "; else echo $rs->Fields['Comment_1']->Value; ?></td>
<td align="center"><?php if ($rs->Fields['Comment_2']->Value =="") echo " "; else echo $rs->Fields['Comment_2']->Value; ?></td>
</tr>
<?php $rs->MoveNext() ?>
<?php } ?>
</table>
<?php
$rs->Close();
$conn->Close();
$rs = null;
$conn = null;
?>
</div>
</body>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Just out of curiosity:
If you change the action to a php script that merely consists of
<?php infophp(); ?>
do both $_POST["keyword"] and $_POST["submit"] appear in the "PHP variables" section?
If you change the action to a php script that merely consists of
<?php infophp(); ?>
do both $_POST["keyword"] and $_POST["submit"] appear in the "PHP variables" section?
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
if (!isset($_POST["keyword"])
Thanks for the assistance!
Thanks for the assistance!
Your form submits with an Enter press in Firefox 3, Internet Explorer 6 and 7. As the page seems to submit to itself and not react to the POST parameters in any way, it just appears to "reload" when it actually gets re-requested with the POST parameter.