在引导模式中提交Django表单

本文介绍了在引导模式中提交Django表单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 我刚刚到Django，我试图找出如何提交一个窗体里面的模态。我有两个Django应用程序，前端和登录。前端应用程序提供页面，登录名应该处理表单。我使用脆性表单来呈现表单，但无法获取表单。一直在努力这几天。阅读许多文章，仍然无法弄清楚。任何帮助将非常感谢。非常感谢。我正在使用Django 1.6版

前端应用的urls.py：

from django.conf.urls import patterns，url from django.contrib import admin from frontend import views from login.views import registration urlpatterns = pattern（''， url（r'^ $'，views.index，name ='index'）， url（r'^ about / $'，views.about，name ='about '）， url（r'^ contact / $'，views.contact，name ='contact'）， url（r'^ $'，'index'，name ='index'） ， url（r'^ $'，views.registration，name ='register'），）

前端应用的views.py：

from django.template import RequestContext from django .shortcuts import log_to_response from login.forms import RegistrationForm from login.forms import LoginForm from login.views import registration def index（request）： return render_to_response（'index.h tml'，{'regform'：RegistrationForm（），'loginform'：LoginForm（）}） def about（request）： return render_to_response（'about.html '） def contact（request）： return render_to_response（'contact.html'）

登录应用程序的urls.py：

从django.conf.urls导入模式，url 从登录导入视图 urlpatterns = patterns（''， url（r'^ register / $'，views.registration，name ='index.html'） ）

登录应用的views.py：

$从django.template导入RequestContext 从django.shortcuts导入render_to_response 从login.forms导入注册表

b $ b def注册（请求）： 上下文= RequestContext（请求） 已注册= False 如果request.method =='POST'： user_form =注册表单（request.POST） user = user_form.save（） user.set_password（user.password） user.save（） registered = True 其他： user_form = RegistrationForm（） 返回render_to_response（'index.html'，{'regform'：user_form}，上下文） def login（request）： context = RequestContext ） login_form = LoginForm（）返回render_to_response（'index.html'，{loginform：login_form}，上下文）

登录应用程序的forms.py：

从django.contrib.auth.models导入用户 from django import forms from crispy_forms.helper import FormHelper from crispy_forms.layout import提交，布局，字段来自crispy_forms.bootstrap import（PrependedText，PrependedAppendedText，FormActions） from login.models import User class RegistrationForm（forms.ModelForm）： password = forms.CharField（widget = forms.PasswordInput（）） class Meta： model = User fields =（'username'，'email'，'first_name' ，'last_name'，'password'） helper = FormHelper（） helper.form_method ='POST' helper.add_input（Submit（'save'，'save'，css_class =' btn-primary'）） class LoginForm（forms.ModelForm）： password = forms.CharField（widget = forms.PasswordInput（）） class Meta ： model = User fields =（'username'，'password'） @property def helper（self）： helper = FormHelper（） helper.form_method ='POST' helper.add_input（Submit（'save'，'save'，css_class ='btn-primary'）） return helper

Index.html模式：

< div class =modal fadeid =myModaltabindex = - 1role =对话框aria-labelledby =myModalLabelaria-hidden =true> < div class =modal-dialog> < div class =modal-content> < div class =modal-header> < button type =buttonclass =closedata-dismiss =modalaria-hidden =true>& times;< / button> < h4 class =modal-titleid =myModalLabel> Register< / h4> < / div> < div class =modal-body> < ul class =nav nav-tabs> < li class =active>< a href =＃tab1data-toggle =tab>登录< / a>< / li> < li>< a href =＃tab2data-toggle =tab>注册< / a>< / li> < / ul> < form action =method = post> < div class =tab-content> < div class =tab-pane activeid = tab1> {％crispy loginform％} < / div> < div class =tab-paneid =tab2 {％crispy regform％} < / div> < / form> < / div> < / div> < div class =modal-footer> < button type =buttonclass =btn btn-defaultdata-dismiss =modal >取消< / button> < button type =buttonclass =btn btn-primary>提交< / button> < / div> < / div> < / div> < / div>

使用Ajax尝试模式（剪切）：

< div class =modal-footer> < button type =buttonclass =btn btn-defaultdata-dismiss =modal>取消< / button> < button id =registertype =buttonclass =btn btn-primary> Submit< / button> < script> $（'＃register'）。click（function（）{ console.log（'am i called'）; $ .ajax（{类型：POST， url：/ register /， dataType：json， data：$（＃login）。serialize（），成功：function（data）{ alert（data.message）; } }）; }）; < / script>

Ajax请求的登录视图：

def addUser（request）：如果request.is_ajax（）和request.POST： data = {request.POST.get（'item'）} return HttpResponse（json.dumps（data），content_type ='application / json'） else： raise Http404

根据请求的呈现HTML for Modal：

<！ - 模态 - > < div class =modal fadeid =myModaltabindex = - 1role =dialogaria-labelledby =myModalLabelaria-hidden =true> < div class =modal-dialog> < div class =modal-content> < div class =modal-header> < button type =buttonclass =closedata-dismiss =modalaria-hidden =true>& times;< / button> < h4 class =modal-titleid =myModalLabel> Register< / h4> < / div> < div class =modal-body> < ul class =nav nav-tabs> < li class =active>< a href =＃tab1data-toggle =tab>登录< / a>< / li> < li>< a href =＃tab2data-toggle =tab>注册< / a>< / li> < / ul> < form id =loginaction =/ frontend / register /method =POST> < div class =tab-content> < div class =tab-pane activeid =tab1>

用户名*必填。 30个字符以内。字母，数字和@ /。/ + / - / _字符

密码*

< / div> < div class =tab-paneid =tab2>

用户名*必填。 30个字符以内。字母，数字和@ /。/ + / - / _字符

电子邮件地址 名字 姓氏 密码*

< / div> < / form> < / div> < / div> < div class =modal-footer> < button type =buttonclass =btn btn-defaultdata-dismiss =modal>取消< / button> < button id =registertype =buttonclass =btn btn-primary> Submit< / button> < script> $（'＃register'）。click（function（）{ console.log（'am i called'）; $ .ajax（{类型：POST， url：/ register /， data：$（regform）.serialize（）， success：function（data）{ if（！（data ['success']））{ $（example_form）.replaceWith（data ['form_html']）; } else { $（example_form）.find（'。success-message'）。show（）; } }，错误：function（）{ $（example_form）.find（'。error-message'）。show（）} } }）; }）; < / script> < / div> < / div> < / div> < / div>

更新Ajax：

<脚本> $（document）.ready（function（）{ var frm = $（'＃id-registration'）; frm.submit（function（e）{ $ .ajax（{ type：frm.attr（'method'），<！ - 获取表单的method属性（在login / forms.py中定义 - > url：frm.attr（'action'），<！ - 获取表单的action属性（在login / forms.py - > 数据中定义：$（frm）.serialize（） ，<！ - 包数据 - > 成功：function（data）{<！ - 如果成功返回消息 - > if（！（data ['success' ]））{ console.log（'ifcalled'） $（frm）.replaceWith（data ['form_html']）;<！ - 发送带有错误的替换表单 - > } else { console.log（'elseCalled'） $（＃div-form）。html（谢谢！）; // $（frm）.find（'。success-message'）。show（）; } }， error：funct离子（数据）{<！ - 否打印错误 - > $（frm）.find（'。error-message'）。show（）} }）; e.preventDefault（）; <！ - 问题在这里，验证是错误的所有方式 - > }）; }）; < / script>

更新：表单正在提交给数据库。但是形式验证不起作用。 if / else控件似乎总是验证false。如果我删除form.submit（）。它的功能和显示窗体错误，但页刷新。

更新的views.py：

def addUser（request） form = RegistrationForm（data = request.POST或None）如果form.is_valid（）：＃实际上可以通过AJAX保存并返回成功代码 form.save（） return {'success'：True} form_html = render_crispy_form（form） return {'success'：False，'form_html'：form_html

更新Forms.py：

class RegistrationForm（forms.ModelForm）： password = forms.CharField（widget = forms.PasswordInput（）） class Meta： model = User fields =（'username'，'email'，'first_name'，'last_name'，'password'） def __init __（self，* args，** kwargs）： super（RegistrationForm ，self）.__ init __（* args，** kwargs） self.helper = FormHelper（） self.helper.form_id ='id-registration' self.helper.form_class ='blueForms' self.helper.form_method ='post' self.helper.form_action ='/ register /' self.helper.add_input（Submit（'提交'，'提交'））

问题已解决：

< script type =text / javascriptsrc =ajax.googleapis/ajax/libs/jquery/1.8.0/ jquery.min.js>< /脚本> < script type =text / javascriptsrc ={％static'js / jquery-validation-1.11.1 / jquery.validate.js'％}>< / script> < script> $（document）.ready（function（）{ var frm = $（'＃id-registration'）; $（'＃id-registration'）。validate b $ b规则：{用户名：{required：true}，电子邮件：{必需：true}，密码：{必需：true} }， submitHandler：function（）{ $ .ajax（{// begin type：'POST'，<！ - 获取表单的方法属性（在login / forms.py - > url：frm.attr（'action'）中定义，<！ - 获取表单的action属性（在login / forms.py - >中定义） data：$（frm）.serialize（），<！ - 打包数据 - > success：function（data）{ $（frm）.hide ; $（＃div-form）。html（< h3 style ='text-align：center;'>谢谢，注册！< / h3>）; }，错误：function（data）{<！ - else print error - > $（＃div-form）。html（Failure！ ）; } // end错误}）; // end ajax return false; } }）; }）; < / script>

解决方案

在第一种情况下，我会启动您的浏览器开发人员工具（例如Firefox中的Firebug）。如果您的POST请求被发送，请在网络选项卡中密切监视。

发送请求后，您可以检查您的请求的内容和答案。这有助于确定您的表单是否从输入中捕获所有数据，或者您可能遇到urls.py的问题。

如果表单正确提交（状态200），您可以开始调试Django应用程序。

Hey guys Im new to Django and I am trying to figure out how to submit a form inside of a modal. I have two Django apps in question, frontend and login. The frontend app delivers the page, and the login is supposed to process the form. I am using crispy forms to render the forms but cannot get the forms to submit. Been struggling with this for a few days. Read through many posts on this and still can't figure it out. Any help will greatly be appreciated. Thank you so much. I'm using Django version 1.6

frontend app's urls.py:

from django.conf.urls import patterns, url from django.contrib import admin from frontend import views from login.views import registration urlpatterns = patterns('', url(r'^$', views.index, name='index'), url(r'^about/$', views.about, name='about'), url(r'^contact/$', views.contact, name='contact'), url(r'^$', 'index', name='index'), url(r'^$',views.registration, name='register'), )

frontend app's views.py:

from django.template import RequestContext from django.shortcuts import render_to_response from login.forms import RegistrationForm from login.forms import LoginForm from login.views import registration def index(request): return render_to_response('index.html', {'regform':RegistrationForm(),'loginform': LoginForm()} ) def about(request): return render_to_response('about.html') def contact(request): return render_to_response('contact.html')

login apps's urls.py:

from django.conf.urls import patterns, url from login import views urlpatterns = patterns('', url(r'^register/$', views.registration, name='index.html') )

login app's views.py:

from django.template import RequestContext from django.shortcuts import render_to_response from login.forms import RegistrationForm def registration(request): context = RequestContext(request) registered = False if request.method == 'POST': user_form = RegistrationForm(request.POST) user = user_form.save() user.set_password(user.password) user.save() registered = True else: user_form = RegistrationForm() return render_to_response('index.html', {'regform': user_form}, context) def login(request): context = RequestContext(request) login_form = LoginForm() return render_to_response('index.html', {loginform: login_form}, context)

login app's forms.py:

from django.contrib.auth.models import User from django import forms from crispy_forms.helper import FormHelper from crispy_forms.layout import Submit, Layout, Field from crispy_forms.bootstrap import (PrependedText, PrependedAppendedText, FormActions) from login.models import User class RegistrationForm(forms.ModelForm): password = forms.CharField(widget=forms.PasswordInput()) class Meta: model = User fields = ('username', 'email', 'first_name','last_name','password') helper = FormHelper() helper.form_method = 'POST' helper.add_input(Submit('save', 'save', css_class='btn-primary')) class LoginForm(forms.ModelForm): password = forms.CharField(widget=forms.PasswordInput()) class Meta: model = User fields = ('username', 'password') @property def helper(self): helper = FormHelper() helper.form_method = 'POST' helper.add_input(Submit('save', 'save', css_class='btn-primary')) return helper

Index.html modal:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h4 class="modal-title" id="myModalLabel">Register </h4> </div> <div class="modal-body"> <ul class="nav nav-tabs"> <li class="active"><a href="#tab1" data-toggle="tab">Login</a></li> <li><a href="#tab2" data-toggle="tab">Register</a></li> </ul> <form action="" method=post"> <div class="tab-content"> <div class="tab-pane active" id="tab1"> {% crispy loginform %} </div> <div class="tab-pane" id="tab2"> {% crispy regform %} </div> </form> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> <button type="button" class="btn btn-primary">Submit</button> </div> </div> </div> </div>

Modal with Ajax attempt(snip):

<div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> <button id="register" type="button" class="btn btn-primary">Submit</button> <script> $('#register').click(function(){ console.log('am i called'); $.ajax({ type: "POST", url: "/register/", dataType: "json", data: $("#login").serialize(), success: function(data) { alert(data.message); } }); }); </script>

Login view for Ajax request:

def addUser(request): if request.is_ajax() and request.POST: data = {request.POST.get('item')} return HttpResponse(json.dumps(data), content_type='application/json') else: raise Http404

As Requested Rendered HTML For Modal:

<!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h4 class="modal-title" id="myModalLabel">Register </h4> </div> <div class="modal-body"> <ul class="nav nav-tabs"> <li class="active"><a href="#tab1" data-toggle="tab">Login</a></li> <li><a href="#tab2" data-toggle="tab">Register</a></li> </ul> <form id="login" action="/frontend/register/" method="POST"> <div class="tab-content"> <div class="tab-pane active" id="tab1">

Username* Required. 30 characters or fewer. Letters, numbers and @/./+/-/_ characters

Password*

</div> <div class="tab-pane" id="tab2">

Username* Required. 30 characters or fewer. Letters, numbers and @/./+/-/_ characters

Email address First name Last name Password*

</div> </form> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> <button id="register" type="button" class="btn btn-primary">Submit</button> <script> $('#register').click(function(){ console.log('am i called'); $.ajax({ type: "POST", url: "/register/", data: $(regform).serialize(), success: function(data) { if (!(data['success'])) { $(example_form).replaceWith(data['form_html']); } else { $(example_form).find('.success-message').show(); } }, error: function () { $(example_form).find('.error-message').show() } } }); }); </script> </div> </div> </div> </div>

Update Ajax:

<script> $(document).ready(function() { var frm = $('#id-registration'); frm.submit(function (e) { $.ajax({ type: frm.attr('method'), <!-- Get the form's method attribute(defined in login/forms.py --> url: frm.attr('action'), <!-- Get the form's action attribute(defined in login/forms.py --> data: $(frm).serialize(), <!-- package the data --> success: function (data) { <!-- if success return message --> if (!(data['success'])) { console.log('ifcalled') $(frm).replaceWith(data['form_html']); <!-- send replacement form with errors --> } else{ console.log('elseCalled') $("#div-form").html("Thanks!"); // $(frm).find('.success-message').show(); } }, error: function(data) { <!-- else print error --> $(frm).find('.error-message').show() } }); e.preventDefault(); <!-- problem is here, validation is all ways false --> }); }); </script>

Update: The form is now being submitted to the database. However form Validation is not functioning. The if/else control seems to always validate false. If I remove form.submit(). It functions and shows form errors, but the page refreshes.

updated views.py:

def addUser(request): form = RegistrationForm(data=request.POST or None) if form.is_valid(): # You could actually save through AJAX and return a success code here form.save() return {'success': True} form_html = render_crispy_form(form) return {'success': False, 'form_html': form_html}

updated Forms.py:

class RegistrationForm(forms.ModelForm): password = forms.CharField(widget=forms.PasswordInput()) class Meta: model = User fields = ('username', 'email', 'first_name','last_name','password') def __init__(self, *args, **kwargs): super(RegistrationForm, self).__init__(*args, **kwargs) self.helper = FormHelper() self.helper.form_id = 'id-registration' self.helper.form_class = 'blueForms' self.helper.form_method = 'post' self.helper.form_action = '/register/' self.helper.add_input(Submit('submit', 'Submit'))

The Problem has been resolved:

<script type="text/javascript" src="ajax.googleapis/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script type="text/javascript" src="{% static 'js/jquery-validation- 1.11.1/jquery.validate.js' %}"></script> <script> $(document).ready(function () { var frm = $('#id-registration'); $('#id-registration').validate({ rules: { username: {required: true}, email: {required: true}, password: {required: true} }, submitHandler: function(){ $.ajax({//begin type: 'POST', <!-- Get the form's method attribute(defined in login/forms.py --> url: frm.attr('action'), <!-- Get the form's action attribute(defined in login/forms.py --> data: $(frm).serialize(), <!-- package the data --> success: function(data){ $(frm).hide(); $("#div-form").html("<h3 style='text-align:center;'>Thank you, for Registering!</h3>"); }, error: function(data) { <!-- else print error --> $("#div-form").html("Failure!"); }//end error });//end ajax return false; } }); }); </script>

解决方案

In a first instance I would fire up your Browser Developer Tools (e.g. Firebug in Firefox). In the Network tab monitor closely if your POST request is sent or not.

Once the request is sent, you can inspect the content and answer of your request. This helps to identify if your form catches all the data from the inputs, or if you might have trouble with your urls.py.

In case the form is submitted correctly (Status 200), you can start debugging your Django App.