홈>
단계 부트 스트랩 양식이지만 제출 방법이 작동하지 않습니다. 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'/> " + 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
관련 자료
- php - Eloquent의 Laravel WhereIn 메서드가 작동하지 않습니다
- c# - Azure Bot에서 게시 한 Teams의 적응 형 카드에 대해 작동하지 않는 제출 제출
- php - Laravel with () 및 LIKE를 사용하여 검색이 작동하지 않습니다
- Laravel에서 whereBetween으로 작업하지 않는 곳
- php - 요청 데이터를 보여주는 흰색 페이지가있는 프로덕션에서 Laravel 로그인이 작동하지 않음
- phpunit - laravel 8 - json get testing 덕분에 컨트롤러 메서드를 테스트하려고하지만 경로를 찾을 수 없습니다
- Laravel Eloquent - laravel eloquent - grandparents로부터 손자의 데이터를 얻는 방법
- php - Laravel response ()-> download ()가 제대로 작동하지 않습니다
- php - Laravel CSS 스타일 시트가 특정 경로에서 작동하지 않습니다
- html - 제출 방법 PHP 삭제를 사용할 때 마지막 행 ID를 얻는 것을 피하는 방법
- javascript - vuejs에서 양식 제출시 변경된 소품 데이터를 저장하는 방법은 무엇입니까? (Laravel 및 inertiajs)
- Laravel 8 Search with Pagination이 제대로 작동하지 않습니다
- php - Laravel에서 belongsTo를 사용하려고했지만 작동하지 않습니다
- img src가 이미지를 표시하지 못함 Laravel 8
- reactjs - 양식 제출 반응 js시 preventDefault가 작동하지 않음
- eloquent - Laravel은 where () 및 페이지 매김과 함께 작동하지 않습니다
- php - Laravel REST API에서 PUT 메소드로 이미지를 업데이트하는 방법은 무엇입니까?
- vue.js - laravel 블레이드의 vue 오류 - 속성 또는 메서드 "유형"이 인스턴스에 정의되어 있지 않지만 렌더링 중에 참조됩니다
- c# - 단일 매개 변수로 호출 할 때 선택적 매개 변수가있는 메서드 대리자가 작동하지 않음
- laravel - axios 메서드가 성공적인 결과에 제출 한 후 리디렉션
관련 질문
- javascript - 필터 결과를 성공적으로 얻은 후 Laravel 8의 블레이드 파일에 표시하는 방법
- javascript - JQuery의 ERR_ABORTED 429 (너무 많은 요청)
- jquery - Javascript가 작동하지 않는 여러 Bootstrap Select div 추가
- javascript - 부트 스트랩에서로드되지 않는 모달 예제
- Javascript/HTML - 자바 스크립트/html - onclick으로 기능 반복
- javascript - HTML 양식 방법 대 jQuery 함수 유형
- jquery - javascript regex 내에서 변수를 전달하는 방법은 무엇입니까?
- javascript - 관련 div 전용 jQuery를 분리하고 추가하는 방법
- javascript - 부모가 위아래로 슬라이드하는 동안 이미지를 정적으로 유지
- javascript - v-for에서 데이터를 가져올 수 없으며 데이터가 null입니다
{{csrf_field ()}}를 놓쳤습니다. 이것을 시도해보십시오.