前端
Source
Edit
History

modal中使用form

  • html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!-- 更新进展Modal -->
   <div class="modal fade" id="updatemodal" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true" name="updatemodal">
     <div class="modal-dialog modal-xl" role="document">
       <div class="modal-content">
         <div class="modal-header">
           <h5 class="modal-title" id="staticBackdropLabel">更新代办事件</h5>
           <button type="button" class="close" data-dismiss="modal" aria-label="Close">
             <span aria-hidden="true">&times;</span>
           </button>
         </div>
         <div class="modal-body">
          <!--编辑框开始-->
          <div class="card card-primary">
             <div class="card-header">
               <h3 class="card-title">更新代办事件</h3>
             </div>
             <!-- /.card-header -->
             <!-- form start -->
             <form id="updateForm" name="updateForm" novalidate="novalidate">
               <div class="card-body">
                 <div class="form-group">
                   <label for="detail_title"><a style="color: red;">*</a>进展标题</label>
                   <input type="text" name="detail_title" class="form-control" id="detail_title">
                 </div>
                 <div class="form-group" data-select2-id="29">
                 <label><a style="color: red;">*</a>事件状态</label>
                 <select class="form-control select2 select2-danger select2-hidden-accessible" data-dropdown-css-class="select2-danger" style="width: 100%;" data-select2-id="12" tabindex="-1" aria-hidden="true" id="event_status" name="event_status">
                   <option selected="selected" data-select2-id="14" value='0'>未完成</option>
                   <option data-select2-id="35" value='1'>完成</option>
                   <option data-select2-id="36" value='2'>终止</option>
                 </select>
               </div>
                 <div class="form-group">
                   <label for="detail_content">详细信息(选填)</label>
                   <textarea id="detail_content" class="form-control" name="detail_content" rows="4" cols="50"></textarea>
                 </div>
               </div>
               </form>
               <!-- /.card-body -->
           </div>
          <!--编辑框结束-->
         </div>
         <div class="modal-footer">
           <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
           <button type="submit" class="btn btn-primary">更新</button>
         </div>
        
       </div>
       
     </div>
   </div>
   <!-- 更新进展Modal END Modal -->
  • js内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
  var updateurl
  $('#updatemodal').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget) // Button that triggered the modal
    //注意这里的whatever对应前面html代码中button标签下data-whatever属性的后半段
    updateurl = button.data('url') // Extract info from data-* attributes

    // var user = button.data('user')
    // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
    // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
    var modal = $(this)
    //此处即为修改modal的标题
    // modal.find('.modal-title').text('New message to ' + recipient)
    // modal.find('.modal-body input').val(recipient)
    //modal.find('.card-primary form').attr("action",url)
  })
  $(".modal-footer button[type='submit']").click(function(e){
    e.preventDefault(); // 阻止表单的默认提交行为
    if (!$("#updateForm").valid()) {
        // 如果验证失败，返回false，不提交数据
        return false;
    };
    var formData = $("#updateForm").serialize();
    console.log('updateurl'+updateurl)
    $.ajax({
        url: updateurl, // 你的请求地址
        type: "POST", // 请求类型，必须是POST
        data: formData, // 你的表单数据
        dataType: "json", // 返回的数据类型，必须是json
        success: function(data){
            if (data.result === 0) {
                // 请求成功，显示消息
                $("#updatemodal").modal('hide')
                toastr.success('成功：'+data.message)
                setTimeout(function() {
                    $('#eventtable').DataTable().ajax.reload();

                }, 1000)
                
            } else if (data.result === 1) {
                toastr.error('失败：'+data.message)
            }
        },
        error: function(){
            // 请求失败的回调函数
            console.log("Error");
        }
    });
});

$('#updateForm').validate({
    rules: {
    
    detail_title: {
        required: true,
        minlength: 5
    },
    
    },
    messages: {
    detail_title: {
        required: "请输入更新标题",
    },
    },
    errorElement: 'span',
    errorPlacement: function (error, element) {
    error.addClass('invalid-feedback');
    element.closest('.form-group').append(error);
    },
    highlight: function (element, errorClass, validClass) {
    $(element).addClass('is-invalid');
    },
    unhighlight: function (element, errorClass, validClass) {
    $(element).removeClass('is-invalid');
    }
});

  • django内容

1
2
3
4
5
<a class="btn btn-primary btn-sm {disabled}" data-url="{reverse('event:eventupdate',kwargs={'id':Event.id})}" data-toggle="modal" data-target="#updatemodal">
    <i class="fas fa-history"></i>
    </i>
    更新进展
</a>