尝试使用 JavaScript 自动填充模型字段但它不起作用

本文介绍了尝试使用 JavaScript 自动填充模型字段但它不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个名为 Package 的模型.它有名为 diagnosis、treatment、patient_type、max_fractions 和 total_package 的字段.字段diagnosis、treatment 和patient_type 在单独的类中定义了外键，使得diagnosis、治疗 和patient_type 选择字段.现在我想要的是在选择 treatment 和 patient_type 时自动填充 max_fractions 和 total_package 字段.有人建议我使用 JavaScript 来实现这一点.我尝试并编写了代码，但无济于事.我首先在 max_fractions 字段上尝试它，当我成功做到这一点时，我将为所有需要的字段做它.

谁能帮我解决这个问题，我将不胜感激.

这是我的模型:

类诊断(models.Model):诊断=models.CharField(最大长度=30，空白=真)def __str__(self):返回自我诊断类处理(模型.模型):治疗=models.CharField(最大长度=15，空白=真)def __str__(self):回归自我治疗类 PatientType(models.Model):患者类型=models.CharField(最大长度=15，空白=真)def __str__(self):返回 self.patient_type类包(模型.模型):rt_number=ForeignKey(患者，on_delete=CASCADE)诊断=models.ForeignKey(诊断，on_delete=CASCADE)治疗=外键(治疗，on_delete=级联)患者类型=外键(患者类型，on_delete=CASCADE)max_fractions=models.IntegerField(默认=无)total_package=models.DecimalField(max_digits=10,decimal_places=2)

forms.py:

class DiagnosisForm(ModelForm):元类:模型=诊断字段='__所有__'类 TreatmentForm(ModelForm):元类:模型=治疗字段='__所有__'类 PatientTypeForm(ModelForm):元类:模型=患者类型字段='__所有__'类 PackageForm(ModelForm):元类:型号=包字段='__所有__'小部件={治疗": forms.Select(attrs={onmouseup":mf();"}),患者类型": forms.Select(attrs={onmouseup":mf();"}),}

views.py:

def package_view(request):如果 request.method=='POST':fm_package=PackageForm(request.POST)fm_diagnosis=DiagnosisForm(request.POST)fm_treatment=TreatmentForm(request.POST)fm_patient_type=PatientTypeForm(request.POST)如果 fm_package.is_valid() 和 fm_diagnosis.is_valid() 和 fm_treatment.is_valid() 和 fm_patient_type.is_valid():诊断=fm_diagnosis.save()治疗=fm_treatment.save()患者类型=fm_patient_type.save()包=fm_package.save(假)package.diagnosis=诊断包装.治疗=治疗package.patient_type=patient_type包.save()fm_package=PackageForm()fm_diagnosis=DiagnosisForm()fm_treatment=TreatmentForm()fm_patient_type=PatientTypeForm()返回渲染(请求，'account/package.html'，{'form2':fm_diagnosis，'form3':fm_treatment，'form4':fm_patient_type，'form5':fm_package})别的:fm_package=PackageForm()fm_diagnosis=DiagnosisForm()fm_treatment=TreatmentForm()fm_patient_type=PatientTypeForm()返回渲染(请求，'account/package.html'，{'form2':fm_diagnosis，'form3':fm_treatment，'form4':fm_patient_type，'form5':fm_package})

JavaScript:

function mf(){tt=document.getElementById(id_treatment").value;ptt=document.getElementById("id_patient_type").value;if (tt=="YEO5" && ptt=="RUHPE")document.getElementById("id_max_fractions").value=40;否则如果(tt==D4EG"&&ptt==KILEU")document.getElementById("id_max_fractions").value=40;否则如果(tt==5GED"&&ptt==IMRA")document.getElementById("id_max_fractions").value=40;}

模板:

{% 加载静态 %}<html lang="en"><头><元字符集=UTF-8"><meta http-equiv="X-UA-Compatible";内容=IE=边缘"><script src="{% static 'account/js/myjs.js' %}"></script><title>包裹形式</title><身体><form action=""方法=发布"没有验证>{% csrf_token %}{{form2.as_p}}{{form3.as_p}}{{form4.as_p}}{{form5.as_p}}</表单></html>

网址:

path('package/', views.package_view),

编辑:

我刚刚在模板的源页面中注意到，由于 treatment 和 patient_type 字段是下拉字段，它具有 select 和标签.在 option 标签中，值包含自动递增的数字(因为它是外键绑定字段)而不是我作为文本输入的等效值.我在这里有哪些选择?

处理:<select name="package_form-treatment";required id="id_package_form-treatment">---------</option><option value=1">YEO5</option><option value=2">2DRT</option><option value=3">D4EG</option><option value=4">5GED</option><option value=5"></option></选择></p><p><label for="id_package_form-patient_type">患者类型:</label><select name="package_form-patient_type";required id="id_package_form-patient_type">---------</option><option value=1">RUHPE</option><option value=2">KILEU</option><option value=3">IMRA</option><option value=5"></option></选择></p>

解决方案

您的模板中有多个表单，这些表单具有类似命名的字段.这实际上意味着您的模板中有 duplicate id(甚至 name 属性)，从而导致您获得不正确的值.要解决此问题，您应该为表单添加前缀:

def package_view(request):如果 request.method=='POST':fm_package=PackageForm(request.POST, prefix='package_form')fm_diagnosis=DiagnosisForm(request.POST, prefix='diagnosis_form')fm_treatment=TreatmentForm(request.POST, prefix='treatment_form')fm_patient_type=PatientTypeForm(request.POST, prefix='patient_form')...别的:fm_package=PackageForm(prefix='package_form')fm_diagnosis=DiagnosisForm(prefix='diagnosis_form')fm_treatment=TreatmentForm(prefix='treatment_form')fm_patient_type=PatientTypeForm(prefix='patient_form')...

这将导致您的 id 格式为 id_

-，因此您也需要更改 JavaScript:

function mf(){tt=document.getElementById(id_treatment_form-treatment").value;ptt=document.getElementById(id_patient_form-patient_type").value;if (tt=="YEO5" && ptt=="RUHPE")document.getElementById("id_package_form-max_fractions").value=40;否则如果(tt==D4EG"&&ptt==KILEU")document.getElementById("id_package_form-max_fractions").value=40;否则如果(tt==5GED"&&ptt==IMRA")document.getElementById("id_package_form-max_fractions").value=40;}

I have a model named Package. It has fields named, diagnosis, treatment, patient_type, max_fractions and total_package. The fields diagnosis, treatment and patient_type have foreign keys defined in separate individual classes, making diagnosis, treatment and patient_type choice fields. Now what I want is to auto-populate the max_fractions and total_package fields whenever treatment and patient_type are selected. I was suggested to use JavaScript to accomplish that. I tried and wrote the codes but to no avail. I'm trying it on max_fractions field first, when I succeed in doing that, I will do it for all the needed fields.

Can anyone help me on this, it will be much appreciated.

Here are my models:

class Diagnosis(models.Model):
    diagnosis=models.CharField(max_length=30, blank=True)

    def __str__(self):
        return self.diagnosis

class Treatment(models.Model):
    treatment=models.CharField(max_length=15, blank=True)

    def __str__(self):
        return self.treatment

class PatientType(models.Model):
    patient_type=models.CharField(max_length=15, blank=True)

    def __str__(self):
        return self.patient_type


class Package(models.Model):
    rt_number=ForeignKey(Patient, on_delete=CASCADE)
    diagnosis=models.ForeignKey(Diagnosis, on_delete=CASCADE)
    treatment=ForeignKey(Treatment, on_delete=CASCADE)
    patient_type=ForeignKey(PatientType, on_delete=CASCADE)
    max_fractions=models.IntegerField(default=None)
    total_package=models.DecimalField(max_digits=10, decimal_places=2)

forms.py:

class DiagnosisForm(ModelForm):
    class Meta:
        model=Diagnosis
        fields='__all__'

class TreatmentForm(ModelForm):
    class Meta:
        model=Treatment
        fields='__all__'

class PatientTypeForm(ModelForm):
    class Meta:
        model=PatientType
        fields='__all__'

class PackageForm(ModelForm):
    class Meta:
        model=Package
        fields='__all__'
        widgets={
           "treatment" : forms.Select(attrs={"onmouseup":"mf();"}),
           "patient_type" : forms.Select(attrs={"onmouseup":"mf();"}),
        }

views.py:

def package_view(request):
    if request.method=='POST':
        fm_package=PackageForm(request.POST)
        fm_diagnosis=DiagnosisForm(request.POST)
        fm_treatment=TreatmentForm(request.POST)
        fm_patient_type=PatientTypeForm(request.POST)
        if fm_package.is_valid() and fm_diagnosis.is_valid() and fm_treatment.is_valid() and fm_patient_type.is_valid():
            diagnosis=fm_diagnosis.save()
            treatment=fm_treatment.save()
            patient_type=fm_patient_type.save()
            package=fm_package.save(False)
            package.diagnosis=diagnosis
            package.treatment=treatment
            package.patient_type=patient_type
            package.save()
            fm_package=PackageForm()
            fm_diagnosis=DiagnosisForm()
            fm_treatment=TreatmentForm()
            fm_patient_type=PatientTypeForm()
        return render (request, 'account/package.html', {'form2':fm_diagnosis, 'form3':fm_treatment, 'form4':fm_patient_type, 'form5':fm_package})
    else:
        fm_package=PackageForm()
        fm_diagnosis=DiagnosisForm()
        fm_treatment=TreatmentForm()
        fm_patient_type=PatientTypeForm()
        return render (request, 'account/package.html', {'form2':fm_diagnosis, 'form3':fm_treatment, 'form4':fm_patient_type, 'form5':fm_package})

JavaScript:

function mf(){
    tt=document.getElementById("id_treatment").value;
    ptt=document.getElementById("id_patient_type").value;
    if (tt=="YEO5" && ptt=="RUHPE")
    document.getElementById("id_max_fractions").value=40;
    else if (tt=="D4EG" && ptt=="KILEU")
    document.getElementById("id_max_fractions").value=40;
    else if (tt=="5GED" && ptt=="IMRA")
    document.getElementById("id_max_fractions").value=40;
}

the template:

<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="{% static 'account/js/myjs.js' %}"></script>
    <title>Package Form</title>
</head>
<body>
    <form action="" method="post" novalidate>
        {% csrf_token %}
        {{form2.as_p}}
        {{form3.as_p}}
        {{form4.as_p}}
        {{form5.as_p}}
        <input type="submit" value="Submit">
    </form>
</body>
</html>

URLs:

path('package/', views.package_view),

EDIT:

I just noticed in the source page of my template that as the treatment and patient_type fields are dropdown fields, it has select and option tags. In the option tags, the values contain autoincremented numbers (as it is a foreign key bound field) and not the equivalent values that I entered as text. What are my options here?

<p><label for="id_package_form-treatment">Treatment:</label> <select name="package_form-treatment" required id="id_package_form-treatment">
  <option value="" selected>---------</option>

  <option value="1">YEO5</option>

  <option value="2">2DRT</option>

  <option value="3">D4EG</option>

  <option value="4">5GED</option>

  <option value="5"></option>

</select></p>
<p><label for="id_package_form-patient_type">Patient type:</label> <select name="package_form-patient_type" required id="id_package_form-patient_type">
  <option value="" selected>---------</option>

  <option value="1">RUHPE</option>

  <option value="2">KILEU</option>

  <option value="3">IMRA</option>

  <option value="5"></option>

</select></p>

解决方案

You have multiple forms in your template, these forms have similarly named fields. Which effectively means you have duplicate ids (and even name attributes) in your template, causing you to get incorrect values. To solve this you should add a prefix to your forms:

def package_view(request):
    if request.method=='POST':
        fm_package=PackageForm(request.POST, prefix='package_form')
        fm_diagnosis=DiagnosisForm(request.POST, prefix='diagnosis_form')
        fm_treatment=TreatmentForm(request.POST, prefix='treatment_form')
        fm_patient_type=PatientTypeForm(request.POST, prefix='patient_form')
        ...
    else:
        fm_package=PackageForm(prefix='package_form')
        fm_diagnosis=DiagnosisForm(prefix='diagnosis_form')
        fm_treatment=TreatmentForm(prefix='treatment_form')
        fm_patient_type=PatientTypeForm(prefix='patient_form')
        ...

This will cause your ids to be of the form id_<prefix>-<field_name>, so you would need to change your JavaScript too:

function mf(){
    tt=document.getElementById("id_treatment_form-treatment").value;
    ptt=document.getElementById("id_patient_form-patient_type").value;
    if (tt=="YEO5" && ptt=="RUHPE")
    document.getElementById("id_package_form-max_fractions").value=40;
    else if (tt=="D4EG" && ptt=="KILEU")
    document.getElementById("id_package_form-max_fractions").value=40;
    else if (tt=="5GED" && ptt=="IMRA")
    document.getElementById("id_package_form-max_fractions").value=40;
}

这篇关于尝试使用 JavaScript 自动填充模型字段但它不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！