One form, two submit buttons with no defalt

[Boot Straps]

A simlpe from mostly,

<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,

[paul_wilkins]

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.

<form action="do_someing.php" method="POST" onsubmit="return preventDefaultSubmit(event)">

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.

<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:

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.

<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>

[Pepejeria]

target is not supported in IE. You need to do the following

var target = evt.target || evt.srcElement;

[Boot Straps]

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,

[paul_wilkins]

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.

[Boot Straps]

Kool, is there a link that shows more of the code for keys?

Thanks,

[paul_wilkins]

Google is your friend. Google knows all.

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