ahpest_django/templates/ahpests/pestFormModal.html

<!-- Button trigger modal -->
<button style="padding: 5px 29px !important;" type="button" class="btn btn-success btn-lg" data-toggle="modal"
        data-target="#gsmmModal">
    增加病虫害信息
</button>

<!-- Employee Form Modal -->
<form id="gsmmForm" role="form" class="form-horizontal col-lg-12" enctype="multipart/form-data">
    <div class="modal fade" id="gsmmModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            style="font-size:28px" aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">病虫害数据录入</h4>
                </div>
                <div class="modal-body">
                     <input type="hidden" id="id" name="id">
                    <div class="form-group">
                        <label class="col-lg-2 control-label" for="date">调查日期:</label>
                        <div class="col-lg-4"><input type="text"  class="form-control" id="date" name="date"
                                                     placeholder="必填" required></div>
                        <label class="col-lg-2 control-label" for="adressid">区域编号:</label>
                         <div class="col-lg-4"><input type="text" class="form-control" id="adressid" name="adressid"
                                                     placeholder="必填" required></div>
                    </div>

                    <div class="form-group">
                        <label class="col-lg-2 control-label" for="pestname">虫种:</label>
                        <div class="col-lg-4">
                            <select id="pestname" name="pestname" class="form-control">
                                <option value=0>-请选择-</option>
                            </select>
                        </div>
                        <label class="col-lg-2 control-label" for="pestfirstgrade">害虫时期:</label>
                        <div class="col-lg-4">
                            <select id="pestfirstgrade" name="pestfirstgrade" class="form-control">
                                <option value=0>-请选择-</option>
                            </select>
                            <select id="pestsecondgrade" name="pestsecondgrade" class="form-control">
                                <option value=0>-请选择-</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-2 control-label" for="longitude">经度:</label>
                        <div class="col-lg-4"><input type="text" class="form-control" id="longitude"
                                                     name="longitude" placeholder="必填" required></div>
                        <label class="col-lg-2 control-label" for="latitude">纬度:</label>
                        <div class="col-lg-4"><input type="text" class="form-control" id="latitude" name="latitude"
                                                     placeholder="必填" required></div>
                    </div>

                    <div class="form-group">
                        <label class="col-lg-2 control-label" for="researchperson">调查者:</label>
                        <div class="col-lg-4">
                        <select id="researchperson" name="researchperson" class="form-control">
                            <option value=0>-请选择-</option>
                        </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-2 control-label" for="remark">备注:</label>
                        <div class="col-lg-10"><textarea type="text" class="form-control" id="remark"
                                                         name="remark"></textarea></div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-2 control-label">害虫图片:</label>
                        <div class="col-lg-5">
                            <input type="file" id="file" name="file"/>
                        </div>
                        <div class="col-lg-5">
                            <input type="button" id="picupload1" value="上传图片1"/>
                            <input type="button" id="picupload2" value="上传图片2"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-2 control-label" for="pestpicurl1">图片1:</label>
                        <div class="col-lg-10"><input type="text" class="form-control" id="pestpicurl1"
                                                      name="pestpicurl1" placeholder="上传图片外链"></div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-2 control-label" for="pestpicurl2">图片2:</label>
                        <div class="col-lg-10"><input type="text" class="form-control" id="pestpicurl2"
                                                      name="pestpicurl2" placeholder="上传图片外链"></div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-2 control-label">图片预览:</label>
                        <div class="col-lg-10">
                            <img id="pestpic1" src="" style="width:220px;height:150px"/>
                            <img id="pestpic2" src="" style="width:220px;height:150px"/>
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button id="submit" type="submit" class="btn btn-primary">Save</button>
                </div>
            </div>
        </div>
    </div>
    </div>
</form>