Question

这是我的代码。

HTML

<form id="add_new_video" method="post" class="appnitro" style="margin-left:70px;" action="<?php echo base_url()?>videos/save">
<input type="text" name="name">
<button type="submit" class="dark_text_link" disabled id="submit" href="javascript:void(0);" onclick="return addVideo();">Add New Video</button>
</form>

JS就是

function addVideo() {
    //disables the onclick event of the element for 1 seconds
    document.getElementById('submit').disabled = true;
    setTimeout(function(){document.getElementById('submit').disabled = false;},1000);
    document.getElementById('add_new_video').submit();
}

当我单击“提交”按钮时，该按钮会被禁用一秒钟并重新显示，但表单未提交。我仍然是javascript的新手所以可能会有一些我忽略的事情。有什么想法吗？

Answer 1

有几件事

永远不要使用保留字＆＃34;提交＆＃34;在表单元素的名称或ID中 - 它将隐藏JavaScript中的提交事件处理程序
使用onsubmit禁用按钮，而不是使用奇怪的内联处理程序。例如，按钮上没有href
您不应禁用在点击之前需要点击的按钮

像这样：

<form id="add_new_video" method="post" class="appnitro" style="margin-left:70px;" action="<?php echo base_url()?>videos/save">
   <input type="text" name="name">
   <button type="submit" id="buttonSub" class="dark_text_link">Add New Video</button>
 </form>

window.onload=function() {
  document.getElementById("add_new_video").onsubmit=function() {
    document.getElementById('buttonSub').disabled = true;
    setTimeout(function(){document.getElementById('buttonSub').disabled = false;},1000);
  }        
}

由于您提交到同一页面，因此您实际上不需要再次启用表单按钮。页面重新加载时将启用该按钮 - 如果您将表单定位到其他地方

Answer 2

用此标记元素替换按钮。

<input type="submit" class="dark_text_link" disabled id="btnsubmit" href="javascript:void(0);" onclick="return addVideo();"/>

Javascript submit（）没有提交表单

2 个答案: