實現功能
提交按鈕功能：
點擊提交按鈕的時候都會彈出模態框，但是有不同的狀態：
審核狀態未通過：彈出未通過理由的input輸入框，模態框中除了取消和確定按鈕，新增確定并保存醫院的按鈕
審核狀態已通過：如果新增醫院的經緯度沒有填寫，會提示填寫經緯度，填寫之后點擊提交按鈕，模態框中顯示確定和取消按鈕
審核狀態待審核：模態框中顯示確定和取消按鈕
添加醫院的html代碼：
<div class="form-group"> <label class="control-label col-md-3 col-sm-3 col-xs-12" for="first-name"> <span class="required">所屬醫院</span> </label> <div class="col-md-6 col-sm-6 col-xs-12"> @if($data->hospitalid > 0) **如果醫院的id>0,就是存在對應的醫院，讓下面的輸入框不能修改** <input type="text" id="first-name" disabled value="{{$data->hospital->name}}" required="required" class="form-control col-md-7 col-xs-12"> @else **如果醫院的id<=0,就是不存在對應的醫院，讓下面的輸入框可以修改，同時填寫醫院的經緯度** <input type="text" id="first-name" name="hospital_info" value="{{$data->hospital_info}}" required="required" class="form-control col-md-7 col-xs-12"> <div> <input type="text" name="hospital_lat" placeholder="請輸入醫院經度" class='hospitalLocation form-control hospitalLocation1' > <input type="text" name="hospital_lng" placeholder="請輸入醫院緯度 " class='hospitalLocation form-control hospitalLocation2' > </div> @endif </div> </div>審核狀態的相關html代碼：
<div class="form-group"> <label class="control-label col-md-3 col-sm-3 col-xs-12">審核狀態</label> <div class="col-md-6 col-sm-6 col-xs-12"> <select class="form-control choose" required="" @if($data->is_verify == 1) disabled @endif name="is_verify" data="{{$data->is_verify}}" style="width:100px;position:relative"> <option value="1" @if($data->is_verify == 1) selected @endif>未通過</option> <option value="2" @if($data->is_verify == 2) selected @endif>已通過</option> <option value="0" @if($data->is_verify == 0) selected @endif>待審核</option> </select> <input type="text" placeholder='填寫未通過理由' name="check_reason" class='Nopass' value="{{$data->check_reason}}" style='display:none'> **如果未通過審核的話會彈出這個input輸入框，填寫未通過理由** </div> </div>總的表單提交按鈕html代碼：
<div class="form-group"> <div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3"> <button type="button" class="btn btn-success" id="edit-submit" >提交</button> **這個提交按鈕的功能與上面的審核狀態和添加醫院相關信息有關系** 點擊提交按鈕的時候，彈出模態框，此時的模態框有兩種狀態： 1. <button class="btn btn-primary" type="reset" onclick="javascript:history.back();">返回</button> </div> </div>
模態框的相應html代碼：
<div class="modal fade" tabindex="-1" role="dialog" id="confirmSubmit"> <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 aria-hidden="true">×</span></button> <h4 class="modal-title">確認提交嗎？</h4> </div> {{--<div class="modal-body">--}} {{--</div>--}} <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">取消</button> <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="save()" >確定 </button> <button id="save_hospital_btn" style="display: none" type="button" class="btn btn-primary" data-dismiss="modal" onclick="save(1)" >確定并保存醫院 </button> </div> </div> </div></div>js代碼：
var hospitalId = {{$data->hospitalid}}; **拿到對應醫院的id****下面是點擊提交按鈕時的處理函數**$('#edit-submit').click(function () { is_verify = $('select[name=is_verify]').val(); **拿到審核狀態下拉框的值** if (is_verify == 1) { **未通過的時候** if (!$('input[name=check_reason]').val()) { layer.msg('請填寫未通過理由'); **如果選擇未通過的時候，后面的未通過理由沒有填寫，值為空，彈出提示信息請填寫未通過理由** return false; } } if (hospitalId <= 0) { **如果醫院不存在的話** if (is_verify == 1) { //審核未通過 $('#save_hospital_btn').show() **模態框中新增確定并保存醫院的按鈕出現** } else if(is_verify == 2) { //審核通過 if (!$('input[name=hospital_lat]').val() || !$('input[name=hospital_lng]').val()) { layer.msg('請填寫醫院的經緯度'); **所屬醫院下面的經緯度有一個沒填寫都會彈出提示信息** return false; } $('#save_hospital_btn').hide() **模態框中新增確定并保存醫院的按鈕消失** } else { **這個else中的條件就是 ： 待審核中** $('#save_hospital_btn').hide() **模態框中新增確定并保存醫院的按鈕消失** } } $('#confirmSubmit').modal('show'); **只要點擊提交按鈕模態框就會顯示** });$(function(){ $(":input[name=is_verify]").on("change",function(e){ **審核狀態的下拉列表發生變化的時候觸發這個函數** console.log($(this).attr("data"),$(this).val()); if($(this).attr("data") == 1){ layer.msg('已通過審批用戶不可繼續審批',{time:1000},function () { $(this).val(1); $(this).reset(); }); return false; } else { if ($(this).val() == 1) { **如果審核狀態是未通過，顯示輸入未通過理由的input輸入框** $('.Nopass').show(); } else { $('.Nopass').hide(); } } }); });function save(save_hospital){ **觸發模態框中新增確定并保存醫院的按鈕的函數** **save_hospital 是要傳遞的參數** data = $('#postform').serializeArray() **得到提交表單中的所有數據** if (save_hospital) { **如果要傳遞的參數已經存在** if (!$('input[name=hospital_lat]').val() || !$('input[name=hospital_lng]').val()) { layer.msg('請填寫醫院的經緯度'); **如果經緯度有一個沒填寫就彈出這個信息** return false; } data.push({name:'save_hospital',value:1}); **將這個醫院保存到數據中** } $.ajax({ type: 'POST', url : "{{url('admin/pyhsician/')}}/"+{{$data->id}}, dataType: 'json', data: data, success: function(data){ if(data.status==1){ layer.msg(data.message); setTimeout(function(){//兩秒后跳轉 window.location.href = data.url; },1000); }else{ alert(data.message); } }, error:function(data){ if (data.status == 422) { var json=JSON.parse(data.responseText); json = json.errors; for ( var item in json) { for ( var i = 0; i < json[item].length; i++) { layer.msg(json[item][i],{time:1000}); return ; //遇到驗證錯誤，就退出 } } } else { layer.msg('服務器連接失敗',{time:1000}); } return ; } }); return false; function success(data) { if (data.status == 0) { alert(data.message); } else { window.location.href = data.url; } }; }以上所述是小編給大家介紹的js彈出模態框方法詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
