modal form

Modal

by redoak2000

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/fontawesome.min.css">
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#dcht_oa_audit_dlg">
          show
        </button>

        <div class="modal fade" id="dcht_oa_audit_dlg" tabindex="-1" aria-labelledby="exampleModalLabel" data-bs-backdrop="static" aria-hidden="true">
          <div class="modal-dialog">
            <fieldset class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">OA审批相关操作</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <form id="dcht_oa_audit_form" action="/Contract/OAAudit/" method="post" class="modal-body" role="form">
                <fieldset class="row mb-3">
                  <legend class="col-form-label col-sm-3 pt-0">操作类型</legend>
                  <div class="col-sm-6">
                    <div class="form-check">
                      <input class="form-check-input" type="radio" name="audit_result" id="audit_result_ok" value="ok" checked>
                      <label class="form-check-label" for="audit_result_ok">
                        审批通过
                      </label>
                    </div>
                    <div class="form-check">
                      <input class="form-check-input" type="radio" name="audit_result" id="audit_result_ko" value="ko">
                      <label class="form-check-label" for="audit_result_ko">
                        审批打回
                      </label>
                    </div>
                    <div class="form-check">
                      <input class="form-check-input"...

TypeScript

function init_dcht_ao_audit_validator()
    {
    $('#contact-form').bootstrapValidator({
        message: 'This value is not valid',
        feedbackIcons: {
            valid: 'fa fa-check',
            invalid: 'fa fa-times',
            validating: 'fa fa-refresh fa-spin'
        },
        submitHandler: function(validator, form, submitButton) {
            var that = form
            console.log(that);
                $.ajax({           
                    url: 'https://script.google.com/macros/s/AKfycbyqxVHm4Kcx1Tk5U4GCLDontvfDri_vA-MTeNlBoPSVTMyKsra8/exec',
                    data: $(this).serialize(), 
                    jsonp: 'cb', 
                    jsonpCallback: 'bingo', 
                    dataType:'jsonp', 
                    success: function bingo(data){
                        console.log(data); 
                        if (data == 'Error') {
                            alertForm({form: that, type: 'alert-danger', msg: 'Danger'});
                            return;
                        }
                        alertForm({form: that, type: 'alert-success', msg: 'Success'});
                        that.find('textarea').val('');
                    }, 
                    error: function(){
                        alertForm({form: that, type: 'alert-danger', msg: 'Danger.'});
                    }
                });
            
            function alertForm(alert) {
                var div = $('<div class="alert ' + alert.type + '" style="display: none;">' + alert.msg + '</div>');        
                alert.form.prepend(div);
                div.slideDown(400).delay(3000).slideUp(400, function() {
                    alert.form.closest('.modal').modal('hide');
                    div.remove();    
                });
            }
        },
        fields: {
            name: {
                validators: {
                    notEmpty: {
                        
                    }
                }
            },
          ...