CODEWITHSUNDEEP
javascriptdjangoforms
Tom van Enckevort
Tom van Enckevort

Reputation: 4198

Django form submit button's onclick does not call JavaScript function

I have a Django form that needs to do some client-side validation before submitting the form. This is the code in the template:

<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>

But the problem is that validateComment does not get called at all, and the form gets submitted straight away. Strangely enough if I replace the onclick event with

javascript:alert('test');

or

javascript:return false;

that JS code gets executed fine (and in the second case it won't submit the form).

Why does it not execute the function I specified? Just to confirm that I have included the script file in the HTML head (including the JS code embedded in the template does not make a difference), and if I don't use a Django form, but a normal HTML form it works fine.

Upvotes: 1

Views: 7547

Answers (3)

Dan.StackOverflow
Dan.StackOverflow

Reputation: 1279

I don't think your function is being called. My hunch is you have have misspelled something. Try putting an alert() in your function.

Upvotes: 1

joeformd
joeformd

Reputation: 143

Writing Javascript events directly in your HTML can give you problems later - instead try giving the form an id, and catching the submit event from Javascript in the <head> section

for example using jQuery, and the form has 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>

Upvotes: 0

Daniel Roseman
Daniel Roseman

Reputation: 599530

Firstly, please drop that 'javascript' pseudo-protocol prefix. It has absolutely no place in an onclick attribute. It was invented for use in hrefs, but was replaced by the on* methods - the whole point of which is that you are supposed to just use the javascript itself.

Secondly, why are you bothering with the variable? Why not just return validateComment()?

Thirdly, how are you determining that the function is 'not being called at all'? It seems likely that the function is being called, it's just not returning what you think it is. Please post the code of the function, and maybe someone will spot what's wrong.

Upvotes: 0

Related Questions