django + ajax post form - django

Question

i tru use ajax with django.
There are 2 forms. the first with the name and mail. and a quick form with a confirmation code that comes in the mail.
views.py
def get_name(request):
if request.method == 'POST':
user_code = generate_code(8)
subject = 'code'
message = user_code
form = NameForm(request.POST)
if form.is_valid():
Registration.objects.create(fio=request.POST['fio'],mail=request.POST['mail'])
send_mail(subject, message,settings.EMAIL_HOST_USER,[mail],fail_silently=False)
return JsonResponse({ 'form1': render_to_string( 'registers/endreg.html', {'form': NameForm1()},request=request ) })
else:
form = NameForm()
return render(request, 'registers/detail.html', {'form': form})
template (detail.html)
<form action="" method="post" autocomplete="off" id="my_form">
{% csrf_token %}
<div class="contact-form" >
<h1>{%trans 'Registers' %}</h1>
<div class="txtb">{{form.fio.label}} {{form.fio}}{{form.fio.help_text}}</div>
<div class="txtb">{{form.phone.label}} {{form.phone}}{{form.phone.help_text}}</div>
<input type="submit" value="{%trans 'send' %}" class="btn" id="btn">
</div>
</form>
I am hanging an event to submit this form
$(document).ready(function()
{ $("#my_form").submit(function(event)
{ event.preventDefault();
$this = $(this);
$.ajax({
type: "POST",
data: $this.serialize(),
success: function(data)
{ console.log(data);
var parent=$("#my_form").parent();
parent.html(data.form1);
},
error: function(data)
{ console.log(data);
$this.html(data);
}
});
});
});
ajax request works and get my 2 form (endreg.html)
<form action="endreg/" method="post" autocomplete="off" id="my_form2">
{% csrf_token %}
<div class="verification" >
<div class="ver">
{{form}}
</div>
<input type="submit" value="{%trans 'send' %}" class="btn1" >
</div>
</form>
views.py
def endreg(request):
if request.method == 'POST':
form = NameForm1(request.POST)
if form.is_valid():
code_use = form.cleaned_data.get("key")
try:
user = Registration.objects.get(code=code_use)
user.verification = True
user.save()
JsonResponse({'message': 'thanks.'})
except:
JsonResponse({'error': 'erorr.'})
else:
form = NameForm1()
return render(request, 'registers/endreg.html', {'form': form})
and 2nd ajax.
$(document).ready(function()
{ $("#my_form2").submit(function(event)
{ event.preventDefault();
$this = $(this);
$.ajax({
type: "POST",
data: $this.serialize(),
success: function(data)
{ console.log(data);
},
error: function(data)
{ console.log(data);
}
});
});
});
Now the question. why when I enter the code in the second form, the code is applied and a redirect to localhost:8000/endreg occurs with json .

Answer 1

Looks like your form is not valid, thats why it is loading the same page with the entered data. You should handle the failure condition for form.is_valid(). And also don't add the blank exception block for handling exceptions.
def endreg(request):
if request.method == 'POST':
form = NameForm1(request.POST)
if form.is_valid():
code_use = form.cleaned_data.get("key")
try:
user = Registration.objects.get(code=code_use)
user.verification = True
user.save()
messages.warning(request, u'thanks.')
except Registration.DoesNotExist as e: # Handling Exception for get()
print("NOT FOUND", e)
messages.warning(request, u'error.')
else: # if form is not valid
messages.warning(request, u'not valid.')
form = NameForm1() # reset the form
else:
form = NameForm1()
return render(request, 'registers/endreg.html', {'form': form})
In your HTML, you can render {{ form.errors }} as well.