FuelUX向导不会导航到包括表单中的下一步 [英] FuelUX wizard not navigating to next step on including in a form
本文介绍了FuelUX向导不会导航到包括表单中的下一步的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
任何人都可以告诉我如何使用带有fuelUX向导的表单标签？
我正在做以下工作：
< html>< head> < meta http-equiv =Content-Typecontent =text / html; charset = ISO-8859-1> < title>在此插入标题< / title> < link rel =stylesheethref =// maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css\"> < link rel =stylesheethref =../../ style / sb-admin-2.css> < link rel =stylesheethref =// cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css\"> < link rel =stylesheethref =../../ style / ladda-themeless.min.css> < link rel =stylesheethref =// www.fuelcdn.com/fuelux/3.5.0/css/fuelux.min.css\"> < script type =text / javascriptsrc =ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js>< / script> < script type =text / javascriptsrc =// maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js\"> ;</script> < script type =text / javascriptsrc =// www.fuelcdn.com/fuelux/3.5.0/js/fuelux.min.js\"></script></head><body> ; < div class =container> < div class =col-lg-12> < div class =panel panel-primary> < div class =panel-heading> < i class =fa fa-user fa-2x>< / i>注册表格< / div> < div class =panel-body> < div class =fuelux> < div class =wizarddata-initialize =wizardid =registerWizard> < ul style =margin-left：0class =steps> < li data-step =1class =active>< span class =badge badge-info> 1< / span>个人详细信息< span class =chevron>< / span> ; < /锂> < li data-step =2>< span class =badge> 2< / span>工作部分信息< span class =chevron>< / span> < /锂> < li data-step =3>< span class =badge> 3< / span>验证全部详情< span class =chevron>< / span> < /锂> < / UL> < div class =actions> < button disabled =disabledclass =btn btn-default btn-prev> < span class =fa fa-arrow-left>< / span>上一个< /按钮> < button class =btn btn-default btn-nextdata-last =Done！>下一步< span class =fa fa-arrow-right>< / span> < /按钮> < / DIV> <！ - ./End actions - > < div class =step-content> < div class =step-pane sample-pane alert activedata-step =1> < h4>个人信息< / h4> < HR> < form role =formmethod =postaction =id =personalInfoFormclass =form-horizontal> < div class =form-group> < label class =control-label col-sm-4for =email>全名：< / label> < div class =col-sm-6> < input type =textclass =form-controlid =fullnameplaceholder =输入全名> < / DIV> < / DIV> < div class =form-group> < label class =control-label col-sm-4for =email>电子邮件地址：< / label> < div class =col-sm-6> < input type =emailclass =form-controlid =emailplaceholder =Enter Email> < / DIV> < / DIV> < div class =form-group> < label class =control-label col-sm-4for =pwd>手机号码：< / label> < div class =col-sm-6> < input type =textclass =form-controlid =midplaceholder =输入手机号码> < / DIV> < / DIV> < /形式> < / DIV> < div class =step-pane sample-pane bg-info alertdata-step =2> < h4>工作部分信息< / h4> < p>芹菜quandong swiss chard chicory花生豌豆马铃薯。婆罗门参芋头大蒜克芹菜苦菜荆条种子羽衣甘蓝紫菜。葡萄荆条种子kombu甜菜根辣根胡萝卜南瓜芽甘蓝甜菜。< / p> < / DIV> < div class =step-pane sample-pane bg-danger alertdata-step =3> < h4>验证所有细节< / h4> < p>紫菜葡萄银甜菜西兰花kombu甜菜绿豆蚕豆土豆quandong芹菜。布尼亚坚果黑眼豆豌豆大草原萝卜韭菜扁豆萝卜绿色欧洲防风草。海生菜生菜water荠茄子冬季马齿苋茴香小豆花生花生豌豆塞拉利昂博洛尼韭菜soko菊苣莴苣香菜jácasalsify。< / p> < / DIV> < / DIV> <！ - ./End Step-content - > < / DIV> <！ - ./End wizard - > < / DIV> <！ - ./ End fuelux - > < script type =text / javascript> $（ ＃registerWizard）向导（）。 < /脚本> < / DIV> < div class =panel-footer> < button id =registerclass =btn btn-lg btn-success ladda-buttondata-style =expand-right> < span class =ladda-label>< i class =fa fa-check>< / i>注册！< / span> < span class =ladda-spinner>< / span> < span class =ladda-spinner>< / span> < div class =ladda-progress progress-barstyle =width：105px;>< / div> < /按钮> < script type =text / javascriptsrc =../../ js / ladda.spin.min.js>< / script> < script type =text / javascriptsrc =../../ js / ladda.js>< / script> < script type =text / javascript> Ladda.bind（'。ladda-button'，{timeout：2000}）; var laddaLoadingButton = Ladda.create（document .querySelector（＃register））; $ .ajax（{//一些配置beforeSend：$（＃register）。click（function（）{//在发送请求之前，使按钮加载laddaLoadingButton.start（）; laddaLoadingButton.setProgress（0）; var progress = 0; var interval = setInterval（function（）{progress = Math.min（progress + Math.random（）* 0.1，1）; laddaLoadingButton .setProgress（progress）; if（progress === 1）{laddaLoadingButton （）;}}，200）;}），success：function（）{//完成请求后，使按钮停止laddaLoadingButton.setProgress（1）; laddaLoadingButton.stop（）;} }）; < /脚本> < / DIV> < / DIV> < / DIV> < / div>< / html>
每当我在标签的开头加入标签并在div的结尾处结束form标签时，我无法导航到下一步。我的猜测是，当我点击下一个按钮时，表单正在提交并重新加载页面。我试图通过在按钮上编写JS代码来解决这个问题。但这不符合我的目的。任何人都可以帮我解决这个问题吗？我希望能够浏览向导并同时能够捕获表单中的用户信息。我应该使用多种形式吗？或者只有一种形式解决我的问题？请帮助。
按钮标记。没有这个的按钮将提交表单。Can anyone tell me how to use the form tag with the fuelUX wizard? I am doing the following:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="../../style/sb-admin-2.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css">
<link rel="stylesheet" href="../../style/ladda-themeless.min.css">
<link rel="stylesheet" href="//www.fuelcdn.com/fuelux/3.5.0/css/fuelux.min.css">
<script type="text/javascript" src="ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="//www.fuelcdn.com/fuelux/3.5.0/js/fuelux.min.js"></script>
</head>
<body>
<div class="container">
<div class="col-lg-12">
<div class="panel panel-primary">
<div class="panel-heading">
<i class="fa fa-user fa-2x"></i> Registration Form
</div>
<div class="panel-body">
<div class="fuelux">
<div class="wizard" data-initialize="wizard" id="registerWizard">
<ul style="margin-left: 0" class="steps">
<li data-step="1" class="active"><span class="badge badge-info">1</span>Personal Details<span class="chevron"></span>
</li>
<li data-step="2"><span class="badge">2</span>Work Section Information
<span class="chevron"></span>
</li>
<li data-step="3"><span class="badge">3</span>Verify All The Details<span class="chevron"></span>
</li>
</ul>
<div class="actions">
<button disabled="disabled" class="btn btn-default btn-prev">
<span class="fa fa-arrow-left"></span> Prev
</button>
<button class="btn btn-default btn-next" data-last="Done !">
Next <span class="fa fa-arrow-right"></span>
</button>
</div>
<!-- ./End actions -->
<div class="step-content">
<div class="step-pane sample-pane alert active" data-step="1">
<h4>Personal Information</h4>
<hr>
<form role="form" method="post" action="" id="personalInfoForm" class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-4" for="email">Full Name:</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="fullname" placeholder="Enter Full Name">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="email">Email:</label>
<div class="col-sm-6">
<input type="email" class="form-control" id="email" placeholder="Enter Email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="pwd">Mobile No:</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="mid" placeholder="Enter Mobile Number">
</div>
</div>
</form>
</div>
<div class="step-pane sample-pane bg-info alert" data-step="2">
<h4>Work Section Information</h4>
<p>Celery quandong swiss chard chicory earthnut pea potato. Salsify taro catsear garlic gram celery bitterleaf wattle seed collard greens nori. Grape wattle seed kombu beetroot horseradish carrot squash brussels sprout chard.</p>
</div>
<div class="step-pane sample-pane bg-danger alert" data-step="3">
<h4>Verify All The Details</h4>
<p>Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip. Sea lettuce lettuce water chestnut eggplant winter purslane fennel azuki
bean earthnut pea sierra leone bologi leek soko chicory celtuce parsley jÃcama salsify.</p>
</div>
</div>
<!-- ./End Step-content -->
</div>
<!-- ./End wizard -->
</div>
<!-- ./ End fuelux -->
<script type="text/javascript">
$("#registerWizard").wizard();
</script>
</div>
<div class="panel-footer">
<button id="register" class="btn btn-lg btn-success ladda-button" data-style="expand-right">
<span class="ladda-label"><i class="fa fa-check"></i>
Register !</span> <span class="ladda-spinner"></span> <span class="ladda-spinner"></span>
<div class="ladda-progress progress-bar" style="width: 105px;"></div>
</button>
<script type="text/javascript" src="../../js/ladda.spin.min.js"></script>
<script type="text/javascript" src="../../js/ladda.js"></script>
<script type="text/javascript">
Ladda.bind('.ladda-button', {
timeout: 2000
});
var laddaLoadingButton = Ladda.create(document
.querySelector("#register"));
$.ajax({
// some config
beforeSend: $("#register").click(
function() {
// When before sending the request, make the button loading
laddaLoadingButton.start();
laddaLoadingButton.setProgress(0);
var progress = 0;
var interval = setInterval(function() {
progress = Math.min(progress + Math.random() * 0.1, 1);
laddaLoadingButton
.setProgress(progress);
if (progress === 1) {
laddaLoadingButton.stop();
clearInterval(interval);
}
}, 200);
}),
success: function() {
// When complete the request, make the button stop
laddaLoadingButton.setProgress(1);
laddaLoadingButton.stop();
}
});
</script>
</div>
</div>
</div>
</div>
</body>
</html>
Whenever I include the tag at the start of the and end the form tag at the close of the div, i am not able to navigate to the next step. My guess is, when ever i am hitting the next button the form is getting submitted and reloading the page. I tried to fix this by writing JS code on the button. But it was not serving my purpose. Can anyone help me solve this issue? I want to be able to navigate through the wizard and at the same time be able to capture the user information in the form. Should i use multiple forms? or will only one form solve my problem? Please help.
解决方案
Try adding type="button" to your button markup. Buttons without this will submit forms.
这篇关于FuelUX向导不会导航到包括表单中的下一步的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
