CODEWITHSUNDEEP
djangodjango-forms
Anshuma
Anshuma

Reputation: 3472

Django form submission - avoid page redirect

I am using a django form to update some details. once the save changes is clicked the ajax call is made, view executed, ajax response sent, success code executed n the page reloads again. n on reload as form is no longer valid, the else part of from.is_valid() is executed.

if form.is_valid:
    #do something
    return HttpResponse(simplejson.dumps(response), mimetype='application/json')
else:
    #do something
    return render_to_response('ts.html', {'form': form}, context_instance = RequestContext(request))

I want to avoid the page reload on the successful form submission and jus return ajax response. How can achieve that?

I have changed my code and here is the view, template and jquery.

if request.POST:
    if form.valid():
         if credentials.correct():
               resp = {'success': True}
               return HttpResponse(simplejson.dumps(resp), mimetype='application/json')
         else:
              resp = {'success': False}
              return HttpResponse(simplejson.dumps(resp), mimetype='application/json')
    else:
         print "error in form"
         return render(request, 'manage_accounts.html', {'creds': creds, 'form': form})
else:
     form = SomeForm()
     return render(request, 'manage_accounts.html', {'creds': creds, 'form': form})

Template

<form action="/accounts/" method="POST" id="bitlychangeform">
  <div id="ajaxwrapper">
{% csrf_token %}
{{ form.non_field_errors }}
<!--{% include "Change_bitly_form.html" %}-->
{{ form.as_p }}
      <div class="clearfix">
        <label></label>
            <div class="input" style="float:right">
            <input type="submit" id="save" value="Save Changes" class="btn btn-primary  "/>
        </div>
     </div>
  </div>
</form>

Jquery:

$(function(){
var form = $('#bitlychangeform');
    form.submit(function(e) {
    jQuery("#save").attr('disabled', true)
    jQuery("#ajaxwrapper").load(
          form.attr('action') + ' #ajaxwrapper',
          form.serializeArray(),
          function(data) {
              jQuery("#save").attr('disabled', false)
      alert(data);
          });
  return false;
      e.preventDefault(); 
  });
});

The page reload doesn't occur when i use Django form as {{ form.as_p }} but when i use a "custom template for form with fields as password char fields with ** and editable only after one clicks edit button", the form.valid() returns false.

I require that the django form functions as my custom template for form as i desire. Can anyone guide me.

Upvotes: 0

Views: 5509

Answers (2)

dm03514
dm03514

Reputation: 55972

I would guess you didn't override the default form submission behavior on the front end, and you are submitting your form normally.

Make sure that you supress the default behavior of form submission. This page provides a great example under templates/contact/form.html

Upvotes: 1

Alagappan Ramu
Alagappan Ramu

Reputation: 2368

You can handle this in your JavaScript by returning false on submission of form.

form.submit(){
    #do something
    #make AJAX call
    #do something
    return false;
}

Upvotes: 1

Related Questions