2011-06-09 21 views
10

那么有人可以告诉为什么这些选项都不会实际提交表单吗?我试图做一些更复杂,但我已经熬下来到这,试图弄清楚为什么我似乎无法得到这种形式使用点击事件提交并提交()使用jquery点击事件提交表单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
<script type="text/javascript"> 
$(function() { 
    $('#submitButton').click(function(e) { 
     e.preventDefault(); 
     $("#testForm").submit(); 
    }); 

    $('#submitLink').click(function(e) { 
     e.preventDefault(); 
     $("#testForm").submit(); 
    }); 
}); 
</script> 
</head> 

<body> 
<form action="javascript:alert('submitted');" method="post" id="testForm"> 
    <label>Name</label> 
    <input type="text" name="name" value="" /> 
    <input type="submit" name="submit" value="Submit" id="submitButton" /> 
    <p><a href="#" id="submitLink">Submit Form</a></p> 
</form> 

</body> 
</html> 

谢谢!

回答

5

如果您有一个表单操作和一个输入类型=在表单标签中提交,它将提交旧式的方式并基本刷新页面。在进行AJAX类型的交易时,这不是预期的效果。

删除操作。或者完全删除表单,尽管它可以方便地序列化以减少工作量。如果表单标签保持不变,则将按钮移动到表单标签之外,或者使其成为与onclick或click处理程序的链接,而不是输入按钮。 Jquery UI Buttons在这种情况下效果很好,因为您可以使用标签元素来模拟输入按钮。

+0

的动作就是我使用测试,看看是否形式提交,这是不是。在我的实际代码中,我没有做AJAX类型的事务,我将表单提交给服务器并使用php进行处理。但在处理之前,我正在使用Facebook API来查看用户是否也想将他们的帖子提交到他们的facebook墙上。所以,实际上,我需要在提交之前给他们时间做出回应。以上两个例子的奇怪之处在于,没有人真正提交过对我来说毫无意义的表格。 – MatthewLee 2011-06-09 21:36:54

+0

我可以想象,在提交表单之前在服务器端执行Facebook检查会更容易,如果所需操作未提交,则返回false。 – bpeterson76 2011-06-09 21:39:52

+0

好的,现在我明白了,表单标签中的提交按钮正在打破它的两个选项。当我删除提交按钮时,链接按预期工作。感谢bpetersen! – MatthewLee 2011-06-09 21:40:58

2

你需要将表单发布到URL还是只需要检测提交事件?因为你可以通过添加onsubmit="javascript:alert('I do also submit');"

<form action="javascript:alert('submitted');" method="post" id="testForm" onsubmit="javascript:alert('I do also submit');">...</form> 

不知道,这是你在找什么,虽然检测提交事件。

+1

感谢亨利克的想法,但我确实想提交表格 – MatthewLee 2011-06-09 21:39:34

10

这是因为提交按钮的名称被命名为“submit”,将其更改为除“submit”之外的任何内容,请尝试“submitme”并重试它。它应该然后工作。

+0

优秀和纯粹的答案。大!!!谢谢。 – 23W 2014-08-15 07:00:54

+1

等等,什么?为什么?...编辑:[这是为什么](http://stackoverflow.com/questions/3571328/form-submit-button-will-not-submit-when-name-of-button-is-submit)。谢谢! – Sam 2016-12-07 20:49:22

8

为什么不简单地使用提交按钮来运行你想要的代码。如果你的函数返回false,它将取消提交。

$("#testForm").submit(function() { 
    /* Do Something */ 
    return false; 
}); 
3

使用jQuery按钮点击

$('#button_id').on('click',function(){ 
    $('#form_id').submit(); 
});