Hi everyone I want to save the html array for dynamic inputs into the database using django, I have three dynamic inputs on my form, here is my code:
Views.py
def generatescripts(request):
# if this is a POST request we need to process the form data
if request.method == 'POST':
# create a form instance and populate it with data from the request:
form = GenerateScriptsForm(request.POST)
# check whether it's valid:
if form.is_valid():
# process the data in form.cleaned_data as required
# ...
# redirect to a new URL:
Step = request.POST.getlist('Step')
for el in Step:
form.save()
return HttpResponseRedirect('/thanks/')
# if a GET (or any other method) we'll create a blank form
else:
form = GenerateScriptsForm()
return render(request, 'page/generatescripts.html', {'form': form})
forms.py
from django import forms
from .models import Steps
class GenerateScriptsForm(forms.ModelForm):
class Meta:
model= Steps
fields = "__all__"
models.py
from django.db import models
# Create your models here.
class Steps(models.Model):
Step = models.CharField(max_length=200,default='0')
Description = models.CharField(max_length=200,default='0')
Result = models.CharField(max_length=200,default='0')
multiple inputs with the same name and I cant save with my code, this code only save one value from the array
generatescripts.html
<input type="button" value="Preview form" class="add" id="preview" />
<input type="button" value="Add a Step" class="add" id="add" />
<script>
$(document).ready(function() {
$("#add").click(function() {
var lastField = $("#buildyourform div:last");
var intId = (lastField && lastField.length && lastField.data("idx") + 1) || 1;
var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field" + intId + "\"/>");
fieldWrapper.data("idx", intId);
var step = $("<input type=\"text\" name= \"Step\" placeholder= \"Step\" class=\"fieldname\" />");
var description = $("<input type=\"text\" name= \"Description\" placeholder= \"description\" class=\"fieldname\" />");
var expectedresult = $("<input type=\"text\" name= \"Result\" class=\"fieldname\" />");
var fType = $("<select class=\"fieldtype\"><option value=\"checkbox\">Checked</option><option value=\"textbox\">Text</option><option value=\"textarea\">Paragraph</option></select>");
var removeButton = $("<input type=\"button\" class=\"remove\" value=\"-\" />");
removeButton.click(function() {
$(this).parent().remove();
});
fieldWrapper.append(step);
fieldWrapper.append(description);
fieldWrapper.append(expectedresult);
fieldWrapper.append(fType);
fieldWrapper.append(removeButton);
$("#buildyourform").append(fieldWrapper);
});
$("#preview").click(function() {
$("#yourform").remove();
var fieldSet = $("<fieldset id=\"yourform\"><legend>Your Form</legend></fieldset>");
$("#buildyourform div").each(function() {
var id = "input" + $(this).attr("id").replace("field","");
var label = $("<label for=\"" + id + "\">" + $(this).find("input.fieldname").first().val() + "</label>");
var input;
switch ($(this).find("select.fieldtype").first().val()) {
case "checkbox":
input = $("<input type=\"checkbox\" id=\"" + id + "\" name=\"" + id + "\" />");
break;
case "textbox":
input = $("<input type=\"text\" id=\"" + id + "\" name=\"" + id + "\" />");
break;
case "textarea":
input = $("<textarea id=\"" + id + "\" name=\"" + id + "\" ></textarea>");
break;
}
fieldSet.append(label);
fieldSet.append(input);
});
$("body").append(fieldSet);
});
});
</script>
<input type="submit" />
</form>
{% endblock %}
I just read your view function, change it to this:
def generatescripts(request):
if request.method == 'POST':
Steps = request.POST.getlist('Step')
Results = request.POST.getlist('Result')
Descriptions = request.POST.getlist('Description')
# FIXME: number of each field should equal
c = min([len(Steps), len(Results), len(Descriptions)])
for i in range(c):
# create a form instance and populate it with data from the request:
form = GenerateScriptsForm({'Step': Steps[i], 'Result': Results[i], 'Description': Descriptions[i]})
# check whether it's valid:
if form.is_valid():
form.save()
return HttpResponseRedirect('/thanks/')
else:
form = GenerateScriptsForm()
return render(request, 'page/generatescripts.html', {'form': form})
Related
I'm following a tutorial to add new users to my database via a html form and flask. I'm able to run the code using the html template with: localhost/5000
But if I enter the data that should be add to the database I get the following error:
The requested URL was not found on the server. If you entered the URL manually please check your spelling and try again.
with this url: http://localhost:5000/sign_in?stage=login
Python code:
#app.route("/")
def showForm():
# show our html form to the user
t_message = "Python and Postgres Registration Application"
return render_template("register.html", message = t_message)
#app.route("/register", methods=["POST","GET"])
def register():
# get user input from the html form
t_email = request.form.get("t_email", "")
t_password = request.form.get("t_password", "")
# check for blanks
if t_email == "":
t_message = "Please fill in your email address"
return render_template("register.html", message = t_message)
if t_password == "":
t_message = "Please fill in your password"
return render_template("register.html", message = t_message)
# hash the password they entered
t_hashed = hashlib.sha256(t_password.encode())
t_password = t_hashed.hexdigest()
# database insert
t_host = "localhost"
t_port = "5432"
t_dbname = "register_dc"
t_user = "postgres"
t_pw = "=5.k7wT=!D"
db_conn = psycopg2.connect(host=t_host, port=t_port, dbname=t_dbname, user=t_user, password=t_pw)
db_cursor = db_conn.cursor()
# We take the time to build our SQL query string so that
# (a) we can easily & quickly read it
# (b) we can easily & quickly edit or add/remote lines
# The more complex the query, the greater the benefits
s = "INSERT INTO public.users "
s += "("
s += " t_email"
s += ", t_password"
s += ") VALUES ("
s += " '" + t_email + "'"
s += ",'" + t_password + "'"
s += ")"
db_cursor.execute(s)
try:
db_conn.commit()
except psycopg2.Error as e:
t_message = "Database error: " + e + "/n SQL: " + s
return render_template("register.html", message = t_message)
t_message = "Your user account has been added."
return render_template("register.html", message = t_message)
if __name__ == "__main__":
app.run(debug=True)
HTML code:
<script language="JavaScript" type="text/javascript">
function checkform (form)
{
/* isEmpty() returns true and alerts the user if they left a field empty */
function isEmpty (fixwhat, s_called)
{
if (fixwhat=="")
{
alert("Please enter " + s_called);
return true;
} else {
return false;
}
}
/* charCheck() returns false and alerts the user if they used any non-alphanumeric characters */
function charCheck(fixwhat)
{
var validchars = '#-_.0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
if(isValid(fixwhat,validchars))
{
return true;
} else {
alert("Please use only letters or numbers in this field");
return false;
}
}
/* isValid is used by the charCheck() function to look through each 'validchars' one at a time */
function isValid(string,validchars)
{
for (var i=0; i< string.length; i++)
{
if (validchars.indexOf(string.charAt(i)) === -1) {return false;}
}
return true;
}
// Check for empty fields
if (is_empty (form.t_email.value,"your email address")) { form.t_email.focus(); return false;}
if (is_empty (form.t_password.value,"your password")) { form.t_password.focus(); return false;}
//check for weird chars
if (charCheck(form.t_email.value)===false) {form.t_email.focus(); return false;}
if (charCheck(form.t_password.value)===false) {form.t_password.focus(); return false;}
return true ;
}
</script>
<div class='container'>
<form id='frmSignIn' name='frmSignIn' action='/sign_in?stage=login' method='post' onsubmit='return checkform(this);'>
<div class="form-row">
<label for="Email">Email address:</label>
<input type="text" id="t_email" name="t_email">
</div>
<div class="form-row">
<label for="Email">Password:</label>
<input type="text" id="t_password" name="t_password">
</div>
<div class="form-row">
<input type="submit" id="btn_submit_sign_in" value='Sign In'>
</div>
</form>
You are using the route /sign_in in your browser (and in your template), but you declared your route as /register, thus a 404 is returned.
I have a project with a model called "List," and a model called "ListItem." There are multiple list items to each list. Here's what I'd like to do. I'd like the user to be able to create a new list with as many items as they deem necessary on one form.
Here's the logic I have so far:
models.py:
class List(models.Model):
team = models.ForeignKey(Team, on_delete=models.CASCADE)
name = models.CharField(max_length=50)
def __str__(self):
return self.name
class ListItem(models.Model):
team_list = models.ForeignKey(List, on_delete=models.CASCADE)
content = models.TextField()
index = models.IntegerField()
def __str__(self):
return f"{self.team_list} [{self.index}]"
forms.py:
class NewListForm(forms.ModelForm):
name = forms.CharField(max_length=50, label='Card Name')
team = forms.ModelChoiceField(queryset=models.Team.objects.all())
class Meta:
model = models.List
fields = ['name', 'team']
class NewListItemForm(forms.ModelForm):
content = forms.CharField(widget=forms.Textarea,
label='Item', required=True)
class Meta:
model = models.ListItem
fields = ['content']
views.py:
def new_list(request):
context = {
'title': 'New List',
'list_form': NewListForm,
'list_item_form': NewListItemForm,
}
if request.method == 'POST':
list_form = NewListForm(request.POST)
list_item_form = NewListItemForm(request.POST)
if list_form.is_valid() and list_item_form.is_valid():
list_instance = list_form.save()
list_item_instance = list_item_form.save(commit=False)
list_item_instance.team_list = list_instance
list_item_instance.index = 1
list_item_instance.save()
messages.success(request, "List has been created!")
return redirect('home')
else:
messages.error(request, "That list name is already taken")
return render(request, 'lists/new_list.html', context)
This works for creating 1 list and just 1 item. Ultimately, I'd like the user to be able to add as many additional list item forms as is necessary AND have the "index" field of each item on that list increment by 1 with each new list item instance.
Is there some way to loop through each instance of a repeated form and save a unique instance in my db an indefinite number of times?
I don't think you need to increment the index yourself, django should increment it automatically. I used formset_factory and javascript on my template to have the ability to add fields to the form dynamically. I am not very familiar with django or javascript (I'm very early in the learning process), but this is how I got it to work in my case:
models.py
class Instructors(models.Model):
instructors = models.CharField(max_length=60)
injury = models.ForeignKey("Injury", on_delete=models.CASCADE)
forms.py
class InstructorForm(forms.Form):
instructor = forms.CharField(max_length=60, required=False)
InstructorFormset = formset_factory(InstructorForm, extra=1)
views.py (relevant section)
...
formset = InstructorFormset(request.POST)
if formset.is_valid()
for form in formset:
if form.cleaned_data:
instructor = Instructors(
instructors=form.cleaned_data["instructor"],
injury=injury,
)
instructor.save()
...
context = {"formset":formset}
template.html
{{ formset.management_form }}
{% for form in formset %}
<div class="row form-row spacer">
{{ form.instructor }}
<div class="input-group-append">
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type='text/javascript'>
function updateElementIndex(el, prefix, ndx) {
var id_regex = new RegExp('(' + prefix + '-\\d+)');
var replacement = prefix + '-' + ndx;
if ($(el).attr("for")) $(el).attr("for", $(el).attr("for").replace(id_regex, replacement));
if (el.id) el.id = el.id.replace(id_regex, replacement);
if (el.name) el.name = el.name.replace(id_regex, replacement);
}
function cloneMore(selector, prefix) {
var newElement = $(selector).clone(true);
console.log(newElement);
var total = $('#id_' + prefix + '-TOTAL_FORMS').val();
newElement.find(':input:not([type=button]):not([type=submit]):not([type=reset])').each(function() {
var name = $(this).attr('name');
if (name != undefined) {
console.log(name);
console.log(total);
var name = name.replace('-' + (total-1) + '-', '-' + total + '-');
console.log("next");
};
var id = 'id_' + name;
$(this).attr({'name': name, 'id': id}).val('').removeAttr('checked');
});
newElement.find('label').each(function() {
var forValue = $(this).attr('for');
if (forValue) {
forValue = forValue.replace('-' + (total-1) + '-', '-' + total + '-');
$(this).attr({'for': forValue});
}
});
total++;
$('#id_' + prefix + '-TOTAL_FORMS').val(total);
$(selector).after(newElement);
var conditionRow = $('.form-row:not(:last)');
conditionRow.find('.btn.add-form-row')
.removeClass('btn-success').addClass('btn-danger')
.removeClass('add-form-row').addClass('remove-form-row')
.html('-');
return false;
}
function deleteForm(prefix, btn) {
var total = parseInt($('#id_' + prefix + '-TOTAL_FORMS').val());
if (total > 1){
btn.closest('.form-row').remove();
var forms = $('.form-row');
$('#id_' + prefix + '-TOTAL_FORMS').val(forms.length);
for (var i=0, formCount=forms.length; i<formCount; i++) {
$(forms.get(i)).find(':input').each(function() {
updateElementIndex(this, prefix, i);
});
}
}
return false;
}
$(document).on('click', '.add-form-row', function(e){
e.preventDefault();
cloneMore('.form-row:last', 'form');
return false;
});
$(document).on('click', '.remove-form-row', function(e){
e.preventDefault();
deleteForm('form', $(this));
return false;
});
</script>
I don't remember where I got the js code, but I did not write it and can't take credit for it. Hopefully you have a better understanding than I do, but it works for me as is.
I'm attempting to submit my form, but it continually fails as there's something wrong with the POST. I'm unsure where/what exactly is causing the server to not process the request whether it's related to syntax, request routing, etc. I've also commented out every line related to file uploads, as well as comment out the if (validated) statement. There are no errors in the console as a result of this, but the form submission still fails. I'd appreciate any help/direction thanks.
I get this error message when I submit the form:
POST http://127.0.0.1:5051/register/ 400 (BAD REQUEST)
views.py
#blueprint.route("register/", methods=['GET', 'POST'])
def register():
"""Renders register page."""
form = RegisterForm()
if request.method == 'POST':
if not form.validate_on_submit():
return render_template('main/register.html', page_title="Service Registration",
form=form, form_success=False, media_types=current_app.config["ACCEPTED_"
"MEDIA_TYPE"])
ticket, err = create_ticket2(customer_id, organization + "\n" + venue_name + "\n" + street + "\n" + country + "\n" + teamviewquestion + "\n" + teamviewerid + "\n" + deviations + "\n" + deviationsnotes + "\n" + displaydirector + "\n" + composer + "\n" + decryptor + "\n" + motionrocket + "\n" + othersoftware,
location=location)
if err:
return render_template('main/register.html', page_title="Service Registration",
form=form, form_success=False, message=err, media_types=current_app.config["ACCEPTED_"
"MEDIA_TYPE"])
else:
success_msg = "Error"
.format(ticket.get('id'))
return render_template('main/register.html', page_title="Service Registration",
form=form, form_success=True, message=success_msg, media_types=current_app.config["ACCEPTED_"
"MEDIA_TYPE"])
return render_template('main/register.html', page_title="Service Registration",
form=form, media_types=current_app.config["ACCEPTED_"
"MEDIA_TYPE"])
"""Handles file upload POSTs."""
first_name = request.form.get("first_name")
last_name = request.form.get("last_name")
name = request.form.get("first_name") + " " + request.form.get("last_name")
email = request.form.get("email")
filename = request.form.get("filename")
file_type = request.form.get("file_type")
if filename == '':
response = make_response("No selected file")
return response, 400
if check_file_type(file_type):
filename = clean_filename(filename)
filename = secure_filename(filename)
filename = unique_filename(filename)
response = generate_presigned_post(filename, file_type)
# CREATE DB REFERENCE
url = "http://nevcodocs.s3.amazonaws.com/Uploads/{}".format(filename)
instance = CustomerFileUpload.query.filter_by(url=url).first()
if not instance:
instance = CustomerFileUpload(url=url, email=email, name=name)
db.session.add(instance)
db.session.commit()
else:
instance.update(created_at=datetime.utcnow())
return response, 200
js (ticket submission function)
$('#ticket-form').submit(function(event) {
if (validated) {
$('#filename').val($('#upload').val());
$.ajax({
type: 'POST',
url: '/register/',
data: $('#ticket-form').serialize()
}).done(function(data) {
var formData = new FormData();
for (var key in data.data) {
formData.append(key, data.data[key]);
}
formData.append('file', $('#upload').prop('files')[0]);
formData.append('csrf_token', '{{ csrf_token }}');
var req = new XMLHttpRequest();
req.onload = function() {
showSpinner(false);
$('#ticket-form').removeClass("support-form-show");
$('#ticket-form').addClass("support-form-hide");
};
req.onerror = function() {
showSpinner(false);
$('#ticket-form-failed').removeClass("support-form-hide");
$('#ticket-form-failed').addClass("support-form-show");
};
req.open('POST', '/register/');
req.send(formData);
}).fail(function(err) {
showSpinner(false);
$('#ticket-form-failed').removeClass("support-form-hide");
$('#ticket-form-failed').addClass("support-form-show");
});
} else {
showSpinner(false);
enableSubmit(true);
}
});
Usually, bad request means that you're trying to fetch data from request object using invalid keys. So you need to make sure that your POST request body (that was sent by javascript) contains all keys which you're using as arguments of request.form.get() method: first_name, last_name, etc...
Clicking on the submit button literally does nothing. Submitting a blank form will trigger the validation for the required fields, but filling out the form as required results in the form not submitting/submit button doing nothing. The template has the CSRF_Token, Submit Button is in the form tag, and the form tag has an action attribute pointing in the right direction. Chrome doesn't bark any errors so I'm stuck on how to proceed.
views.py
#blueprint.route("register/", methods=['GET', 'POST'])
def register():
"""Renders register page."""
form = RegisterForm()
if request.method == 'POST':
if not form.validate_on_submit():
return render_template('main/register.html', page_title="Service Registration",
form=form, form_success=False, media_types=current_app.config["ACCEPTED_"
"MEDIA_TYPE"])
company, err = get_company(form.organization.data)
if err:
company, err = create_company(form.organization.data)
if err:
return render_template('main/register.html', page_title="Service Registration",
form=form, form_success=False, message=err, media_types=current_app.config["ACCEPTED_"
"MEDIA_TYPE"])
customer, err = get_or_create_customer(
form.first_name.data + " " + form.last_name.data, form.email.data,
company_id, form.position.data, phone_number
)
if err:
return render_template('main/register.html', page_title="Service Registration",
form=form, form_success=False, message=err, media_types=current_app.config["ACCEPTED_"
"MEDIA_TYPE"])
if err:
return render_template('main/register.html', page_title="Service Registration",
form=form, form_success=False, message=err, media_types=current_app.config["ACCEPTED_"
"MEDIA_TYPE"])
else:
return render_template('main/register.html', page_title="Service Registration",
form=form, form_success=True, message=success_msg, media_types=current_app.config["ACCEPTED_"
"MEDIA_TYPE"])
return render_template('main/register.html', page_title="Service Registration",
form=form, media_types=current_app.config["ACCEPTED_"
"MEDIA_TYPE"])
#blueprint.route("register/", methods=['POST'])
def upload_register():
"""Handles file upload POSTs."""
first_name = request.form.get("first_name")
last_name = request.form.get("last_name")
name = request.form.get("first_name") + " " + request.form.get("last_name")
email = request.form.get("email")
filename = request.form.get("filename")
file_type = request.form.get("file_type")
if filename == '':
response = make_response("No selected file")
return response, 400
if check_file_type(file_type):
filename = clean_filename(filename)
filename = secure_filename(filename)
filename = unique_filename(filename)
response = generate_presigned_post(filename, file_type)
# CREATE DB REFERENCE
url = "http://nevcodocs.s3.amazonaws.com/Uploads/{}".format(filename)
instance = CustomerFileUpload.query.filter_by(url=url).first()
if not instance:
instance = CustomerFileUpload(url=url, email=email, name=name)
db.session.add(instance)
db.session.commit()
else:
instance.update(created_at=datetime.utcnow())
return response, 200
else:
response = make_response("Invalid file type")
return response, 500
javascript/jquery
// Enables/disables form submission and colors button accordingly
var enableSubmit = function(enabled) {
if (enabled) {
$('#submit_ticket').removeAttr('disabled');
$('#submit_ticket').removeAttr('style');
} else {
$('#submit_ticket').attr('disabled', 'disabled');
$('#submit_ticket').attr('style', 'background-color: rgba(244, 121, 32, 0.5) !important; border-color: rgba(244, 121, 32, 0.25) !important;');
}
};
$('#ticket-form').submit(function(event) {
enableSubmit(false);
showSpinner(true);
var validated = true;
var didSelectFile = true;
didSelectFile = validateField('#upload') && validated;
validated = didSelectFile && validated;
if (didSelectFile && !validateContentType()) {
$('invalid-upload-alert').show();
validated = false;
} else {
$('#invalid-upload-alert').hide();
}
if (validated) {
$('#filename').val($('#upload').val());
$('#file_type').val($('#upload').prop('files')[0].type);
$.ajax({
type: 'POST',
url: '/register/',
data: $('#ticket-form').serialize()
}).done(function(data) {
var formData = new FormData();
for (var key in data.data.fields) {
formData.append(key, data.data.fields[key]);
}
formData.append('file', $('#upload').prop('files')[0]);
var req = new XMLHttpRequest();
req.onload = function() {
showSpinner(false);
$('#ticket-form-failed').removeClass("support-form-show");
$('#ticket-form-failed').addClass("support-form-hide");
$('#ticket-form').removeClass("support-form-show");
$('#ticket-form').addClass("support-form-hide");
$('#ticket-form-success').removeClass("support-form-hide");
$('#ticket-form-success').addClass("support-form-show");
};
req.onerror = function() {
showSpinner(false);
$('#ticket-form-failed').removeClass("support-form-hide");
$('#ticket-form-failed').addClass("support-form-show");
};
req.open('POST', data.url);
req.send(formData);
}).fail(function(err) {
showSpinner(false);
$('#ticket-form-failed').removeClass("support-form-hide");
$('#ticket-form-failed').addClass("support-form-show");
});
} else {
showSpinner(false);
enableSubmit(true);
}
{% endif %}
if (!validated) {
event.preventDefault();
showSpinner(false);
enableSubmit(true);
}
});
What you have written looks really complicated, why not try something easy like-
#app.route("/connect",methods=['GET','POST'])
def connect():
if request.method=='GET':
return render_template('connect.html')
if request.method=="POST":
return render_template('Thankyou.html',name=request.form['name])
in you views.py and in your connect.html form just write-
<form name="connect" method="post" action="{{ url_for('connect') }}">
<input class="t1" type="text" id="email" name="email" placeholder="Your Email ID">
<input class="t2" type="text" id="name" name="name" placeholder="name">
<button class="btn btn-primary but" type="submit">Send</button>
</form>
the final page, Thankyou.html can look like this-
<p>Thanks for contacting me, {{ name }} </p>
form.html
<form action='/login/' method = 'post'>
{% csrf_token %}
<label>Email: (*)</label><input type='text' name='email' value='' /><br />
<label>Password: </label><input type='password' name='password' value='' /><br />
<input type='submit' name='submit' value='Log in' />
</form>
and views.py i use HttpResponse not render_to_response
def login(request):
success = False
message = ''
try:
emp = Employee.objects.get(email = request.POST['email'])
if emp.password == md5.new(request.POST['password']).hexdigest() :
emp.token = md5.new(request.POST['email'] + str(datetime.now().microsecond)).hexdigest()
emp.save()
info = serializers.serialize('json', Employee.objects.filter(email = request.POST['email']))
success = True
return HttpResponse(json.dumps({'success':str(success).lower(), 'info':info}))
else:
message = 'Password wrong!'
return HttpResponse(json.dumps({'success':str(success).lower(), 'message':message}), status = 401)
except:
message = 'Email not found!'
return HttpResponse(json.dumps({'success':str(success).lower(), 'message':message}), status = 401)
if use render_to_response, i just add RequestContext but HttpResponse, i don't know what to do.
i use Django 1.4
Where's my problem
=========================
My problem is sloved when I change the function that render the HTML :
def homepage(request):
return render_to_response('index.html')
to
def homepage(request):
return render_to_response('index.html', context_instance=RequestContext(request))
That's a stupid mistake... thanks...
If you are using ajax to send the form and have included jQuery, you have two possibilities:
Manually add the csrfmiddlewaretoken data to your POST request
Automate CSRF token handling by modifying jQuery ajax request headers
1. Manually add csrfmiddlewaretoken
var data = {
csrfmiddlewaretoken: $('#myForm input[name=csrfmiddlewaretoken]').val(),
foo: 'bar',
};
$.ajax({
type: 'POST',
url: 'url/to/ajax/',
data: data,
dataType: 'json',
success: function(result, textStatus, jqXHR) {
// do something with result
},
});
2. Automate CSRF token handling
jQuery(document).ajaxSend(function(event, xhr, settings) {
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
function sameOrigin(url) {
// url could be relative or scheme relative or absolute
var host = document.location.host; // host + port
var protocol = document.location.protocol;
var sr_origin = '//' + host;
var origin = protocol + sr_origin;
// Allow absolute or scheme relative URLs to same origin
return (url == origin || url.slice(0, origin.length + 1) == origin + '/') ||
(url == sr_origin || url.slice(0, sr_origin.length + 1) == sr_origin + '/') ||
// or any other URL that isn't scheme relative or absolute i.e relative.
!(/^(\/\/|http:|https:).*/.test(url));
}
function safeMethod(method) {
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
if (!safeMethod(settings.type) && sameOrigin(settings.url)) {
xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
}
});
But: It is said that modifying the ajax request headers is bad practice. Therefore i'd go with solution number one.
Source: Cross Site Request Forgery protection: AJAX
The Django Documentations (CSRF DOC LINK) clearly explains how to enable it.
This should be the basic way of writing view with csrf token enabled..
from django.views.decorators.csrf import csrf_protect
#csrf_protect
def form(request):
if request.method == 'GET':
#your code
context = {}
return render (request, "page.html", context )