Django / Jquery / Javascript -如何使用url参数预填充表单(自动填充表单)
Django / Jquery / Javascript - How to prepopulate form with url parameters (autofill the form)
我想给一些人发送链接比如:
http://www.example.com/form/?q=example@me.com如果他们点击链接,它将转到页面/表单/,其中有多个字段的表单。
我想用q字符串预先填充它它将填充"email"输入
字段,在字符串"example@me.com"中指定电子邮件。
网站是在Django中完成的,想问一下实现这个的最好方法是什么
我应该使用JS, Jquery, Django?不知道从哪里开始。
想要这样的东西吗:
http://support.unbounce.com/entries/307658-Can-I-pre-populate-a-form-with-URL-parameters-VIDEO-但是在我的网站上。有人可以帮助简单的形式和例子吗?
感谢models.py
from django.db import models
class Example(models.Model):
username = models.CharField(max_length=200, blank=True)
email = models.CharField(max_length=200)
image = models.ImageField(upload_to='profiles', blank=True)
text = models.CharField(max_length=200, blank=True)
forms.py
from django import forms
from models import Example
class ExampleForm(forms.ModelForm):
class Meta:
model = Example
views.py
from django import forms
from models import Example
from forms import ExampleForm
from django.template import RequestContext, Context
from django.core.context_processors import csrf
from django.shortcuts import render_to_response
from django.shortcuts import render_to_response, get_object_or_404
from django import http
import os
import json
from django.http import HttpResponse
from django.http import HttpResponseRedirect
from django.conf import settings
def index(request):
if request.method == "POST":
form = ExampleForm(request.POST, request.FILES)
if form.is_valid():
form.save()
return http.HttpResponseRedirect('/success/')
else:
form = ExampleForm()
return render_to_response('index.html', {'title': 'Example Form', 'form': form},context_instance=RequestContext(request))
urls . py
from django.conf.urls import patterns, include, url
from django.conf import settings
from django.contrib import admin
admin.autodiscover()
urlpatterns = patterns('',
url(r'^$', 'signup.views.index', name='index'),
url(r'^admin/', include(admin.site.urls)),
)
索引模板
<form id='add_cat' method='post' enctype="multipart/form-data">{% csrf_token %}
<input id="id_username" maxlength="200" name="username" type="text" placeholder="username">
<input id="id_email" maxlength="200" name="email" type="text" >
<input id="id_picture" maxlength="200" name="picture" type="text">
<textarea id="id_text" row="3" name="first_text" placeholder="Type something…"></textarea>
<input id="add_cat_btn" type='submit' value="save">
</form>
request.GET.copy()
会给你一个字典,并把它作为initial
的字典传递给你。
initial = request.GET.copy()
form = MyForm(initial=initial)
它将填充表单中存在的字段。
如果你想让GET
和POST
互换,
def index(request):
initial = {}
if request.GET:
initial = request.GET.copy()
form = ExampleForm(initial=initial)
if request.method == "POST":
if request.POST:
initial = request.POST.copy()
form = ExampleForm(request.POST, request.FILES, initial=initial)
if form.is_valid():
form.save()
return http.HttpResponseRedirect('/success/')
return render_to_response('index.html', {'title': 'Example Form', 'form': form },context_instance=RequestContext(request))
你可以在Django或JavaScript中实现。
这是一个JavaScript解决方案使用getParameterByName
从SO问题。
在JS中这样做的好处是它可以让你缓存服务器响应,而不需要对每个用户请求进行服务器计算。
给你的电子邮件表单字段一个ID,例如emailfield
,然后你可以这样做
var emailField = document.getElementById("emailfield");
emailField.value = getParameterByName("email"); // "q" in your example url
在ready或onload处理程序中(或简单地放在body部分的最后一个脚本标记中)
这是小提琴
它不工作,因为它把代码放在iframe,所以你不能访问GET参数,如果你检查iframe,你可以看到它工作:
下面是一个例子http://fiddle.jshell.net/FA9fQ/show/light/?email=hello
karthikr的答案是正确的。对于任何想在Django的基于类的视图中实现这一点的人来说,可以使用get_initial
方法。下面是一个可重用的示例:
class RequestInitialFormViewMixin(object):
"""Pass Request.GET as initial values to Form"""
def get_initial(self):
initial = super(RequestInitialFormViewMixin, self).get_initial()
if self.request.GET:
for key, value in self.request.GET.items(): # QueryDict, each value is a list
if len(value) == 1:
initial[key] = value[0]
else:
initial[key] = value
return initial
class MyFormView(RequestInitialFormViewMixin, FormView):
# ...
请注意,request.GET
返回一个QueryDict,其中包含每个值的列表。
- 单击鼠标,用MySQL数据填充html表单输入字段
- 通过浏览器对表单自动填充做出反应
- 谷歌表单-根据分配给谷歌应用程序的工作为商业用户预先填充多项选择列表
- 提交表单时,Javascript(JQuery)不会在文本区域中填充内容
- Javascript未在开发服务器上填充Perl表单
- 如何在js中实现树结构类型的表单动态填充
- CasperJS填充表单-输入名称有方括号
- 如何使用多维JSON数据重新填充表单
- 试图用cookie中的信息填充表单
- 如何在刷新时重新填充表单中的复选框并将表单值发布到页面
- 单击一个数据表,填充第二个数据表
- 将表单填充到要与ngMessages一起使用的templateURL中
- jQuery表单填充器不工作
- Rails 输入表单填充了 jQuery .val(),但参数中不存在数据
- 使用自动填充表单控件(自动完成属性),加快表单填充速度
- HTML5地理位置地址表单填充器未捕获语法错误:意外的标记<
- 使用AJAX调用进行表单填充和验证
- 在检索数据时,表单填充然后清除
- 基于浏览器的客户端表单填充
- 从Google表单填充HTML表单