SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast Boot Straps's Avatar
    Join Date
    Aug 2005
    Location
    In the flat lands of Montana(USA)
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation 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>
    I want to have two submit buttons in this form. The problem is the frist button is the defalt one, so if the user types something the textfeild and hits Enter the form will submit to(in this case) the zip_code button.

    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

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 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.

  3. #3
    SitePoint Wizard Pepejeria's Avatar
    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;

  4. #4
    SitePoint Enthusiast Boot Straps's Avatar
    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; }
    The Radio's look's like a better choice.

    Thanks,
    Boot Straps

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 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.

  6. #6
    SitePoint Enthusiast Boot Straps's Avatar
    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

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Google is your friend. Google knows all.

    http://www.google.com/search?q=javascript+keycode


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •