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 gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Default Enter key and submit button 1

Status
Not open for further replies.

11251995

Programmer
May 18, 2005
12
US
Hi, I have a form which has a hidden action named 'Update'. Within the form, I allow user to hit Enter key to do a search/add or validation for a couple of fields. There is also a submit button called 'Update'.
Right now the behavior is whenever user hit the enter key, it did some work and then do the Update. But my goal is the Enter key can let user do whatever they want to do but only do Update when user click this Update button.

How can I handle this? Appreciate ahead!!
 
In order to prevent the submit button from having the default enter key behavior, change it to a regular button and call the submit from the onclick handler using javascript:
Code:
<input type="button" value="submit" onclick="this.form.submit()">

-kaht

...looks like you don't have a job, so why don't you get out there and feed Tina.
headbang.gif
[rockband]
headbang.gif
 
Hi, I changed the code as following:

<form action="Maint" method="POST" onSubmit="return ValidateData();" name="fMaint">
<input type="hidden" name="action" value="Update">
...

<input type="hidden" name="Button">
<input type="button" value="Update" onclick="setButton()">
...
</form>

<SCRIPT language="Javascript">
function setButton() {
document.fMaint.Button.value="Submit Button";
document.fMaint.submit();
}
</SCRIPT>

The Update button now worked, however all the Entry key for others fields are not working any more. Why and how should I do next?

Thanks a lot.
 
This is how to salvage your lines. Change this line:
>[tt]<form action="Maint" method="POST" onSubmit="return ValidateData();" name="fMaint">[/tt]
to
[tt]<form action="Maint" method="POST" name="fMaint">[/tt]

Then, if you want to keep the same of this line
[tt]<input type="button" value="Update" onclick="setButton()">[/tt]
you have to change the setButton function to this.
[tt]function setButton() {
document.fMaint.Button.value="Submit Button";
if (validateDate()} document.fMaint.submit();
}
[/tt]
Now it boils down to your correct construction of validateDate() function. It must return true for valid data and return false for invalid data. This is the biggest chance that you come back by saying it does not work if you do not do that.

There are many variations to make thing correct. The above is just one. In any case yours is a wrong one.
 
Hi tsuji, Fisrt thank you for your reply.

My current problem is the Enter Keys do not work, not the real Update button, because when I hit Enter key in certain field, nothing hsppen. Or let me ask you in this way.

I have a form which need a Update button to update this page, wiithin this form, there are 2 texefields which allow user type sth and hit enter key, and this should not sumbit form and do Update, instead, it search sth based on user input and show the search result, user can select one result and it will be add to the page. We only Update the page when user click the UPDATE button.

Sigh :(
 
I don't know... it seems the question/problem is a moving target.

On the face value of your last post, I can suggest you can simply make a sometimes annoying feature into a useful one. Wrap the textbox in a independent form (don't put it inside an existing form, forms do not nest). The enter key will auto submit that one element form. But, now you stop the submit from the handler. It returns false, but at the same time at all sort of time for you before return. What sort of thing you want it to do depends on your specific needs. For instance by off-hand construction, like this.
[tt]
<html>
<head>
<script language="javascript">
function handler(obj) {
var s=escape(obj.srch.value);
window.open("}
</script>
</head>
<body>
<form onsubmit="handler(this);return false;">
search string for google:&nbsp;<input type="text" name="srch" />
</form>
</body>
</html>
[/tt]
Do the same for each one of the two textbox.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top