如何在单击后禁用表单提交图像

How to Disable a Form Submit Image after being clicked?

本文关键字：表单提交 图像 单击      更新时间：2023-09-26

我正在尝试禁用表单提交按钮，该按钮是单击后的图像，以防止重复条目。表格进入Netsuite，这是一个ERP/CRM，通常很慢，所以我们一直让用户多次点击它，导致多个条目，这就是为什么我们希望在用户点击后禁用它。

这是我们目前使用的代码：

<INPUT TYPE="hidden" NAME="payment" VALUE="check" ##check## checked>
<br>
<INPUT type="image" onMouseOver="this.src='http://www.domain.com/pb/tpl/img/emailquote3.jpg'; return false;" 
onMouseOut="this.src='http://www.domain.com/pb/tpl/img/emailquote2.jpg'; return false;" 
src="http://www.domain.com/pb/tpl/img/emailquote2.jpg" VALUE="order" 
NAME="order" id="order" class="button" onclick="this.form.action='https://forms.netsuite.com/app/site/hosting/scriptlet.nl?script=1&deploy=1&compid=xxxxxx&h=xxxxxxxxxxxx';return true;">

我四处搜索并阅读了一些建议，大多数人都说要将其添加到onclick区域：

this.disabled=true

然而，将该代码添加到onclick中似乎并不起作用。我试着在netsuite提交部分之前和之后添加它，但似乎没有什么不同。

有人知道我该怎么做吗？

this.disabled=true将不适用于输入[type=images]。这必须用javascript处理。

<input type="image" onclick="return submitForm(this)"/>
<scritp>
var submitted = 0;
function submitForm(input){
   input.src = "new image path";
   if (submitted == 0) {
       submitted = 1;
       return true;
   }
   return false
}
</script>

实际上disabled=true不会阻止元素触发onclick事件。相反，您可以使用javascript函数来执行提交指令，并在第一次执行后用变量锁定它。

类似这样的东西：

var submitEnabled = true;
function Submit() {
    if(submitEnabled) {
        submitEnabled = false;
        this.form.action='https://forms.netsuite.com/app/site/hosting/scriptlet.nl?script=1&deploy=1&compid=xxxxxx&h=xxxxxxxxxxxx';
        //Or any submitting code you have
    }
}

然后，你的图像元素：

<INPUT type="image" onclick="Submit()" ...

我做了一个快速测试，看起来如果禁用按钮onclick，表单将永远不会提交。我不确定你是否有能力更改<form>标签，但如果你这样做了，你可以添加一个onsubmit事件，在表单提交后禁用提交按钮：

<form action="https://forms.netsuite.com/app/site/hosting/scriptlet.nl?script=1&deploy=1&compid=xxxxxx&h=xxxxxxxxxxxx" onsubmit="document.getElementById('order').disabled=true;">
    <input type="hidden" name="payment" value="check" checked>
    <br>
    <input type="image" onmouseover="this.src='http://www.domain.com/pb/tpl/img/emailquote3.jpg'; return false;" onmouseout="this.src='http://www.domain.com/pb/tpl/img/emailquote2.jpg'; return false;" src="http://www.domain.com/pb/tpl/img/emailquote2.jpg" value="order"name="order" id="order" class="button">
</form>

如果你有能力添加自己的CSS和JavaScript，你可以清理得更多。

  1. CSS会更好地处理滚动图像
  2. 简单地禁用提交按钮并不一定意味着表单不能提交。例如，您可以通过敲击键盘上的回车键来提交表格。最好防止提交事件本身，而不是禁用可能使用或不使用的按钮

示例：

<style>
    #order {
        background: url('http://www.domain.com/pb/tpl/img/emailquote2.jpg') no-repeat;
        width: 300px; /* sizing for example only */
        height: 100px;
        border: none;
    }
    #order:hover {
        background: url('http://www.domain.com/pb/tpl/img/emailquote3.jpg') no-repeat;
    }
</style>
<script>
    var formSubmitted = false;
    function handleSubmit() {
        if (!formSubmitted) {
            formSubmitted = true;
            return false;
        }
        return false;
    }
</script>
<form action="https://forms.netsuite.com/app/site/hosting/scriptlet.nl?script=1&deploy=1&compid=xxxxxx&h=xxxxxxxxxxxx" onsubmit="return handleSubmit();">
    <input type="hidden" name="payment" value="check" checked>
    <br>
    <input type="submit" name="order" id="order" class="button">
</form>
相关文章：