如何在 django 中添加 javascript 文件到我的 ModelForm 中
How can I add javascript file to my ModelForm in django?
我想根据下拉列表的选择显示单独的div标签,我正在使用ModelForm来创建我的模板。我不确定如何在我的模型表单中添加javascript。
forms.py
class CustomerForm(forms.ModelForm):
name = forms.CharField(widget=forms.TextInput(attrs={'placeholder': 'Customer Name '}))
address = forms.CharField(widget=forms.TextInput(attrs={'placeholder': 'Customer Address'}))
phone_number = forms.IntegerField(widget=forms.TextInput(attrs={'placeholder': 'Customer Phone Number '}))
email = forms.EmailField(widget=forms.TextInput(attrs={'placeholder': 'Customer Email'}))
contact_person = forms.CharField(widget=forms.TextInput(attrs={'placeholder': 'Contact person'}))
# amc = forms.BooleanField(widget=forms.TextInput(attrs={'placeholder': 'type "amc" if the customer is in AMC'}))
amc_date = forms.DateField(widget=forms.TextInput(attrs={'placeholder': 'ex: Jan 20, 1996','id':'disabledInput'}))
amc_product = forms.CharField(widget=forms.TextInput(attrs={'placeholder': 'Products listed in AMC'}))
# warranty = forms.BooleanField(widget=forms.TextInput(attrs={'placeholder': 'Type "warranty" if the customer is in Warranty'}))
warranty_date = forms.DateField(widget=forms.TextInput(attrs={'placeholder': 'ex: Jan 20, 1996'}))
warranty_product_list = forms.CharField(widget=forms.TextInput(attrs={'placeholder': 'Products listed in warranty'}))
# on_call = forms.BooleanField(widget=forms.TextInput(attrs={'placeholder': 'Type "oncall/on call" if it is On Call'}))
# support = forms.CharField(widget=forms.TextInput(attrs={'placeholder':'Enter: amc/warranty/oncall'}))
support = forms.ChoiceField(choices=support_choice, required=True, widget = forms.Select(attrs={'onchange' : 'customer()'}))
class Meta:
model = Customer
fields = ['name','address','phone_number','email','contact_person','support','amc_date','amc_product','warranty_date',
'warranty_product_list']
当从"支持"选项中选择amc时,我想显示"amc_date"和"amc_product",当从"支持"选项中选择"保修"时,则显示"warranty_date"和"warranty_product_list"。
customer_detail.html
<script type="text/javascript" src="{% static 'js/customer_detail.js' %}"></script>
<form method="post" action="" enctype="multipart/form-data">
{% csrf_token %}
{{ form|crispy }}
<input type="submit" class="btn btn-default " value="Submit">
</form>
我不确定如何在我的模型表单中使用Javascript,请帮忙。
Django
方式将是
class CustomerForm(forms.ModelForm):
.
.
class Media:
js = ('js/customer_detail.js',)
然后像{{<yourformname>.media}}
一样将其包含在模板中,并在该customer_detail.js
中编写JavaScript代码
我还没有测试过这个,但这就是它应该的样子(我在这里使用jQuery
)。
forms.py
class CustomerForm(forms.ModelForm):
name = forms.CharField(widget=forms.TextInput(attrs={'placeholder': 'Customer Name '}))
address = forms.CharField(widget=forms.TextInput(attrs={'placeholder': 'Customer Address'}))
phone_number = forms.IntegerField(widget=forms.TextInput(attrs={'placeholder': 'Customer Phone Number '}))
email = forms.EmailField(widget=forms.TextInput(attrs={'placeholder': 'Customer Email'}))
contact_person = forms.CharField(widget=forms.TextInput(attrs={'placeholder': 'Contact person'}))
# amc = forms.BooleanField(widget=forms.TextInput(attrs={'placeholder': 'type "amc" if the customer is in AMC'}))
amc_date = forms.DateField(widget=forms.TextInput(attrs={'placeholder': 'ex: Jan 20, 1996','id':'disabledInput'}))
amc_product = forms.CharField(widget=forms.TextInput(attrs={'placeholder': 'Products listed in AMC'}))
# warranty = forms.BooleanField(widget=forms.TextInput(attrs={'placeholder': 'Type "warranty" if the customer is in Warranty'}))
warranty_date = forms.DateField(widget=forms.TextInput(attrs={'placeholder': 'ex: Jan 20, 1996'}))
warranty_product_list = forms.CharField(widget=forms.TextInput(attrs={'placeholder': 'Products listed in warranty'}))
# on_call = forms.BooleanField(widget=forms.TextInput(attrs={'placeholder': 'Type "oncall/on call" if it is On Call'}))
# support = forms.CharField(widget=forms.TextInput(attrs={'placeholder':'Enter: amc/warranty/oncall'}))
support = forms.ChoiceField(choices=support_choice, required=True)
class Meta:
model = Customer
fields = ['name','address','phone_number','email','contact_person','support','amc_date','amc_product','warranty_date',
'warranty_product_list']
customer_detail.html
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<form method="post" action="" enctype="multipart/form-data">{% csrf_token %}
{{ form|crispy }}
<input type="submit" class="btn btn-default" value="Submit">
</form>
<script>
$(function(){
function hideInputs() {
$("#id_amc_date").hide();
$("#id_amc_product").hide();
$("#id_warranty_date").hide();
$("#id_warranty_product_list").hide();
}
$("#id_support").on('change', function(){
var val = $("#id_support").val();
if (val == 'amc') {
$("#id_amc_date").show();
$("#id_amc_product").show();
} else if (val == 'warranty') {
$("#id_warranty_date").show();
$("#id_warranty_product_list").show();
} else {
hideInputs();
}
});
hideInputs();
});
</script>
</html>
相关文章:
- 我的外部js文件无法加载
- 如何使用php文件中的GET来获取我在.js文件中声明的变量
- 如何检查Json文件更新,如果更新了,则用更新的数据刷新我的页面
- MVC正在忽略我的Javascript文件
- 为什么不't我的ruby代码与javascript文件一起插入
- 清单文件中的update_url禁用了我的chrome扩展
- 我可以访问量角器配置文件中的参数吗
- 无法在我的JSON文件中发布数据
- 为什么我的get-requesttoserver.js返回离子云9上的实际文件
- 如何使用webpack将全局JS文件包含到我的React项目中
- 我的组件的Emberjs特定的SCSS文件
- 尝试使用Node.js动态路由从IMDB中抓取电影内容.但是在我的output.json文件中没有定义
- 我如何知道js文件之间的javascript应用程序代码流
- 我尝试使用我的本地js文件来获取远程IP数据,但它不起作用
- 如何在PHP中使用url保护我的图像和文件夹免受直接访问
- 为什么当我在带有锚点的页面之间移动时,Rails不重新加载我的javascript文件
- 如何使用gulp-inject将文件的内容插入到我的index.html中
- 点击功能无法处理我的所有文件
- 我可以通过点击html文件中的按钮来记录我的屏幕/网页吗
- 我的代码在<脚本>标记,但没有'不能在外部文件中工作