jasonc Posted June 20, 2011 Share Posted June 20, 2011 I have a search query text field and wish to prevent anyone from searching for less that 3 characters in length. I have got this code from some site but could not change it to prevent less then three characters being searched. What is the best way to do this without having to have them submit and then be told, but have them told via javascript before they submit. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title></title> <script type="text/javascript"> // <![CDATA[ function Minimum(obj,min){ if (obj.value.length<min) alert('min of '+min); } else { document.form1.searchButton.disabled=false; } // ]]> </script> </head> <body> <form method="post" action="" name="form_2"> <p> <input type="text" name="box1" size="30" onkeypress="Minimum(this,4);" /> <input type="submit" value="Submit" name="Button" disabled="disabled" /> </p> </form> </body> </html> Quote Link to comment https://forums.phpfreaks.com/topic/239871-unable-to-get-code-find-if-min-chars-entered/ Share on other sites More sharing options...
Adam Posted June 20, 2011 Share Posted June 20, 2011 When you say "without having to have them submit and then be told" - I assume you mean on the next request? Not actually as they click the submit button? A really easy solution is to just display an alert() when they submit the form having entered less than 3 characters: <script type="text/javascript"> window.onload = function() { document.search_form.onsubmit = function() { var query = document.search_form.query.value; if (query.length < 3) { alert('Please enter a search query more than 3 characters.'); return false; } } } </script> <form method="get" name="search_form" action=""> Search for: <input type="text" name="query" /> <input type="submit" value="Search" /> </form> If you use this code, remember to modify the form and input names within the JS to match your form's mark-up. Edit: Also you should add the window.onload block to within your <head>, and obviously the form in <body>. If you already have an event assigned to the onload of the window, you need to merge the two as you can't have more than one. Quote Link to comment https://forums.phpfreaks.com/topic/239871-unable-to-get-code-find-if-min-chars-entered/#findComment-1232138 Share on other sites More sharing options...
jasonc Posted June 20, 2011 Author Share Posted June 20, 2011 Hey, thanks for that, works a dream. Also thanks for the 'edit' on the multiple onload. I will keep that in mind. Quote Link to comment https://forums.phpfreaks.com/topic/239871-unable-to-get-code-find-if-min-chars-entered/#findComment-1232346 Share on other sites More sharing options...
jasonc Posted June 21, 2011 Author Share Posted June 21, 2011 ah just found out that this works but it doesn't ! It prevents all other submit buttons from being click, the search submit button is not the only submit button on my page! What do I change in this code so it is secific to just one button being click that a check is done on a secific text file that it contains three or more characters, before it is sent. window.onload = function() { document.form1.onsubmit = function() { var query = document.form1.query.value; if (query.length < 3) { alert('Please enter a search query more than 3 characters.'); return false; } } } Quote Link to comment https://forums.phpfreaks.com/topic/239871-unable-to-get-code-find-if-min-chars-entered/#findComment-1232637 Share on other sites More sharing options...
Adam Posted June 21, 2011 Share Posted June 21, 2011 The event in your code is only bound to the form named "form1". The event shouldn't be getting triggered for other forms. Going back to the original example I provided, add the the following form on to the end. You'll see that when you run it the submission works fine. <form method="get" name="other_form" action=""> Other form value: <input type="text" name="value" /> <input type="submit" value="Submit" /> </form> If you are having troubles I would probably guess that the problem is either with multiple forms named the same ("form1"), or the mark-up isn't correctly closing each form. That in effect would make it all part of form1 (assuming it came first). Can you post the HTML? Quote Link to comment https://forums.phpfreaks.com/topic/239871-unable-to-get-code-find-if-min-chars-entered/#findComment-1232671 Share on other sites More sharing options...
jasonc Posted July 3, 2011 Author Share Posted July 3, 2011 After gettingthis to work I found that even if a user tries to enter fewer than the required number of characters the form still submits on pressing the enter and then closing the alter box. How do I prevent the form from being sent until they have or more than the required number in the search field ? My JS file function Minimum() { if (document.searchform.query.value.length < 3) { alert('Please enter a search query more than 3 characters.'); return false; } } My HTML <form name="searchform" action="cart.php" method="post"> <input title="Search" name="query" type="text" size="12" /><br /><input name="searchButton" type="submit" value="search" onclick="JavaScript:Minimum();" /> </form> Quote Link to comment https://forums.phpfreaks.com/topic/239871-unable-to-get-code-find-if-min-chars-entered/#findComment-1237904 Share on other sites More sharing options...
.josh Posted July 3, 2011 Share Posted July 3, 2011 onclick="return Minimum();" Quote Link to comment https://forums.phpfreaks.com/topic/239871-unable-to-get-code-find-if-min-chars-entered/#findComment-1237908 Share on other sites More sharing options...
jasonc Posted July 3, 2011 Author Share Posted July 3, 2011 ah thank you, that solved it. cheers Quote Link to comment https://forums.phpfreaks.com/topic/239871-unable-to-get-code-find-if-min-chars-entered/#findComment-1237909 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.