Javascript form validation help
This one is killing me! I have a search box on my site that links to the Atomz search engine. The form has a single field for the search string. I think the name of the input box (sp-q) is causing the problem, but I'm not sure why. The sp-q name is provided by Atomz, so I can't change it. Right now, I never get an alert when I submit an empty search or just hit the submit button with the default text ("Search site") still in the box. If I change the Atomz input name to "spq" -- no hyphen -- suddenly the alert works. Unfortunately, then I can't get the search results from Atomz! Any ideas? I admit I'm not a JavaScript guru.
Here is my code:
<script language="JavaScript">
</script>
Suzanne posted this at 18:05 — 25th June 2004.
She has: 5,507 posts
Joined: Feb 2000
onfocus="select()" value="Search site"Why do you have another if statement in the form code? And an extra return in the onsubmit?
jumpyg posted this at 20:47 — 25th June 2004.
They have: 9 posts
Joined: Nov 2003
Hi Suzanne.
The search box starts off with "Search site" in it. The if statement in the form code:
onfocus="javascript:if(this.value=='Search site') {this.value='';}">'is used so that when a user clicks in the search box, the "Search site" text disappears and they can enter their search. I could do it your way, but I want that text to disappear entirely. That part works okay, and I've had that in there for some time.
I'm not quite sure what you mean by an extra return in the onSubmit. Do you mean that I can have onsubmit="checkData()" instead of onsubmit="return checkData()" ? I did take out the return, but I'm still not getting it to work.
As an experiment, I put an alert in the checkData() function to see if that is executing:
<script language="JavaScript"><!--
function checkData () {
/* make sure search form doesn't contain default text and isn't empty */
var input = document.search_form.sp-q.value;
alert("in checkdata");
if (input == "Search site" || input == "")
{
alert("Please enter a search string.")
input.focus()
return false;
}
/* everything is okay, so return true */
return true;
}
//-->
</script>
When the alert is right after the var input definition, it does NOT bring up the dialog box. However, if I put the alert right before the var input definition, the alert comes up. I'm thinking it does not like the hyphen in the form input name.
Abhishek Reddy posted this at 03:43 — 26th June 2004.
He has: 3,348 posts
Joined: Jul 2001
Can you set an id for the input element? Something like this might work:
var input = document.getElementById("spq").value;...
<input ... id="spq">
Suzanne posted this at 07:21 — 26th June 2004.
She has: 5,507 posts
Joined: Feb 2000
Here's the thing -- Atomz doesn't care about blanks, why should you?
Validate the entry, sure. But if you use the bit I gave you instead of all this, it will automatically remove "Search site" when the field is focussed so you don't get false returns for those words.
jumpyg posted this at 17:02 — 28th June 2004.
They have: 9 posts
Joined: Nov 2003
Thanks for all the help! Abhishek, your advice really helped. Here is the solution I came up with:
<script language="JavaScript"><!--
function checkData ()
/* make sure search form doesn't contain default text and isn't empty */
{
var input = document.getElementById("spq").value;
if (input == "Search site" || input == "")
{
alert("Please enter a search string.");
document.getElementById("spq").focus();
return false;
}
/* everything is okay, so return true */
return true;
}
//-->
</script>
<form method="get" action="http://search.atomz.com/search/"
name="search_form" class="nopad" onsubmit="return checkData()">
<input type="text" value="Search site" size="12" maxlength="100"
name="sp-q" id="spq" class="thin" onfocus="javascript:if(this.value=='Search
site') {this.value='';}">
<input type="image" src="images/go_button.gif" align="top" width="25"
height="20" border="0" alt="Submit Search">
</form>
m3rajk posted this at 20:32 — 30th June 2004.
They have: 461 posts
Joined: Jul 2003
why are you using javascript validation? it is extremely easy to bypasss. and is nothing in the way of security.
if you do it as a precusor to be fast that's ok, but you should have a server side validation before any insertions, not a client side
POSIX. because a stable os that doesn't have memory leaks and isn't buggy is always good.
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.