Django 表单提交按钮的 onclick 不调用 JavaScript 函数答案

【问题标题】：Django form submit button's onclick does not call JavaScript functionDjango 表单提交按钮的 onclick 不调用 JavaScript 函数
【发布时间】：2010-12-14 06:25:34
【问题描述】：

我有一个 Django 表单，需要在提交表单之前进行一些客户端验证。这是模板中的代码：

<form action="/{{ blog_entry.id }}/addComment/" method="post">
{{ commentForm.name.label_tag }} 
{{ commentForm.name }}
<span id="spanNameReq" style="color:Red; display:none;">Required</span>
<br />     
{{ commentForm.email.label_tag }} 
{{ commentForm.email }}
<span id="spanEmailReq" style="color:Red; display:none;">Required</span>
<span id="spanEmailInvalid" style="color:Red; display:none;">Invalid e-mail address</span>
<br />
{{ commentForm.website.label_tag }} 
{{ commentForm.website }}
<span id="spanWebsiteInvalid" style="color:Red; display:none;">Invalid URL</span>
<br />    
{{ commentForm.comment.label_tag }} 
<span id="spanCommentReq" style="color:Red; display:none;">Required</span>   
<br />
{{ commentForm.comment }}
<br />  
<input type="submit" value="Add comment" onclick="javascript:var ret = validateComment(); return ret;" />  
</form>

但问题是 validateComment 根本没有被调用，并且表单被立即提交。奇怪的是，如果我将 onclick 事件替换为

javascript:alert('test');

或

javascript:return false;

JS 代码执行得很好（在第二种情况下它不会提交表单）。

为什么不执行我指定的功能？只是为了确认我已经在 HTML 头中包含了脚本文件（包括嵌入在模板中的 JS 代码没有什么区别），如果我不使用 Django 表单，而是使用普通的 HTML 表单，它就可以正常工作。

【问题讨论】：

我不能说为什么它不起作用，但您应该考虑使用表单的onsubmit 事件，而不是提交按钮上的onclick。这样一来，如果您按 Enter 键提交表单，它也将起作用，一旦您开始工作。
@nlogax：是的，当 joeformd 在下面发布类似的建议时，我也意识到了这一点。不幸的是，这仍然不能解决我的问题......

标签： javascript django forms

【解决方案1】：

首先，请删除“javascript”伪协议前缀。它在 onclick 属性中绝对没有位置。它是为在 href 中使用而发明的，但被 on* 方法所取代 - 重点是您应该只使用 javascript 本身。

其次，你为什么要关心变量？为什么不只是return validateComment()？

第三，您如何确定该函数“根本没有被调用”？似乎正在调用该函数，它只是没有返回您认为的内容。请贴出函数的代码，也许有人会发现问题所在。

【讨论】：

感谢 cmets。是的，你对前缀和变量是正确的，我只是把它们放进去，因为我正在尝试不同的东西来看看这是否可行。我知道没有调用该函数，因为如果 validateComment 中的唯一行是'return false;'它不会停止表单提交。

【解决方案2】：

直接在您的 HTML 中编写 Javascript 事件可能会在以后给您带来问题 - 而是尝试为表单提供一个 id，并在 <head> 部分中从 Javascript 捕获提交事件

例如使用 jQuery，表单有 id="my_form":

<script type="text/javascript">

$(document).ready(function(){

$('#my_form').submit(function(){

    if ([test here]){
        return true; 
    } else {
        return false; //prevents submission
    } 

})

})

</script>

【讨论】：

感谢您的建议，但在这种情况下使用表单提交事件并没有什么不同。它不会通过那个函数。

【解决方案3】：

我认为没有调用您的函数。我的预感是你拼错了一些东西。尝试在您的函数中放置一个 alert() 。

【讨论】：

丹，我已经试过了。我对拼写进行了两次和三次检查。如前所述，如果我使用“普通”HTML 表单而不是 Django 表单，它可以正常工作。
修改您的问题以包含执行 alert() 的 html 和 javascript 函数，该函数包含作为模板输出的表单，然后是“正常”html 表单。只是为了让我们看得更清楚。
原来是JavaScript函数有语法错误。