0

I am making a website in django with ajax.I have created a base html file django template and two other html templates named signup.html and home.html.

I have written code to make ajax request with signup form in base.html file like this.

$("#signupBtn").click(function () {
    event.preventDefault();
    username = $('#id_username').val();
    password1 = $('#id_password1').val();
    password2 = $('#id_password2').val();
    data = { username=username, password1=password1, password2=password2 }
    $.ajax({
        type: 'POST',
        url: '{% url "signup" %}',
        data: data,
        success: function (response) {
            // $('#msg').html(`<p  style="font-size: 30px;color: lime;font-weight: bold;">User created succcess!</p>`);
            console.log('FORM SUCCESS!')
            window.location = '{% url "home" %}'
        },
        error: function () {

        }
    })
});

and my signup views is like this:

class signup(View):
    def post(self, request):
        fm=UserCreationForm(request.POST)
        if fm.is_valid():
            fm.save()
            return JsonResponse({'status':1})
    fm = UserCreationForm()
    return JsonResponse({'status':0})

    def get(self, request):
        fm = UserCreationForm()
        return render(request, "home/signup.html", {"form":fm})

Main problem is this, when there goes GET request form is showing and we can enter all details to create account and also account created successfully in admin panel. But in POST request, after saving the form, I get json response printed on blank page instead of getting again that signup page.

How this is possible to return to the same page after post request is made?

This is problem: enter image description here

user8193706
  • 2,387
  • 2
  • 8
  • 12
zohaib hassan
  • 11
  • 3
  • `{username=username,password1=password1,password2=password2}` - That's not how objects work. – Andreas Feb 26 '22 at 14:22
  • Sorry, I don’t think you can redirect without refreshing. – raphael Feb 27 '22 at 04:40
  • I think this is possible because i have seen many websites where user signup and then redirects to login or home page without page refresh with help of ajax ,how we can do this? – zohaib hassan Feb 27 '22 at 04:43
  • I did some research, and it's just a guess, but you can try to replace `window.location='{% url "home" %}'` with `window.history.pushState('data', 'Title', {% url "home" %}'`. Check out https://www.30secondsofcode.org/articles/s/javascript-modify-url-without-reload. Good luck! – raphael Feb 27 '22 at 04:56
  • This is not working! – zohaib hassan Feb 27 '22 at 05:03
  • User is registering ,but now this is redirecting to same page! – zohaib hassan Feb 27 '22 at 05:03
  • can you guide me about first parameter this is taking,i think there is some problem – zohaib hassan Feb 27 '22 at 05:11

1 Answers1

0

I am new programmer here, so don't blame me if I'm wrong, but here's my opinion on this, you can try this for your object initialization

var data = {
  'username': $('#id_username').val() ,
  'password1': $('#id_password1').val() ,
  'password2': $('id_password2').val() 
}

console.log(data)

the other reason your value isn't passed in successfully could be due your dataType isn't assigned when you send in your object which you should include in your ajax, which is

dataType: 'json'

Tzong Keat
  • 1
  • 1
  • 3