首页 > 解决方案 > 通过单击按钮将模型中的数据加载到 HTML 文件中

问题描述

当用户单击加载某个 bla 数字时,我正在尝试将数据库中的数据加载到相同的字段中。我保存数据很好,我可以在控制台上看到它,但我如何让它显示在表单的字段中?这是我所拥有的: 型号:

class Overview(models.Model):
    application_path = models.CharField(max_length=100)
    review_decision = models.CharField(max_length=100)
    bla_number = models.CharField(primary_key=True, max_length=100)
    applicant_name = models.CharField(max_length=200)
    prop_name = models.CharField(max_length=200)
    non_prop_name = models.CharField(max_length=500)
    obp_name = models.CharField(max_length=500)
    dosage_form = models.CharField(max_length=500)
    strength_potency = models.CharField(max_length=500)
    route_administration = models.CharField(max_length=500)
    primary_assessor = models.CharField(max_length=500)
    secondary_assessor = models.CharField(max_length=500)
    review_iteration = models.CharField(max_length=500)
    review = models.CharField(max_length=500)
    designation = models.CharField(max_length=500)

    def __str__(self):
        return self.applicant_name

    class Meta:
        db_table = 'kasaapp_overview'

Form that is being saved is coming from this file:
<form name="overviewForm" method="POST" action="overview#" id="overviewForm" onsubmit="return false">
        {% csrf_token %}
        <!-- NDA Basic Information-->
        <div class="p-3"></div>
        <div class="container">
            <div class="row">
                <div class="col-lg-3">
                    <div>
                        <label>Application path:</label>
                    </div>
                </div>
                <div class="col-lg-9">
                    <select class="form-control form-control-sm" name="application_path" id="application_path">
                        <option selected disabled>Select option</option>
                        <option>BLA under 351(a)</option>
                        <option>BLA under 351(k)</option>
                        <option>NDA under 505(b)(1)</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="p-3"></div>
        <div class="container review">
            <div class="row">
                <div class="col-lg-6 custom-control custom-radio">
                    <input type="radio" name="review" id="radio1" class="custom-control-input review"
                           value="Priority Review">
                    <label class="custom-control-label" for="radio1">Priority Review</label>
                </div>
                <div class="col-lg-6 custom-control custom-radio">
                    <input type="radio" name="review" id="radio2" class="custom-control-input review"
                           value="Standard Review">
                    <label class="custom-control-label" for="radio2">Standard Review</label>
                </div>

            </div>
        </div>

        <div class="p-3"></div>
        <div class="container">
            <div class="row">
                <div class="col-lg-3">
                    <label for="bla_number">BLA #:</label>
                </div>
                <div class="col-lg-3">
                    <input id="bla_number" name="bla_number" type="text" placeholder="BLA #"
                           class="form-control form-control-sm" value="{{bla_number}}">
                </div>
                <div class="col-lg-3">
                    <label for="applicant_name">Applicant name:</label>
                </div>
                <div class="col-lg-3">
                    <input id="applicant_name" name="applicant_name" type="text" class="form-control form-control-sm">
                </div>
            </div>
            <div class="p-3"></div>
            <div class="row">
                <div class="col-lg-3">
                    <label>Proprietary name:</label>
                </div>
                <div class="col-lg-3">
                    <input type="text" class="form-control form-control-sm" name="prop_name" id="prop_name">
                </div>
                <div class="col-lg-3">
                    <label>Non-Proprietary name/USAN:</label>
                </div>
                <div class="col-lg-3">
                    <input type="text" class="form-control form-control-sm" name="non_prop_name" id="non_prop_name">
                </div>
            </div>
            <div class="p-3"></div>
            <div class="row">
                <div class="col-lg-3">
                    <label>OBP systematic name:</label>
                </div>
                <div class="col-lg-3">
                    <input type="text" class="form-control form-control-sm" name="obp_name" id="obp_name">
                </div>
                <div class="col-lg-3">
                    <label>Dosage form:</label>
                </div>
                <div class="col-lg-3">
                    <input type="text" class="form-control form-control-sm" name="dosage_form" id="dosage_form">
                </div>
            </div>
            <div class="p-3"></div>
            <div class="row">
                <div class="col-lg-3">
                    <label>Strength potency:</label>
                </div>
                <div class="col-lg-3">
                    <input type="text" class="form-control form-control-sm" name="strength_potency"
                           id="strength_potency">
                </div>
                <div class="col-lg-3">
                    <label>Route administration:</label>
                </div>
                <div class="col-lg-3">
                    <input type="text" class="form-control form-control-sm" name="route_administration"
                           id="route_administration">
                </div>
            </div>
            <div class="p-3"></div>
            <div class="row">
                <div class="col-lg-3">
                    <label>Primary Assessor:</label>
                </div>
                <div class="col-lg-3">
                    <input type="text" class="form-control form-control-sm" name="primary_assessor"
                           id="primary_assessor">
                </div>
                <div class="col-lg-3">
                    <label>Seconday Assessor:</label>
                </div>
                <div class="col-lg-3">
                    <input type="text" class="form-control form-control-sm" name="secondary_assessor"
                           id="secondary_assessor">
                </div>
            </div>

        </div>
    <!-- Selection -->
    <div class="p-3"></div>
    <div class="container review">
        <div class="row">
            <div class="col-lg-6">
                <input type="checkbox" id="1" value="Orphan Drug" name="designation" class="designation">
                <label>Orphan Drug</label>
            </div>
            <div class="col-lg-6">
                <input type="checkbox" id="2" value="Breakthrough Therapy Designation" name="designation"
                       class="designation">
                <label>Breakthrough Therapy Designation</label>
            </div>

        </div>
    </div>

    <!-- Review Iterations -->


    <div class="review container">           <!-- divider for review iterations starts -->
        <h6>
            Review cycle
        </h6>
        <div class="p-3"></div>
        <div class="row">
            <div class="col-lg-4">
                <label>Review Iteration</label>
            </div>
            <div class="col-lg-4">
                <label>Reviewer Decision</label>
            </div>
            <div class="col-lg-4">
                <label>Submission Date</label>
            </div>
        </div>
        <div class="p-3"></div>
        <div class="row">
            <div class="col-lg-4">
                <select class="form-control form-control-sm" name="review_iteration" id="review_iteration">
                    <option>Original Review</option>
                    <option>Secondary Review</option>
                    <option>Third Review</option>
                </select>
            </div>
            <div class="col-lg-4">
                <select class="form-control form-control-sm" name="review_decision" id="review_decision">
                    <option>IR</option>
                    <option>DRL</option>
                    <option>Inadequate Minor</option>
                    <option>Inadequate Major</option>
                    <option>Adequate</option>
                </select>
            </div>
            <div class="col-lg-4">
                <input type="date" class=" form-control form-control-sm" data-date-format="YYYY-MM-DD"
                       name="submission_date" id="submission_date">
            </div>
            <div class="p-3"></div>
        </div>
    </div>
        <div id="output">

        </div>
        <button type="submit" class="btn btn-primary form-control form-control-sm" id="summary_btn"
                formaction="overview#">
            continue
        </button>
    </form>

JS to save form:

    $('#overviewForm').on('submit', function(event){
        event.preventDefault();
        console.log("form submitted!");
        $.ajax({
            type: 'POST',
            url: "overview",
            data: {
                csrfmiddlewaretoken: '{{csrf_token}}',
                action: 'post',
                    application_path: $('#application_path').val(),
                    review: $('.review').val(),
                    review_iteration: $('#review_iteration').val(),
                    review_decision: $('#review_decision').val(),
                    bla_number: $('#bla_number').val(),
                    applicant_name: $('#applicant_name').val(),
                    prop_name: $('#prop_name').val(),
                    non_prop_name: $('#non_prop_name').val(),
                    obp_name: $('#obp_name').val(),
                    dosage_form: $('#dosage_form').val(),
                    strength_potency: $('#strength_potency').val(),
                    route_administration: $('#route_administration').val(),
                    primary_assessor: $('#primary_assessor').val(),
                    secondary_assessor: $('#secondary_assessor').val(),
                    orphan_drug: $('#orphan_drug').val(),
                    breakthrough: $('#breakthrough').val(),
                    designation: $('.designation').val(),
                    reviewer_decision: $('#reviewer_decision').val(),
    
            },
            success:function(json){
                console.log('success');
    
            },
            error : function(xhr,errmsg,err) {
            console.log(xhr.status + ": " + xhr.responseText);
        }
        });
    });
    
    Script to load the document
    
       
    
         document).ready(function(){
            $(".loadbtn").click(function(){
            var query = "{{ query }}";
            $.post("overviewload",
            {application_path:"application_path",
            csrfmiddlewaretoken: '{{csrf_token}}',
            applicant_name:"applicant_name",
            bla_number : query ,
            review :"review",
            review_iteration :"review_iteration",
            review_decision :"review_decision",
            designation :"designation",
            prop_name :"prop_name",
            non_prop_name :"non_prop_name",
            obp_name :"obp_name",
            dosage_form :"dosage_form",
            strength_potency :"strength_potency",
            route_administration :"route_administration",
            primary_assessor :"primary_assessor",
            secondary_assessor :"secondary_assessor"}
            );
            window.location = "overviewload"
            });
        });

概述加载页面与概述相同,但我在其中插入值作为输入,但我在所有字段中都得到 NONE。

标签: javascriptpythondjangoajax

解决方案


推荐阅读