Ajax redirects to the url with preventDefault() - django

Question

I'm using Django for an app that allows you to search and save recipes. I'm trying to have a form on a search results page that allows you to click 'save' and creates an object to the database without reloading the page. In the current setup when I click on the 'save' button for the form with id="add_form" I get redirected to a new url (add/) even though I've included preventDefault().
I thought this was due to me including the form action={%url 'add' %} however, I've tried removing the form action but that gave me a multiValueDictKeyError for raw_input = request.POST['ingredients'] so I thought it was calling the incorrect view function views.recipes instead of views.add. I've read some other ajax guides that explicitly state a form action so I thought that would help with the incorrect view function being called.
views.py
def recipes(request):
if request.method == 'POST':
# check for dietary restrictions
restrictions = request.POST.getlist('restrictions')
# format input ingredients
raw_input = request.POST['ingredients']
...
return render(request, 'recipes/recipes.html', {'results': results})
else:
return render(request, 'recipes/recipes.html', {'error': 'Please search for a recipe'})
#csrf_protect
def add(request):
if request.method == 'POST':
title = request.POST['title']
image = request.POST['image']
source = request.POST['source']
user = request.user
try:
recipe = Recipe.objects.get(image=image, title=title, source=source)
except ObjectDoesNotExist:
recipe = Recipe.objects.create(image=image, title=title, source=source)
finally:
recipe.users.add(user)
recipe.save()
return JsonResponse({'success': True})
else:
return JsonResponse({'success': False})
urls.py
urlpatterns = [
path('add/', views.add, name='add'),
path('', views.recipes, name='recipes'),
]
html file
{% block content %}
...
{% if user.is_authenticated %}
<form action="{% url 'add' %}" id="add_form" method="POST">
{% csrf_token %}
<input type="hidden" id="image" name="image" value="{{ result.image }}">
<input type="hidden" id="title" name="title" value="{{ result.title }}">
<input type="hidden" id="source" name="source" value="{{ result.source }}">
<button type="submit" name="recipe" class="btn btn-sm btn-outline-secondary">Save</button>
</form>
{% endif %}
{% endblock %}
{% block javascript %}
<script type="text/javascript">
$(document).ready(function() {
$("#add_form").on('submit', function(e) {
e.preventDefault();
console.log( "form submitted");
$.ajax({
type:'POST',
async: 'false',
cache: 'false',
url:'{% url 'add' %}',
data:{
image:$('#image').val(),
title:$('#title').val(),
source:$('#source').val(),
},
success:function(){
alert("Saved Recipe")
}
})
})
})
</script>
I'm expecting any clicks to the save button to stay on the same page without a reload and to call views.add which will save/create an object to the database

Answer 1

Change the url to $(this).attr('action'). It will automatically get the url from the form instead of explicitly defining it again while making ajax call.
$.ajax({
type:'POST',
async: 'false',
cache: 'false',
url: $(this).attr('action'),,
data:{
image:$('#image').val(),
title:$('#title').val(),
source:$('#source').val(),
},
success:function(){
alert("Saved Recipe")
}
})