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

Question

我试图在单击后禁用表单提交按钮，以防止重复输入。表单是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提交部分之前和之后添加它，但似乎没有什么区别。

有谁知道如何才能让它发挥作用？

Answer 1

this.disabled = true将不适用于输入[type = image]。 这必须在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>

Answer 2

实际上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()" ...

Answer 3

我做了一个快速测试，看起来如果您禁用按钮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>