Django form not submitting using Javascript

Question

I have a Django form on one of the pages which I am trying to submit using Jquery-Ajax.

Following is my code:

I have used Jinja templating to render the form on page.

 <form action='' method='post' name='ContactForm' id='ContactForm'> 
                        {% csrf_token %}
                            {% for field in form %}
                                <div class="input-group"> <span class="input-group-addon">@</span>
                                   {{ field }}
                                </div>
                            {% endfor %}
                            <div class="input-group form-buttons"> <span class="input-group-btn">
                                <button class="btn btn-default" type='submit' value='Submit' name='submitf' id="submitf">SAY HELLO</button>
                                </span> 
                            </div>
                            <div id='message_post'></div>
 </form>
 <script type="text/javascript" src="{% static 'personal/js/contact/contact-form.js' %}"></script>

contact-form.js

$(function(){
$("#ContactForm").submit(function(){
    $("#submitf").value='Please wait...';
    alert("Control reached the script.");
    $.post("/contact/add/", $("#ContactForm").serialize(),
    function(data){ 
        alert("Alert entered function.");
        if(data.status == 'error'){ 
                $("#message_post").html("<div class='errorMessage'>ERROR: " + data.msg + "!</div>"); 
                document.ContactForm.submitf.value='Resend >>';
                document.ContactForm.submitf.disabled=false;
        } else {
            $("#message_post").html("<div class='successMessage'>Hi! Glad to meet you. I'll definitely contact you shortly.</div>"); 
            $("#submitf").value='Send >>';
            }
    }, "json");
    return false;   
});
});

urls.py

from django.conf.urls import url, include
from . import views

urlpatterns = [
    url(r'^$', views.index, name='index'),
    url(r'^contact/add/$', views.add, name='add')
]

views.py

def add(request):
    if request.method=='POST' and request.is_ajax():
        form=ContactForm(request.POST)
        if form.is_valid():
            try:
                form.save()

            except Exception as e:
                print ('%s' % str(e))
                msg = 'That\'s embarrassing. Will you please Say Hello again?'
                status = "Error"

            else:
                msg = 'Connected'
                status = "Success"

        print('status %s' % status)
        request.write({'message':msg, 'status':status})

But everytime I hit the submit button it gives the following error:

POST /contact/add/ HTTP/1.1" 404 2043

What I intend to do is when button is clicked the data in the form should be inserted into the database.

Referred following links and SO question but couldn't resolve the problem:

How to POST a django form with AJAX & jQuery

Django Project Docs

submitting a django form using javascript

Currently in learning phase of Python and Django. Highly appreciate any help.

You can try to use Postman if you want to check the API endpoint, to make sure the error isn't server-sided — Randy
– Randy, Commented Dec 29, 2016 at 13:12
@Randy Postman is probably for email services and AWS which neither I am using in my simple application. I might be wrong in interpreting your suggestion. If you could explain a bit in detail. — Codenaldo
– Codenaldo, Commented Dec 29, 2016 at 13:19
Actually, Postman is a very easy solution to make any call (POST, GET etc.) with relevant data to any API. That way you can make sure the error is in the request or in the back-end and that way you know where to start debugging — Randy
– Randy, Commented Dec 29, 2016 at 13:22

silviomoreto · Accepted Answer · 2016-12-29 13:21:53Z

1

Could you provide the view just to check it?

Although, check the documentation on making use of CSRF together with ajax: https://docs.djangoproject.com/en/1.10/ref/csrf/

You may need to add some AJAX settings before. I am providing to you a small gist that can help you: https://gist.github.com/silviomoreto/485b6a294b40f06011946d8be09c6e1f

answered Dec 29, 2016 at 13:21

silviomoreto

5,9174 gold badges33 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Codenaldo Over a year ago

I have provided the relevant function from my views.py in the question.

Collectives™ on Stack Overflow

Django form not submitting using Javascript

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related