>

단계 부트 스트랩 양식이지만 제출 방법이 작동하지 않습니다. jquery와 연결되어 있지만 id를 제거하면 계속 버튼이 작동하지 않습니다. 호 라우트 제출을 사용하여 조치를 취할 수 있으며 jquery 유효성 검사가 필요하지 않습니다. 마지막 단계에서만 계속 계속, 뒤로 버튼 및 제출 버튼이 필요합니다.

<div class="portlet-body form">
<form class="form-horizontal" name action="{{route('meetingStore')}}" id="submit_form" method="POST">
    <div class="form-wizard">
        <div class="form-body">
            <ul class="nav nav-pills nav-justified steps">
                <li>
                    <a href="#tab1" data-toggle="tab" class="step">
                        <span class="number"> 1 </span>
                        <span class="desc">
                        <i class="fa fa-check"></i> Visitor Info </span>
                    </a>
                </li>
                <li>
                    <a href="#tab2" data-toggle="tab" class="step">
                        <span class="number"> 2 </span>
                        <span class="desc">
                        <i class="fa fa-check"></i> Host  </span>
                    </a>
                </li>
                <li>
                    <a href="#tab3" data-toggle="tab" class="step active">
                        <span class="number"> 3 </span>
                        <span class="desc">
                        <i class="fa fa-check"></i> Date & Location </span>
                    </a>
                </li>
                <li>
                    <a href="#tab4" data-toggle="tab" class="step">
                        <span class="number"> 4 </span>
                        <span class="desc">
                        <i class="fa fa-check"></i> Confirm </span>
                    </a>
                </li>
            </ul>
            <div id="bar" class="progress progress-striped" role="progressbar">
                <div class="progress-bar progress-bar-success"> </div>
            </div>
            <div class="tab-content">
                <div class="alert alert-danger display-none">
                <button class="close" data-dismiss="alert"></button> You have some form errors. Please check below. </div>
                <div class="alert alert-success display-none">
                <button class="close" data-dismiss="alert"></button> Your form validation is successful! </div>
                <div class="tab-pane active" id="tab1">
                    <h3 class="block">Provide your Visitor details</h3>
                    <div class="form-group">
                        <label class="control-label col-md-3">New Visitor
                            <span class="required"> * </span>
                        </label>
                        <div class="col-md-4">
                            <button type="button" class="btn btn-primary btn-lg yellow" data-toggle="modal" data-target="#Visitormdl" style="margin-bottom: 6px;">New Visitor
                            <i class="fa fa-plus add_button_glyph pull-left" style="padding: 7px;"></i>
                            </button>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="control-label col-md-3">Select Visitor</label>
                        <div class="col-md-4">
                            <select name="visitorName" id="country_list" class="form-control">
                                @foreach($visitors as $v)
                                <option value=""></option>
                                <option value="{{$v->name}}">{{$v->name}}<br>{{$v->mobile}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-3">Purpose</label>
                        <div class="col-md-4">
                            <textarea class="form-control" rows="3" name="purpose"></textarea>
                        </div>
                    </div>
                </div>
                <div class="tab-pane" id="tab2">
                    <h3 class="block">Provide your profile details</h3>
                    <div class="form-group">
                        <label class="control-label col-md-3">Select Host</label>
                        <div class="col-md-4">
                            <select name="hostName" id="country_list" class="form-control">
                                <option value=""></option>
                                @foreach($hosts as $host)
                                <option value="{{$host->name}}">{{$host->name}} <br>{{$host->Mobile}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                </div>
                <div class="tab-pane" id="tab3">
                    <h3 class="block">Provide your billing and credit card details</h3>
                    <div class="form-group">
                        <label class="control-label col-md-3">Select Location</label>
                        <div class="col-md-4">
                            <select name="location" id="country_list" class="form-control">
                                <option value=""></option>
                                @foreach($locations as $lo)
                                <option value="{{$lo->name}}">{{$lo->name}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-3">Start Date & Time
                            <span class="required"> * </span>
                        </label>
                        <div class="col-md-4">
                            <input id="" type="datetime-local" name="startDate" value="2017-06-01T08:30">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-3">End Date & Time
                            <span class="required"> * </span>
                        </label>
                        <div class="col-md-4">
                            <input id="" type="datetime-local" name="endDate" value="2017-06-01T08:30">
                        </div>
                    </div>
                </div>
                <div class="tab-pane" id="tab4">
                    <h3 class="block">Confirm your data</h3>
                    <h4 class="form-section">Visitor Info</h4>
                    <div class="form-group">
                        <label class="control-label col-md-3">Visitor Name:</label>
                        <div class="col-md-4">
                            <p class="form-control-static" data-display="visitorName"> </p>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-3">Purpose:</label>
                        <div class="col-md-4">
                            <p class="form-control-static" data-display="purpose"> </p>
                        </div>
                    </div>
                    <h4 class="form-section">Host</h4>
                    <div class="form-group">
                        <label class="control-label col-md-3"> Host Name:</label>
                        <div class="col-md-4">
                            <p class="form-control-static" data-display="hostName"> </p>
                        </div>
                    </div>

                    <h4 class="form-section">Date, time & Location</h4>
                    <div class="form-group">
                        <label class="control-label col-md-3">Start Date & Time:</label>
                        <div class="col-md-4">
                            <p class="form-control-static" data-display="startDate"> </p>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-3">End Date & Time:</label>
                        <div class="col-md-4">
                            <p class="form-control-static" data-display="endDate"> </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-actions" method="POST">
            <div class="row">
                <div class="col-md-offset-3 col-md-9">
                    <a href="javascript:;" class="btn default button-previous">
                    <i class="fa fa-angle-left"></i> Back </a>
                    <a href="javascript:;" class="btn btn-outline green button-next"> Continue
                        <i class="fa fa-angle-right"></i>
                    </a>
                    <button  type="submit" onclick="{{(route('meetingStore'))}}" class="btn green button-submit">Submit</button>
                    <i class="fa fa-check"></i>
                </div>
            </div>
        </div>
    </div>
</form>

jquery :

var FormWizard = function() {
return {
    init: function() {
        function e(e) {
            return e.id ? "<img class='flag' src='../../assets/global/img/flags/" + e.id.toLowerCase() + ".png'/>&nbsp;&nbsp;" + e.text : e.text
        }
        if (jQuery().bootstrapWizard) {
            $("#country_list").select2({
                placeholder: "Select",
                allowClear: !0,
                formatResult: e,
                width: "auto",
                formatSelection: e,
                escapeMarkup: function(e) {
                    return e
                }
            });
            var r = $("#submit_form"),
                t = $(".alert-danger", r),
                i = $(".alert-success", r);
            r.validate({
                doNotHideMessage: !0,
                errorElement: "span",
                errorClass: "help-block help-block-error",
                focusInvalid: !1,
                rules: {
                    username: {
                        minlength: 5,
                        required: !0
                    },
                    password: {
                        minlength: 5,
                        required: !0
                    },
                    rpassword: {
                        minlength: 5,
                        required: !0,
                        equalTo: "#submit_form_password"
                    },
                    fullname: {
                        required: !0
                    },
                    email: {
                        required: !0,
                        email: !0
                    },
                    phone: {
                        required: !0
                    },
                    gender: {
                        required: !0
                    },
                    address: {
                        required: !0
                    },
                    city: {
                        required: !0
                    },
                    country: {
                        required: !0
                    },
                    card_name: {
                        required: !0
                    },
                    card_number: {
                        minlength: 16,
                        maxlength: 16,
                        required: !0
                    },
                    card_cvc: {
                        digits: !0,
                        required: !0,
                        minlength: 3,
                        maxlength: 4
                    },
                    card_expiry_date: {
                        required: !0
                    },
                    "payment[]": {
                        required: !0,
                        minlength: 1
                    }
                },
                messages: {
                    "payment[]": {
                        required: "Please select at least one option",
                        minlength: jQuery.validator.format("Please select at least one option")
                    }
                },
                errorPlacement: function(e, r) {
                    "gender" == r.attr("name") ?
                        e.insertAfter("#form_gender_error") : "payment[]" == r.attr("name") ?
                        e.insertAfter("#form_payment_error") : e.insertAfter(r)
                },
                invalidHandler: function(e, r) {
                    i.hide(), t.show(), App.scrollTo(t, -200)
                },
                highlight: function(e) {
                    $(e).closest(".form-group").removeClass("has-success").addClass("has-error")
                },
                unhighlight: function(e) {
                    $(e).closest(".form-group").removeClass("has-error")
                },
                success: function(e) {
                    "gender" == e.attr("for") || "payment[]" == e.attr("for") ?
                        (e.closest(".form-group").removeClass("has-error").addClass("has-success"), e.remove()) : e.addClass("valid").closest(".form-group").removeClass("has-error").addClass("has-success")
                },
                submitHandler: function(e) {
                    i.show(), t.hide(), e[0].submit()
                }
            });
            var a = function() {
                    $("#tab4 .form-control-static", r).each(function() {
                        var e = $('[name="' + $(this).attr("data-display") + '"]', r);
                        if (e.is(":radio") && (e = $('[name="' + $(this).attr("data-display") + '"]:checked', r)),
                            e.is(":text") || e.is("textarea")) $(this).html(e.val());
                        else if (e.is("select")) $(this).html(e.find("option:selected").text());
                        else if (e.is(":radio") && e.is(":checked")) $(this).html(e.attr("data-title"));
                        else if ("payment[]" == $(this).attr("data-display")) {
                            var t = [];
                            $('[name="payment[]"]:checked', r).each(function() {
                                t.push($(this).attr("data-title"))
                            }), $(this).html(t.join("<br>"))
                        }
                    })
                },
                o = function(e, r, t) {
                    var i = r.find("li").length,
                        o = t + 1;
                    $(".step-title", $("#form_wizard_1")).text("Step " + (t + 1) + " of " + i), jQuery("li", $("#form_wizard_1")).removeClass("done");
                    for (var n = r.find("li"), s = 0; t > s; s++) jQuery(n[s]).addClass("done");
                    1 == o ? $("#form_wizard_1").find(".button-previous").hide() : $("#form_wizard_1").find(".button-previous").show(), o >= i ? ($("#form_wizard_1").find(".button-next").hide(), $("#form_wizard_1").find(".button-submit").show(), a()) : ($("#form_wizard_1").find(".button-next").show(), $("#form_wizard_1").find(".button-submit").hide()), App.scrollTo($(".page-title"))
                };
            $("#form_wizard_1").bootstrapWizard({
                    nextSelector: ".button-next",
                    previousSelector: ".button-previous",
                    onTabClick: function(e, r, t, i) {
                        return !1
                    },
                    onNext: function(e, a, n) {
                        return i.hide(), t.hide(), 0 == r.valid() ? !1 : void o(e, a, n)
                    },
                    onPrevious: function(e, r, a) {
                        i.hide(), t.hide(), o(e, r, a)
                    },
                    onTabShow: function(e, r, t) {
                        var i = r.find("li").length,
                            a = t + 1,
                            o = a / i * 100;
                        $("#form_wizard_1").find(".progress-bar").css({
                            width: o + "%"
                        })
                    }
                }), $("#form_wizard_1").find(".button-previous").hide(),
                $("#form_wizard_1 .button-submit").click(function() {
                    alert("Finished! Hope you like it :)")
                }).hide(),
                $("#country_list", r).change(function() {
                    r.validate().element($(this))
                })
        }
    }
}

} ();

기능


  • 답변 # 1

    {{csrf_field ()}}를 놓쳤습니다. 이것을 시도해보십시오.

    <div class="portlet-body form">
    <form class="form-horizontal"  action="{{route('meetingStore')}}" id="submit_form" method="POST">
        {{csrf_field()}} <!-- beginning of the form -->
        <div class="form-wizard">
            <!-- your code -->
        </div>
    </form>
    
    

관련 자료

  • 이전 hashlib - 파이썬에서 두 파일을 비교하는 가장 좋은 방법은 무엇입니까?
  • 다음 spring - 코 틀린 - springboottest에서 @beforeclass 정적 메소드를 관리하는 방법