CODEWITHSUNDEEP
javascripthtml
LT999
LT999

Reputation: 47

Submitting form using button on enter

I have an html form that I want to only submit from a button located outside my form. I am using javascript to perform some verification and do not want the form to submit unless my javascript functions succeed. I found that if I have the button inside the form it will always submit regardless of the javascript, but if I have it outside the form when a user presses enter it simply submits the form. How can I force enter to perform the button javascript instead of submitting?

<form name="form1" action=<?$_SERVER["PHP_SELF"].'?'.$_SERVER["QUERY_STRING"]?> method="post">

<input type="text" maxlength="5" size="5" name="frmZip" value="">

<input type="hidden" name="frmLat" value="200">
<input type="hidden" name="frmLng" value="200">

<input type="submit" disabled="disabled" style="display:none" />
</form>
<button type="button" id="GetCoordinates" onclick="doClick();">Find Stores</button>

EDIT: Found my solution. I changed from

</form>
<button type="button" id="GetCoordinates" onclick="doClick();">Find Stores</button>

to

<input type="button" name="frmSubmit" onclick="doClick();" value="Submit">
</form>

This prevented the button from submitting the form so I submitted it in my doClick() via javascript.

EDIT 2: While this seemed to work for a time, it has stopped catching the enter keystroke. I updated my button to:

<input type="submit" name="frmSubmit" onclick="return doClick();" value="Find Stores">

And always returned false in doClick(). This allowed me to submit the form via javascript once everything had executed.

Upvotes: 1

Views: 643

Answers (2)

Justin Self
Justin Self

Reputation: 6265

While this doesn't answer your direct question, you can actually keep the button and simply use your validation on the form submit:

<form onsubmit="return validateForm()">

Then, in your validateForm method, return true or false indicating whether or not the validation has passed.

However to answer your direct question, you can also use the same approach on the submit button which will prevent the form from being submitted.

Update

As pointed out in the comments, an unontrusive solution is often desirable so here's that:

document.getElementById('theForm').onsubmit = function() { return validateForm(); };

Upvotes: 2

Alex Grande
Alex Grande

Reputation: 8027

Your button inside the form will not submit the form on enter if you add preventDefault...

$("form").submit(function(e) {e.preventDefault();});

Upvotes: 0

Related Questions