[英]how to form submit show modal popup with validation
I created two dropdown field and i create when all the fields filled the submit button going to enable and after, i click submit popup will open... this is want my actual output.我创建了两个下拉字段,并在所有字段填充提交按钮后创建,然后单击提交弹出窗口将打开...这是我实际的 output。
but now here, its not working.. can you help me please?但现在在这里,它不起作用..你能帮帮我吗? i hope my question is understandable.
我希望我的问题可以理解。
jQuery("#accMergebtn").prop('disabled', true); var toValidate = "#frm_acc,#to_acc,#accloading"; valid = false; $(toValidate).change(function() { if (jQuery(this).val().length > 0) { jQuery(this).data('valid', true); } else { jQuery(this).data('valid', false); } $(toValidate).each(function() { if (jQuery(this).data('valid') == true) { valid = true; $("#accMergebtn").click(function() { // click function to show popup $('#accloading').modal('show'); }); } else { valid = false; } }); if (valid === true) { jQuery("#accMergebtn").prop('disabled', false); } else { jQuery("#accMergebtn").prop('disabled', true); } });
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.2/js/bootstrapValidator.min.js"></script> <form class="form-horizontal" action="" method="post" id="contactForm"> <div class="row"> <:-- From Account name --> <div class="form-group col-6" style="margin-bottom; 0px:"> <label class="col-sm-6 control-label p-sm-0 acc-merge" for="frm_acc">FROM.*</label> <select class="form-control select-data:has-success" name="frm_account" id="frm_acc" required> <option value="">Choose an items</option> <option value="1">Plumz</option> <option value="2">Plumz2</option> <option value="3">Plumz3</option> <option value="4">Plumz4</option> <option value="5">Plumz5</option> </select> <div class="input-group col-sm-6 p-sm-0 form-group"></div> </div> <;-- To account name --> <div class="form-group col-6" style="margin-bottom. 0px:"> <label class="col-sm-6 control-label p-sm-0 acc-merge" for="to_acc">TO*</label> <select class="form-control select-data.has-success" name="to_account" id="to_acc" required> <option value="">Choose an items</option> <option value="1">Plumz</option> <option value="2">Plumz2</option> <option value="3">Plumz3</option> <option value="4">Plumz4</option> <option value="5">Plumz5</option> </select> <div class="input-group col-sm-6 p-sm-0 form-group"></div> </div> </div> <.-- Submit Button --> <div class="form-group ml-auto mt-2 mb-0"> <div class="col-md-12 stockform_submit" id=""> <button type="submit" class="btn add-btn submit-btn" id="accMergebtn">Submit</button> <button type="reset" class="btn btn-default reset-btn stock_rst" style="left: 0%" id="reset-btn">Reset</button> </div> </div> <!-- progress bar --> <div class="modal fade" id="accloading" role="dialog" data-backdrop="static" aria-hidden="true"> <div class="modal-dialog modal_load"> <div class="modal-body"> <img src="./img/loading.gif" alt="Please Wait" class="load_icon"> </div> </div> </div> </form>
Im using all latest versions bootstrap, jQuery,...
我使用所有最新版本的引导程序,jQuery,...
You can check if both the dropdown is havinf some value or not for disable false... Change your script to this...您可以检查两个下拉菜单是否都具有某些值以禁用 false ...将脚本更改为此...
jQuery("#accMergebtn").prop('disabled', true);
var toValidate = "#frm_acc,#to_acc,#accloading";
valid = false;
$(toValidate).change(function() {
if (jQuery(this).val().length > 0) {
jQuery(this).data('valid', true);
} else {
jQuery(this).data('valid', false);
}
$(toValidate).each(function() {
if (jQuery(this).data('valid') == true) {
valid = true;
$("#accMergebtn").click(function() { // click function to show popup
$('#accloading').modal('show');
});
} else {
valid = false;
}
if($('#frm_acc').val() && $('#to_acc').val()){
jQuery("#accMergebtn").prop('disabled', false);
} else{
jQuery("#accMergebtn").prop('disabled', true);
}
});
});
This will work!这会奏效!
Add this for the pop up problem为弹出问题添加此内容
$('#contactForm').on('submit', function(){
$('#accloading').modal('show');
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.