/    Sign up×
Community /Pin to ProfileBookmark

Apply function when ENTER key is pressed

Hi everyone!
I want to force the script to run a certain function even if user press enter on the input field and not the SUBMIT button.
I’ve tried something and at first it worked like a charm but then, for some reason (perhaps something I did :), it worked only partially – the function runs but it also submit itself regardless if validation check passed or not.

The form:

[CODE]
<form name=”searchForm” method=”get” action=”search.php”>
<p><input type=”text” name=”searchText” id=”searchText” class=”longinput” value=”” onkeypress=”searchKeyPress(event);” /></p>
<p><input type=”button” id=”btnSearch” value=”Go” class=”bfloat” style=”width:35px;” onclick=”validSearchForm();” /></p>
</form>
[/CODE]

[COLOR=”red”]The function I use to check if the ENTER key was pressed:[/COLOR]

[CODE]
function searchKeyPress(e){
if (window.event) {
e = window.event;
}
if (e.keyCode == 13) {
document.getElementById(‘btnSearch’).click();
[COLOR=”DarkGreen”]//which supposed to click the button as if the user did. this actually works but for some reason, it also submits the form regardless validation test passed or not.[/COLOR]
}
}

[/CODE]

[COLOR=”Red”]The function I run onclick and I want to run when ENTER key is pressed:[/COLOR]

[CODE]
function validSearchForm(){
var submitForm = “YES”;
var searchText = document.getElementById(‘searchText’).value;
if (searchText === “”) {
document.getElementById(‘validSearch’).innerHTML = “<strong>Search:</strong> <font color=’red’><i>enter search text</i></font>”;
var submitForm = “NO”;
}
else if (submitForm == “YES”){
document.searchForm.submit();
var submitForm = “”;
}
}
[/CODE]

Appreciate the help!

to post a comment
JavaScript

12 Comments(s)

Copy linkTweet thisAlerts:
@slaughtersOct 01.2009 — Move the 'onclick="validSearchForm();"' out of your button and place it in your form tag as an onsubmit

<form onsubmit="return validSearchForm();"...>

If validSearchForm returns false the form will not submit.
Copy linkTweet thisAlerts:
@liorryauthorOct 01.2009 — Move the 'onclick="validSearchForm();"' out of your button and place it in your form tag as an onsubmit

<form onsubmit="return validSearchForm();"...>

If validSearchForm returns false the form will not submit.[/QUOTE]


If I do so, what will submit the form if user clicks "submit" button? it's just a type="button".

EDIT: tried anyway, didn't work... ENTER key still verifies as it should but submits the form anyway.
Copy linkTweet thisAlerts:
@slaughtersOct 01.2009 — Then your validation function is *not* returning false.

If for some strange reason you have to use the 'button' type instead of the actual submit button, then just make onclick="this.submit()"

(never can remember if you need the brackets or not)
Copy linkTweet thisAlerts:
@dch3Oct 01.2009 — I always a window.alert('Ding'); to any function in situations like this to ensure that the function is actually being called.
Copy linkTweet thisAlerts:
@liorryauthorOct 01.2009 — I always a window.alert('Ding'); to any function in situations like this to ensure that the function is actually being called.[/QUOTE]

heh I use alert as well. anyway, as said on my first post - the functions is called and it works when I click the button and also when I press ENTER key.

the only problem is that when I press ENTER key it still submits the form after it fails the validation ?

the onclick works fine.
Copy linkTweet thisAlerts:
@dch3Oct 01.2009 — heh I use alert as well. anyway, as said on my first post - the functions is called and it works when I click the button and also when I press ENTER key.

the only problem is that when I press ENTER key it still submits the form after it fails the validation ?

the onclick works fine.[/QUOTE]


Do you get the window.alert when you hit the ENTER key?
Copy linkTweet thisAlerts:
@liorryauthorOct 01.2009 — Yes.. it is :
Copy linkTweet thisAlerts:
@dch3Oct 01.2009 — My client-side is a bit rusty, but try using the version of the code that I posted below.

1) You had a if that had 3 equals as in if(searchText ===

2) True/false or -1/0 are the preferred methods indicating a yes/no.

3) The readability of the original code wasn't as clear as it could have been. If you had taken a pessimistic approach setting submitForm = 0 then the else if could have been replaced with a simple 'if' which would have made the code easier to read.

4) By testing for .length > 0 that should catch any problems if the element wasn't found.

[Code]
function validSearchForm(){
var searchText = document.getElementById('searchText').value;

if (searchText.length > 0) {
return -1;
}
else
{
document.getElementById('validSearch').innerHTML =
"<strong>Search:</strong> <font color='red'><i>enter
search text</i></font>";
return 0;
}

}
[/Code]


If you're still having problems, the problem is most likely with the onsubmit="return validSearchForm();" in the form tag. Change it onsubmit="validSearchForm();"

But again my client side is rusty. The function above will work though.

That being said if you're submitting the form to a page that hits a database, read up on SQL Server Injection attacks.
Copy linkTweet thisAlerts:
@liorryauthorOct 01.2009 — Thank you! will try it asap and let you know!
Copy linkTweet thisAlerts:
@liorryauthorOct 02.2009 — Well.. it didn't work... not with return function() and not with just function. it did however stopped the function from being fired ?

I'll keep trying, I have like 2 hours before I send this to my school...

Thank you for your help!
Copy linkTweet thisAlerts:
@dch3Oct 02.2009 — Well, if I had known that this was school related I wouldn't have tried to help given that a part of learning is on your own research.

Did it at least make sense how I trimmed down the code to be easier to read?
Copy linkTweet thisAlerts:
@liorryauthorOct 02.2009 — Well, if I had known that this was school related I wouldn't have tried to help given that a part of learning is on your own research.

Did it at least make sense how I trimmed down the code to be easier to read?[/QUOTE]


don't be funny :-) I come here only after searching google for couple of hours as my last resort. I enjoy the research very mucj, trust me. And it's not school , i'm 25 umm it's more like a diploma... I know what you wrote as i have many scripts i've written that way, but this time nothing worked for some reason so i tried different, more simple yet stupid way.

Anyway, i greatly appreciate all your help :-)
×

Success!

Help @liorry spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.15,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...