提交前，JQuery模式询问 [英] JQuery modal ask before submit

问题描述

我有表格，用户将在其中输入他的姓名（必填），dob（不是必需的），在提交表格之前，有一个确认表明他/她是否确定提交没有dob的表格。我正在使用一个模态，它将提交上面的表格。我试着在下面运行我的代码，但我看不出问题为什么不起作用。当dob中没有值时，模态应该询问并说没有dob可以继续吗？如果用户单击提交按钮，则应提交上面的模式，该模式超出模态。我希望你们能帮助我。谢谢。

I have form where user will type his name(required), dob(not required) and before submit the form, there is a confirmation that indicated whether if he/she is sure to submit the form without dob. I am using a modal from there it will submit above form. I have try to run my code below but I cannot see the problem why isn't working. When there is no value in dob then the modal should ask and says "there is no dob is it okay to proceed?" If user click the submit button then it should submit above form which is out of modal. I hope you guys help me. thank you.

HTML

<form id="createexperience" class="intro-message" method="post" action="./createexperience.php" enctype="multipart/form-data">
   <div class="form-group label-floating is-empty">
       <input type="text" name="name" required data-msg-required="Please enter your name">  
   </div>
   <div class="form-group label-floating is-empty">
       <input type="text" id="namefield" name="dob">  
   </div>
   <div class="form-group margin18 padbtm30">
   <input type="submit" class="btn btn-primary" value="Submit" />
   </div>
</form>

<div id="portfoliomsgmodal" class="modal fade" tabindex="-1">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h3 class="modal-title">TIP</h3> </div>
        <div class="modal-body">
                <label>There are twice as much chances of you getting contacted by your customers if you upload something in your portfolio. Upload photos or video or audio links to your profile.</label>
        </div>
        <div class="modal-footer">
            <input type="submit" class="btn btn-warning" data-dismiss="modal" value="Now">
            <input type="submit" id="submitlater" class="btn btn-primary nomargin" value="Later">
        </div>
    </div>
</div>
</div>

Jquery

$(document).bind("click", function (e) {
    $("#createexperience").validate({
        rules: {
            "language[]": {
                required: !0
            }
        }
        , messages: {}
        , submitHandler: function () {
            return !1
        }
        , ignore: ".ignore"
        , errorElement: "label"
        , errorClass: "has-error"
        , submitHandler: function (e) {
            if ($.trim($('#namefield').val()) == '') {
                if (jQuery('#submitlater').data('clicked')) {
                    $('#createexperience').submit();
                    e.submit();
                }
                else {
                    $('#portfoliomsgmodal').modal('show');
                    return false;
                }
            }
            else {
                e.submit();
            }
        }
        , highlight: function (e) {
            $(e).closest(".form-group").removeClass("success").addClass("has-error")
        }
    })
})

推荐答案

您的 submitHandler 函数错误。试试这段代码希望它有效。

Your submitHandler function is wrong. Try this code hope it works.

$(document).bind("click", function (e) {
    $("#createexperience").validate({
        rules: {
            "language[]": {
                required: !0
            }
        }
        , messages: {}
        , submitHandler: function () {
            return !1
        }
        , ignore: ".ignore"
        , errorElement: "label"
        , errorClass: "has-error"
        , submitHandler: function (e) {
            if ($.trim($('#namefield').val()) == '') {
               $('#portfoliomsgmodal').modal('show');
               $('#submitlater').click(function () {
                  e.submit();
               });
           } else {
             e.submit();
           }
        }
        , highlight: function (e) {
            $(e).closest(".form-group").removeClass("success").addClass("has-error")
        }
    })
});

这篇关于提交前，JQuery模式询问的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！