Question

我正在尝试提出一个奇怪的要求。我还将提供一些反向信息。首先是问题。

我想禁用一个按钮，直到字段被填满并单击另一个按钮。我希望用户将数据输入到表单中，然后单击“保存”以解析数据。我必须这样做的原因是因为我正在与机器人通信，并且这需要做到这一点。我基本上需要发送2个链接到机器人，以使其工作。话虽如此，我有一个onchange链接和一个按钮。我尝试使用onblur来避免保存链接，但是它发生的时间太快，机器人无法处理。

这是我的代码...

<div class="form">
    <form id="pnform" name="pnform" language=javascript>
        <input type="text" class="form-control-lg" id="pname" placeholder="Enter Part Name" onchange="return pname_onchange()"  style="width:375px; height:50px">
    </form>
    <!--Parse Data To Robot On Form Change-->
    <script>
        function pname_onchange() {
            str = '/KCLDO/set%20var%20[hmi]Part_Name=' + "'" + document.pnform.pname.value + "'"   ;
            //alert(str);
            window.location.href = str  ;
        }
        function parseData() {
            str = '/KARELCMD/HMI';
            //alert(str);
            window.location.href = str;
        }
    </script>
    <!--End Parse-->
</div>
<br />
<a href="/KARELCMD/HMI">
    <button type="button" class="btn btn-secondary btn-lg pt-4 pb-4 pr-5 pl-5 mb-3 mr-2">
        <h1>Save</h1>
    </button>
</a>
<a href="/fr/p_type.htm">
    <button type="submit" class="btn btn-secondary btn-lg pt-4 pb-4 pr-2 pl-2 mb-3 ml-2">
        <h1>Continue</h1>
    </button>
</a>

有人可以提供建议吗？我希望禁用“继续”按钮，直到用户填写表格并单击“保存”按钮。

谢谢。

Answer 1

只需将ID添加到您的“继续”按钮，然后将disabled属性设置为以以下开头：

<a href="/fr/p_type.htm"><button id="continue" type="submit" class="btn btn-secondary btn-lg pt-4 pb-4 pr-2 pl-2 mb-3 ml-2" disabled><h1>Continue</h1></button></a>

然后将事件侦听器添加到“保存”按钮：

 <a href="/KARELCMD/HMI" onclick="continueButton()"><button type="button" class="btn btn-secondary btn-lg pt-4 pb-4 pr-5 pl-5 mb-3 mr-2"><h1>Save</h1></button></a>

然后执行此功能：

function continueButton() {
    if (document.getElementById("pname").value != "") {
        document.getElementById("continue").removeAttribute("disabled");
    }
}

现在应该可以了！

希望这会有所帮助！

如何禁用引导按钮，直到输入被填充并单击按钮？

1 个答案: