多步骤形式“下一步”按钮不起作用 [英] Multi-step form "next" button not working
本文介绍了多步骤形式“下一步”按钮不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我对Javascript和jQuery有基本的了解。我在这里有一个多步骤的表格，将我的表格分成3个步骤。然而，下一步按钮似乎没有工作。我花了整整一天的时间来研究整个互联网，尽我所能，但仍然没有解决我的问题。
以下是我的文件。我确定这不是由于浏览器问题，因为我尝试了所有主流浏览器。 js代码对我来说似乎也很好。任何人都可以向我展示一些启发??
$ b $ new_video.html（这是一个.php文件，但我删除了所有不必要的php代码）
<！DOCTYPE html>
< html>
< head>
< meta http-equiv =content-typecontent =text / html; charset = utf-8/>
< link href =css / step.css =stylesheettype =text / cssmedia =screen/>
< script src =http://ajax.googleapis.com/ajax/libs/jquery/1.10/jquery.min.js>< / script>
< script src =step.js>< / script>
< script src =jquery.easing.min.js>< / script>
< / head>
< body>
< form id =msformaction =<？php echo htmlspecialchars（$ _ SERVER [PHP_SELF]）;？> method =POSTenctype =multipart / form-data>
<！ - 进度条 - >
< ul id =progressbar>
< li class =active>上传视频讲座< / li>
< li>上传讲义< / li>
< li>上传屏幕截图< / li>
< / ul>
<！ - fieldsets - >
< fieldset>
< h2 class =fs-title>上传视频演讲< / h2>
< span class =error> *必填字段。< / span>
< h2 class =fs-title>上传视频演讲< / h2>
< span class =error> *必填字段。< / span>
< div id =form>
< input type =filename =file/>
< span class =error> *< / span>< br />
< input type =textname =titleplaceholder =Video Lecture Title/>
< span class =error> *< / span>< br />
< span class =error> *< / span>< br />
< input type =buttonname =nextclass =next action-buttonvalue =Next/>
< / div>
< / fieldset>
< / form>
< / body>
< / html>
step.js
var current_fs，next_fs，previous_fs; // fieldsets
var left，opacity，scale; // fieldset属性，我们将动画
var animating; //标记以防止快速多击故障
$（document）.ready（function（）{
$（。next）。click（function（）{
如果（动画）返回false;
animating = true;
current_fs = $（this）.parent（）;
next_fs = $（this）.parent（）。 next（）;
//使用next_fs的索引激活progressbar上的下一步$ b $（＃progressbar li）。eq（$（fieldset）。index（next_fs） ）.addClass（active）;
//显示下一个字段集
next_fs.show（）;
//用样式
隐藏当前字段集current_fs .animate（{opacity：0}，{
step：function（now，mx）{
//当current_fs的不透明度降低为0时 - 存储在now中
// 1将current_fs缩小到80％
scale = 1-（1 - now）* 0.2;
// 2。将next_fs从右边（50％）
left =（now * 50 ）+％;
// 3 。当它在
中移动时，将next_fs的不透明度增加到1，opacity = 1 - 现在;
current_fs.css（{'transform'：'scale（'+ scale +'）'}）;
next_fs.css（{'left'：left，'opacity'：opacity}）;
}，
持续时间：800，
complete：function（）{
current_fs.hide（）;
animating = false;
}，
//这个来自定制缓动插件
缓动：'easeInOutBack'
}）;
}）;
}）;
$ b $（document）.ready（function（）{
$（。previous）。click（function（）{
if（animating）return false;
animating = true;
current_fs = $（this）.parent（）;
previous_fs = $（this）.parent（）。prev（）;
//取消激活进度条上的当前步骤
$（＃progressbar li）。eq（$（fieldset）。index（current_fs））。removeClass（active）;
//显示前一个字段集
previous_fs.show（）;
//用样式
current_fs.animate（{opacity：0}，隐藏当前字段集， {
step：function（now，mx）{
//当current_fs的不透明度降低到0时 - 存储在now
// 1中，将previous_fs从80％缩放到100％
scale = 0.8 +（1 - now）* 0.2;
// 2。将current_fs放在右边（50％） - 从0％
left =（（1-now）* 50）+％;
// 3。增加不透明度o f before_fs为1，因为它在
中移动opacity = 1 - now;
current_fs.css（{'left'：left}）;
previous_fs.css（{'transform'：'scale（'+ scale +'）'，'opacity'：opacity}）;
}，
持续时间：800，
complete：function（）{
current_fs.hide（）;
animating = false;
}，
//这个来自定制缓动插件
缓动：'easeInOutBack'
}）;
}）;
}）;
$ b $（document）.ready（function（）{
$（。submit）。click（function（）{
return false;
}）;
}）;
解决方案
目前我看到您只指定了一个对于初学者来说，对于初学者来说，将所有绑定放在一个 $（document）.ready 或简称 $（function（）{}）; code>，所以：
$（function（）{
$（。previous）。点击（函数（）{
//以前的东西...
}）;
$（。next）。click（function（）{
//下一步的东西...
}）;
$（。submit）。click（function（）{
//你明白了.. 。
}）;
}）;
这是您的小提琴更新（你错过了一些资源，我希望我的权利）。我希望这会有所帮助，祝你好运：）
I have a basic understanding on Javascript and jQuery. I have a multi-step form here which splits up my form into 3 steps. However the "next" button doesnt seem to work. I have spent whole day to research all over the Internet and tried all I could but still didnt solve my problem.
Below is the files I have. I am sure it is not due to browser problem since I have tried all major browsers. js code also seems alright to me. Anyone can show me some enlightenment??
new_video.html (it was a .php file but i removed all the unnecessary php codes)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link href="css/step.css" rel="stylesheet" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10/jquery.min.js"></script>
<script src="step.js"></script>
<script src="jquery.easing.min.js"></script>
</head>
<body>
<form id="msform" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="POST" enctype="multipart/form-data">
<!-- progressbar -->
<ul id="progressbar">
<li class="active">Upload Video Lecture</li>
<li>Upload Lecture Notes</li>
<li>Upload Screenshot</li>
</ul>
<!-- fieldsets -->
<fieldset>
<h2 class="fs-title">Upload Video Lecture</h2>
<span class="error">* required field.</span>
<h2 class="fs-title">Upload Video Lecture</h2>
<span class="error">* required field.</span>
<div id="form">
<input type="file" name="file" />
<span class="error">* </span><br />
<input type="text" name="title" placeholder="Video Lecture Title" />
<span class="error">* </span><br />
<textarea name="description" rows="6" placeholder="Description"></textarea>
<span class="error">* </span><br />
<input type="button" name="next" class="next action-button" value="Next" />
</div>
</fieldset>
</form>
</body>
</html>
step.js
var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitches
$(document).ready(function(){
$(".next").click(function(){
if(animating) return false;
animating = true;
current_fs = $(this).parent();
next_fs = $(this).parent().next();
//activate next step on progressbar using the index of next_fs
$("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
//show the next fieldset
next_fs.show();
//hide the current fieldset with style
current_fs.animate({opacity: 0}, {
step: function(now, mx) {
//as the opacity of current_fs reduces to 0 - stored in "now"
//1. scale current_fs down to 80%
scale = 1 - (1 - now) * 0.2;
//2. bring next_fs from the right(50%)
left = (now * 50)+"%";
//3. increase opacity of next_fs to 1 as it moves in
opacity = 1 - now;
current_fs.css({'transform': 'scale('+scale+')'});
next_fs.css({'left': left, 'opacity': opacity});
},
duration: 800,
complete: function(){
current_fs.hide();
animating = false;
},
//this comes from the custom easing plugin
easing: 'easeInOutBack'
});
});
});
$(document).ready(function(){
$(".previous").click(function(){
if(animating) return false;
animating = true;
current_fs = $(this).parent();
previous_fs = $(this).parent().prev();
//de-activate current step on progressbar
$("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
//show the previous fieldset
previous_fs.show();
//hide the current fieldset with style
current_fs.animate({opacity: 0}, {
step: function(now, mx) {
//as the opacity of current_fs reduces to 0 - stored in "now"
//1. scale previous_fs from 80% to 100%
scale = 0.8 + (1 - now) * 0.2;
//2. take current_fs to the right(50%) - from 0%
left = ((1-now) * 50)+"%";
//3. increase opacity of previous_fs to 1 as it moves in
opacity = 1 - now;
current_fs.css({'left': left});
previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});
},
duration: 800,
complete: function(){
current_fs.hide();
animating = false;
},
//this comes from the custom easing plugin
easing: 'easeInOutBack'
});
});
});
$(document).ready(function(){
$(".submit").click(function(){
return false;
});
});
解决方案
Currently I see that you've specified only a single step, for starters place all your bindings in a single $(document).ready or for short $(function(){});, so:
$(function() {
$(".previous").click(function(){
// stuff for previous ...
});
$(".next").click(function(){
// stuff for next ...
});
$(".submit").click(function(){
// you get the idea ...
});
});
Here is your fiddle updated (you were missing some resources, I hope I got them right). I hope this helps, good luck :)
这篇关于多步骤形式“下一步”按钮不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
