多步表单“下一步”按钮不起作用
Posted
技术标签:
【中文标题】多步表单“下一步”按钮不起作用【英文标题】：Multi-step form "next" button not working 【发布时间】：2014-01-18 06:43:57 【问题描述】：我对 javascript 和 jQuery 有基本的了解。我在这里有一个多步骤表格，它将我的表格分成 3 个步骤。但是“下一步”按钮似乎不起作用。我花了一整天的时间在互联网上进行研究，尽我所能，但仍然没有解决我的问题。
以下是我拥有的文件。我确定这不是由于浏览器问题，因为我尝试了所有主要浏览器。 js 代码对我来说似乎也不错。任何人都可以给我一些启示？？
new_video.html（它是一个 .php 文件，但我删除了所有不必要的 php 代码）
<!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;
);
);
【问题讨论】：
一眼就能告诉你，你不需要那么多$(document).ready()。你准备一把小提琴怎么样？
@DimitarDimitrov 对不起，我是在网上学习后立即应用它们的，仍然是 js 的新手。这就是小提琴：link 如果你能给我一些建议，不胜感激。
【参考方案1】：
目前我看到您只指定了一个步骤，对于初学者来说，将所有绑定放在一个 $(document).ready 或简称为 $(function());，所以：
$(function()
$(".previous").click(function()
// stuff for previous ...
);
$(".next").click(function()
// stuff for next ...
);
$(".submit").click(function()
// you get the idea ...
);
);
这是您的fiddle 更新（您缺少一些资源，我希望我没有弄错）。我希望这会有所帮助，祝你好运:)
【讨论】：
非常感谢！你小提琴帮我弄清楚我的代码有什么问题。除了你指出的 $(document).ready 之外，我意识到 @user3148857 太棒了，我很高兴能帮上忙 :) 哦，顺便说一句，设计很棒 :) 继续努力以上是关于多步表单“下一步”按钮不起作用的主要内容，如果未能解决你的问题，请参考以下文章
Kivymd on_release 按钮使用 MDCard 进行下一步的操作不起作用