Question

我有一个隐藏提交按钮的表单，直到做出选择。如果选择无效（即缺货商品或产品不可用），则不会显示提交按钮。

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根据#choice下拉列表选择进行更改，从JSON对象中获取值。

我担心的是，如果选择无效，则提交按钮不存在，用户可以进入qty字段，按回车键，即使没有提交按钮也会提交。

如何在特定情况下最好在返回时禁用表单提交？如果项目有效，我想在输入时表示提交，但如果不是，我不希望该选项可用。

Answer 1

我建议从可见/不可见更改为启用/禁用，但当然，这不是UX。

<form>为<form onsubmit="checkState()" ...other attributes...> ...form elements... </form>提供了onsubmit。

示例：

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

你的JavaScript将包含一个函数：

appearButton

我刚刚复制了相同的逻辑并且如果不应该提交表单则返回false。然后，您可以重写checkState以从function appearButton() { if (!checkState()) $("#cartbutton").html('<input type="submit" value="Add to Cart"/>'); else $("#cartbutton").text(""); }（DRY）：

运行

{{1}}

按＆＃39;输入＆＃39;禁用表单完成

1 个答案: