Disable form complete by pressing 'enter'

Question

I have a form that hides the submit button until a selection is made. If the selection is invalid (ie. out of stock item, or product unavailable), it won't display the submit button.

HTML/PHP:

<select id="choice" name="conc" required="required" onChange="appearButton();">
    <option selected="selected" value="" disabled="disabled">select an option</option>
    <option value="0">choice</option>
</select> 
Qty: <input type="text" size="2" maxlength="2" value="1" name="qty" required="required"/><br/>
<span id="availability">Select Option to see Stock Availability</span><br/> <?php
//SQL related to checking if stock is avail. or not would go here
if ($checkstock->rowCount() == 0) {
    echo "This item is currently unavailable.";
} else {
    echo '<span id="cartbutton"></span>';
} ?>

JS:

function appearButton() {
    if (($("#availability").text() != "Out of Stock")
    && ($("#availability").text() != "Select Options to see Stock Availability")) {
        $("#cartbutton").html('<input type="submit" value="Add to Cart"/>');
    } else {
        $("#cartbutton").text("");
    }
}

#availability changes depending on #choice dropdown selection, grabs a value from a JSON object.

My concern is that despite a submit button being nonexistent if the selection is invalid, a user can go into the qty field, press enter, and it will submit despite no submit button.

How best to disable form submission on return in specific instances? I want to form submit on enter if the item is valid, but if it isn't I don't want the option to be available.

I always remove the form element altogether (for bots), remove all `name` attributes, assign `id`s, and then map the `id`s to different `name`s for submission via ajax. Then for the submit, I use a button of `type="button"`. — , Jul 18 '14 at 01:35
Why do you allow users to select an invalid option at all (don't put options with invalid values in the form)? Validation should occur when the form is submitted, not before. — RobG, Jul 18 '14 at 02:09
@RobG, I've omitted some superfluous code, but the gist is that I have two dropdowns, with any given combination correlating to a stock level. I can't disable form options because not every permutation involving a specific option will be out of stock. I poll a JSON object with all stock levels of given combinations, some of which may or may not be out of stock (thus hiding the submit button). — gator, Jul 18 '14 at 02:25

score 3 · Accepted Answer · edited Apr 13 '17 at 12:32

I'd recommend changing from visible/invisible to enabled/disabled, but of course, this isn't UX.

What you'll want to look at is onsubmit for the <form>.

Example:

<form onsubmit="checkState()" ...other attributes...>
    ...form elements...
</form>

And your JavaScript would include a function:

function checkState() {
    if (($("#availability").text() == "Out of Stock") || ($("#availability").text() == "Select Options to see Stock Availability"))
        return false;
    return true;
}

I just copied the same logic over and made it return false if the form should not be submitted. You can then rewrite your appearButton to run from checkState (DRY):

function appearButton() {
    if (!checkState())
        $("#cartbutton").html('<input type="submit" value="Add to Cart"/>');
    else
        $("#cartbutton").text("");
}

Disable form complete by pressing 'enter'

1 Answers1