Django Ajax-Jquery does not fetch the data

Django Ajax-Jquery does not fetch the data

I am not able to get the input text field data with id city_name from the
form via jQuery-Ajax method.
The error that I keeps getting is "NetworkError: 403 FORBIDDEN -
http://127.0.0.1:8000/dashboard".
I know how to get the data using hidden field type, but that option cannot
be used here and moreover, getting data from hidden field is now an
outdated method. So, how can I get data using Django-AjaxJquery method.
HTML
<form type = "POST">
{% csrf_token %}
<input type="text" placeholder = "Enter City Name" id =
"city_name">
<input type="button" value = "On" id="on">
<input type="button" value = "Off" id="off">
<input type="submit" value="Submit">
</form>
JS File
$(function(){
$("#on").click(function (event) {
event.preventDefault();
$.ajax({
type: "POST",
url: "dashboard",
data : {
'city_name' : $("#city_name").val(),
},
});
});
});
View.py
@login_required
def dashboard(request):
ctx = {}
if request.is_ajax():
city_name = request.POST['city_name']
print city_name
return render_to_response('dashboard/dashboard.html',ctx,
context_instance = RequestContext(request))
urls.py
urlpatterns = patterns('',
url(r'^dashboard$','apps.dashboard.views.dashboard', name =
'llumpps_dashboard'),
)