SitePoint Sponsor |
|
User Tag List
Results 1 to 7 of 7
Hybrid View
-
Jan 8, 2008, 11:23 #1
- Join Date
- Aug 2005
- Location
- In the flat lands of Montana(USA)
- Posts
- 89
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
One form, two submit buttons with no defalt
A simlpe from mostly,
HTML Code:<form action="do_someing.php" method="POST"> <label>Search by Zip code or Name</label> <input name="textfield" type="text" size="50" maxlength="50" /> <input type="submit" name="zip_code" value="Zip code" /> <input type="submit" name="name" value="Name" /> </form>
How can I take the defalt button and not have it defalt so the user must click name or zip code to submit the form.
Thanks,Boot Straps
-
Jan 8, 2008, 15:22 #2
- Join Date
- Jan 2007
- Location
- Christchurch, New Zealand
- Posts
- 14,729
- Mentioned
- 104 Post(s)
- Tagged
- 4 Thread(s)
Use a better form design with option buttons to force a valid choice between zipcode and name. That's the best solution.
If you insist on the existing form design though (subtle hint) you could use the onsubmit event to prevent the default submit action and then check the element that the event came from, with something like this.
Code HTML4Strict:<form action="do_someing.php" method="POST" onsubmit="return preventDefaultSubmit(event)">
Code Javascript:function preventDefaultSubmit(evt) { evt = (evt) ? evt : ((window.event) ? window.event : ""); if (evt) { var elem = (evt.target) ? evt.target : evt.srcElement; if (elem.nodeName.toLowerCase() == 'form') { return true; } } return false; }
The only trouble is that Internet Explorer always says that the form was the target.
We're going to have to scratch that idea and use more hidious techniques.
Let us instead capture every single keystroke to the input form and prevent the enter key from being accepted.
Code HTML4Strict:<form action="test.htm" method="POST"> <label>Search by Zip code or Name</label> <input name="textfield" type="text" size="50" maxlength="50" onkeydown="return cancelEnter(event)" /> <input type="submit" name="zip_code" value="Zip code" /> <input type="submit" name="name" value="Name" /> </form>
The script for this is as follows:
Code Javascript:function cancelEnter(evt) { evt = (evt) ? evt : ((window.event) ? window.event : ""); if (evt) { if (evt.keyCode == 13) { return false; } } return true; }
So that works, but it could have all been avoided by using a better form design.
Code HTML4Strict:<form action="test.htm" method="POST"> <label>Search by Zip code or Name</label> <input name="textfield" type="text" size="50" maxlength="50" onkeydown="return cancelEnter(event)" /> <input type="radio" name="search_type" id="search_zip_code" value="zip_code" /> <label for="search_zip_code">Zip Code</label> <input type="radio" name="search_type" id="search_name" value="name" /> <label for="search_name">Name</label> <input type="submit" name="search" value="Search" /> </form>
Last edited by paul_wilkins; Jan 8, 2008 at 16:38.
-
Jan 8, 2008, 15:37 #3
- Join Date
- Jan 2005
- Location
- Too far up north
- Posts
- 1,566
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
target is not supported in IE. You need to do the following
Code:var target = evt.target || evt.srcElement;
-
Jan 9, 2008, 08:06 #4
- Join Date
- Aug 2005
- Location
- In the flat lands of Montana(USA)
- Posts
- 89
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
pmw57,
Thanks for imput. Does the 13 in here, the enter key?
if (evt.keyCode == 13) { return false; }
Thanks,Boot Straps
-
Jan 9, 2008, 08:19 #5
- Join Date
- Jan 2007
- Location
- Christchurch, New Zealand
- Posts
- 14,729
- Mentioned
- 104 Post(s)
- Tagged
- 4 Thread(s)
Yes, 13 is the code for the enter key.
I'm glad that you've decided to update the form design instead. Not only does it make for easier maintenance, but both the server and the client are easily able to verify that one of the options has been chosen before allowing the form to be accepted.
-
Jan 9, 2008, 18:27 #6
- Join Date
- Aug 2005
- Location
- In the flat lands of Montana(USA)
- Posts
- 89
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Kool, is there a link that shows more of the code for keys?
Thanks,Last edited by Boot Straps; Jan 9, 2008 at 18:27. Reason: cant spell lol
Boot Straps
-
Jan 9, 2008, 18:52 #7
- Join Date
- Jan 2007
- Location
- Christchurch, New Zealand
- Posts
- 14,729
- Mentioned
- 104 Post(s)
- Tagged
- 4 Thread(s)
Google is your friend. Google knows all.
http://www.google.com/search?q=javascript+keycode
Bookmarks