在引导模式中提交Django表单 [英] Submitting a Django Form in a Bootstrap Modal

问题描述

我刚刚到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 =http://ajax.googleapis.com/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="http://ajax.googleapis.com/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.

这篇关于在引导模式中提交Django表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！