6

I am having a problem sending a form with Ajax. I have a form which i want to replace with another form asynchronously on clicking the next button.

Here is the script

$(document).ready(function() {
    $('#MY_FORM').submit(function() { 
        $.ajax({
            data: $(this).serialize(), 
            type: $(this).attr('method'),
            url: $(this).attr('action'), 
            success: function(response) { 
                $('#FORM_DIV').html(response); 
            }
        });
        return false;
    });
});

form.py

class CountyForm(forms.Form):
    county = forms.ModelChoiceField(queryset=County.objects.all(),
              empty_label='---Select a county---', required=False)
    other = forms.CharField(required=False)

    def __init__(self, *args, **kwargs):
        super(CountyForm, self).__init__(*args, **kwargs)
        self.helper = FormHelper(self)
        self.helper.html5_required = True
        self.helper.form_id = 'MY_FORM'
        self.helper.add_input(Submit('next', 'Next', css_class='classfinish'))
        self.helper.layout = Layout('county','other')


class WardForm(forms.Form):
    ward = forms.ModelChoiceField(queryset=Ward.objects.all(),
             empty_label='Select a ward')
    other = forms.CharField()

    def __init__(self, *args, **kwargs):
        super(WardForm, self).__init__(*args, **kwargs)
        self.helper = FormHelper(self)
        self.helper.html5_required = True
        self.helper.add_input(Submit('save', 'Finish'))
        self.helper.add_input(Submit('cancel', 'Cancel'))
        self.helper.layout = Layout('ward','other')

views

def location(request):
    if request.is_ajax() :
        wardform = WardForm()
        return HttpResponse(wardform)
    countyform = CountyForm()
    c = {}
    c.update(csrf(request))
    return render(request,'location.html', {'countyform': countyform})

I want when i click next button in the county form, the ward form to appear.

4

1 回答 1

1

这可以通过两种方式解决，我不会介绍 FormWizard，但我会为您提供非常好的文档链接。

我的建议是您应该选择 FormWizard（取决于您拥有的 Django 版本），但我认为它已在 1.2 及更高版本中迁移到 Django，但请不要引用我的话。

在你目前的困境中，你应该按照这个思路做一些事情。

$(document).ready(function() {
    $('#MY_FORM').submit(function() { 
        $.ajax({
            data: $(this).serialize(), 
            type: $(this).attr('method'),
            url: $(this).attr('action'), 
            success: function(response) { 
                $('#FORM_DIV').load('/some/url/to/a/wardform'); //new code 
            }
        });
        return false;
    });
});

视图.py

def ward_form_renderer(request):
    if request.is_ajax():
        ward_form = WardForm()
        #depending on version of django
        context = {'wardform': ward_form}
        context.update(csrf(request))
        render(request, 'wardform_template', c)

这将做的是，它将从您的 Django 视图中拉出一个带有呈现表单的新 html 页面并显示它。基本上你所做的是一个FormWizard。这种方法会有其他副作用，所以我不建议这样做。

我自己也在做这个项目，老实说，痛苦多于快乐。我自己没有尝试过这段代码，但你知道它应该如何工作的要点。

输入表单向导！这对您来说是一个特别好的选择，因为您不必重新定义您的表格，您可以使用您拥有的表格。

这是 FormWizard 文档的链接

祝你好运！

于 2013-03-30T05:42:59.027 回答