2016-06-14 146 views
0

我有一个形式,这样我的Javascript代码:形式不提交

var btnSubmit = document.getElementById("submit"); 
 
btnSubmit.addEventListener("click", sending); 
 

 
function sending() { 
 
    btnSubmit.disabled = true; 
 
    btnSubmit.value = "Sending..."; 
 
    btnSubmit.form.submit(); //<----- this doesn't do anything!!! 
 
}
<form id="form_save" action="/ValidatePicsServlet" method="post"> 
 
    <!-- more inputs --> 
 
    <button id="submit" type="button">Save changes</button> 
 
</form>

正如你所看到的,最后一行没有做任何事情,并且数据未提交。

我在哪里错了?

编辑:我很抱歉!我错误地复制了代码。 eventListener实际上称为发送函数,这是正确的。我很尴尬......

+1

你函数名应该是“发送” –

+1

给按钮的ID *提交*可能掩盖表单提交方法(的名字*提交*肯定不会),所以它可以”不要叫。表单可以在不点击按钮的情况下提交,因此将侦听器放在表单的提交处理程序上,更改按钮以键入提交并删除ID。 – RobG

+0

@Xufox,这是我的一个错误...修正了,但它并没有影响我想要重演的内容:( – Ommadawn

回答

0

这是因为form.submit被您在表单内创建的submit元素所覆盖。 只需更改您的按钮的ID,它的工作就像一个魅力。

var btnSubmit = document.getElementById("submit-button"); 
 
btnSubmit.addEventListener("click", sending); 
 

 
function sending() { 
 
    btnSubmit.disabled = true; 
 
    btnSubmit.value = "Sending..."; 
 
    btnSubmit.form.submit(); 
 
}
<form id="form_save" action="/ValidatePicsServlet" method="post"> 
 
    <!-- more inputs --> 
 
    <button id="submit-button" type="button">Save changes</button> 
 
</form>

+0

非常感谢,@威廉克莱恩,就是这样!:) – Ommadawn

-2

尝试添加“提交”类型到您的表单按钮。

<input type="submit" id="submit" value="Submit"> 
+1

@ Xufox-但OP有'type =“button”',所以它不是提交按钮。 – RobG