CODEWITHSUNDEEP
javascriptjquerypythondjangoforms
Liondancer
Liondancer

Reputation: 16469

Submitting form after JS logic in Django

I have a form that enables user input. Upon submit, some javascript will perform some logic to be passed to /test/ URL. Right now the issue is that I am not being redirected to/test/ URL.

JS:

$(document).ready(function() {
    var testRun = document.getElementById("test-form");
    testRun.addEventListener('submit', function(event) {
        testData["timestamp"] = new Date().getTime();
        event.preventDefault();
        // more logic
        return jsonData;
    });
});

home_page.html

  <form id="test-form" action="/test/" method="post"> {# pass data to /test/ URL #}
    {% csrf_token %}
    <div class="test-button-set">
      <button type="button" id="hdfs-test" class="btn btn-default btn-lg selected">HDFS</button>
      <button type="button" id="hive-test" class="btn btn-default btn-lg">HIVE</button>
      <button type="button" id="hdfs-hive-test" class="btn btn-default btn-lg">BOTH</button>
    </div>

    {{ form.event_textarea }}
    <button id="submit-test" type="submit" class="btn btn-default btn-lg">Submit</button>
  </form>

forms.py

class TestForm(forms.Form):
    event_textarea = forms.CharField(widget=forms.Textarea(attrs={'rows': '8', 'class': 'form-control', 'placeholder': 'Events...', 'id': 'event-textarea'}))

views.py

from django.shortcuts import render
from forms import TestForm
from django.http import HttpResponseRedirect


def home(request):
    if request == 'POST':
        # create a form instance and populate it with data from the request
        form = TestForm(request.POST)
        if form.is_valid():
            # process the data in form.cleaned_data as required
            form.cleaned_data()
            # redirect to a new URL:
            return HttpResponseRedirect('/test/')
    # if a GET (or any other method) we'll create a blank form
    else:
        form = TestForm()
    return render(request, 'home/home_page.html', {'form': form})

def test(request):
    return render(request, 'home/test.html', {'post': request.POST})

My /test/ url is made to display the post request so I can see for sure what I am posting. Currently the JS logic (I've set up indicators of the output) is working but I am not being redirected so I'm not sure if anything is getting posted to the URL

Upvotes: 0

Views: 956

Answers (1)

Hamish
Hamish

Reputation: 23346

This line will prevent the default event (the form submission) from happening:

event.preventDefault();

Remove that and the form should submit as expected.

Upvotes: 3

Related Questions