我试图根据选择显示表单的不同字段。它正常工作到几个阶段。在第6页，页面自动刷新，没有任何来自我方的输入。我的代码如下。请帮我解决这个错误。可以找到实际工作页面here.
function next(idshow,hide){
$("#page"+hide).hide();
$("#page"+idshow).show();
return false;
}<html>
<head>
<title>My Survey </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body>
<div class="col-md-12" id="page1">
<h1>WELCOME TO ONLINE
SURVEY </h1>
<button id="1" onclick="next(2,1)">NEXT</button>
</div>
<div class="col-md-12" id="page2" style="display:none">
<center><h1>IMPORTANT</h1> </center>
<p> If you Accept the terms and conditions and provide a relevant information, then you may get UPTO 1 year free trial of apps developed by company in future. </p>
<button id="2" onclick="next(3,2)">NEXT</button>
</div>
<div class="col-md-12" id="page3" style="display:none">
<h2><center> This app is only for survey and not responsible for any claims made by company.</center></h2>
<h3> <center>TERMS AND CONDITIONS </center></h3>
<p>1. IF YOU ACCEPT THE TERMS AND CONDITIONS, YOU GET UPTO 1 YEAR FREE TRIAL OF APPS MADE BY COMPANY (for purpose the survey is done). </p>
<p>2. AFTER ACCEPTING THE TERMS AND CONDITIONS FOLLOWING POINTS ARE BOUND TO THE CLIENT: <br>
a) You must provide all information which is asked by the company. <br>
b) In future, if required you provide more information if asked. <br>
c) If after accepting the terms and condition, not providing or non-cooperating in collecting relevant information, the company have all authority to cancel the contract . <br>
d) In future company has all powers to change the terms and conditions without prior notice. <br>
e) If any new clause to be added also accepted by the client. <br> </p>
<button id="3" onclick="next(4,3)">ACCEPT</button>
</div>
<div class="col-md-12" id="page4" style="display:none">
<p align="center"><strong>ARE YOU PROFESSIONAL?</strong></p>
<p><form name="myform" method="POST"> <input type="radio" name="r1" onclick="next(5,4)" value="YES">YES </p>
<p> <input type="radio" name="r1" onclick="next(17,4)" value="NO">NO </p>
</div>
<div class="col-md-12" id="page5" style="display:none">
<h2> Personal Information</h2>
<p>Profile Picture <input type="file" id="pic" class="myinput" name="sbm" align="left" accept="image/*" value="Browse"> </p>
<p>
FIRST NAME :
</p>
<p>
<input type="text" class="nm" name="name" id="name">
</p>
<p>
MIDDLE NAME:
</p>
<p> <input type="text" class="nm" name="mname" id="nm">
</p>
<p>
LAST NAME :
</p>
<p>
<input type="text" name="lname" class="nm" id="nm">
</p>
<p>
QUALIFICATION
</p>
<p>
<input type="text" name="qual" id="qual">
</p>
<p>
</p>
<p id="hd1"> example(MBBS,BHMS,DHMS ETC)
</p>
<p id="hd2">
DESGINATION:
</p>
<p> <input type="text" name="desg" id="desg">
</p>
<p>
</p>
<p>example(genral practioner, surgeon, skin specialist etc)
</p>
<p>
EXPIRENCE:
</p>
<p>
<input type="text" name="expi" id="expi">
</p>
<p>
<button id="5" onclick="next(6,5)">NEXT</button>
</p>
</div>
<div class="col-md-12" id="page6" style="display:none">
<h1> This is Page 6 </h1>
<button id="6" onclick="next(7,6)">NEXT</button>
</div>
<div class="col-md-12" id="page17" style="display:none">
<h1> This is Page 17</h1>
<button id="17" onclick="next(18,17)">NEXT</button>
</div>
<div class="col-md-12" id="page18" style="display:none">
<h1> This is page 18 </h1>
</div>
</form>
</body>
</html>
请帮我理解实际上有什么问题？
答案 0 :(得分：1)
<button type="button" id="b1"> 修复这些问题，您的HTML页面将正常运行。
在
下添加了工作代码
<html>
<head>
<title>My Survey</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
crossorigin="anonymous">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
crossorigin="anonymous"></script>
<script>
function next(idshow, hide) {
$("#page" + hide).hide();
$("#page" + idshow).show();
//return false;
}
</script>
</head>
<body>
<div class="col-md-12" id="page1">
<h1>WELCOME TO ONLINE SURVEY</h1>
<button type="button" id="b1" onclick="next(2,1)">NEXT</button>
</div>
<div class="col-md-12" id="page2" style="display: none">
<center>
<h1>IMPORTANT</h1>
</center>
<p>If you Accept the terms and conditions and provide a relevant
information, then you may get UPTO 1 year free trial of apps
developed by company in future.</p>
<button type="button" id="b2" onclick="next(3,2)">NEXT</button>
</div>
<div class="col-md-12" id="page3" style="display: none">
<h2>
<center>This app is only for survey and not responsible for
any claims made by company.</center>
</h2>
<h3>
<center>TERMS AND CONDITIONS</center>
</h3>
<p>1. IF YOU ACCEPT THE TERMS AND CONDITIONS, YOU GET UPTO 1 YEAR
FREE TRIAL OF APPS MADE BY COMPANY (for purpose the survey is done).
</p>
<p>
2. AFTER ACCEPTING THE TERMS AND CONDITIONS FOLLOWING POINTS ARE
BOUND TO THE CLIENT: <br> a) You must provide all information
which is asked by the company. <br> b) In future, if required
you provide more information if asked. <br> c) If after
accepting the terms and condition, not providing or non-cooperating
in collecting relevant information, the company have all authority to
cancel the contract . <br> d) In future company has all powers
to change the terms and conditions without prior notice. <br> e)
If any new clause to be added also accepted by the client. <br>
</p>
<button type="button" id="b3" onclick="next(4,3)">ACCEPT</button>
</div>
<div class="col-md-12" id="page4" style="display: none">
<p align="center">
<strong>ARE YOU PROFESSIONAL?</strong>
</p>
<p>
<input type="radio" name="r1" onclick="next(5,4)" value="YES">YES
</p>
<p>
<input type="radio" name="r1" onclick="next(17,4)" value="NO">NO
</p>
</div>
<form name="myform" method="POST" action="">
<div class="col-md-12" id="page5" style="display: none">
<h2>Personal Information</h2>
<p>
Profile Picture <input type="file" id="pic" class="myinput"
name="sbm" align="left" accept="image/*" value="Browse">
</p>
<p>FIRST NAME :</p>
<p>
<input type="text" class="nm" name="name" id="name">
</p>
<p>MIDDLE NAME:</p>
<p>
<input type="text" class="nm" name="mname" id="mnm">
</p>
<p>LAST NAME :</p>
<p>
<input type="text" name="lname" class="nm" id="lnm">
</p>
<p>QUALIFICATION</p>
<p>
<input type="text" name="qual" id="qual">
</p>
<p></p>
<p id="hd1">example(MBBS,BHMS,DHMS ETC)</p>
<p id="hd2">DESGINATION:</p>
<p>
<input type="text" name="desg" id="desg">
</p>
<p></p>
<p>example(genral practioner, surgeon, skin specialist etc)</p>
<p>EXPIRENCE:</p>
<p>
<input type="text" name="expi" id="expi">
</p>
<p>
<button type="button" id="b5" onclick="next(6,5)">NEXT</button>
</p>
</div>
</form>
<div class="col-md-12" id="page6" style="display: none">
<h1>This is Page 6</h1>
<button type="button" id="b6" onclick="next(7,6)">NEXT</button>
</div>
<div class="col-md-12" id="page17" style="display: none">
<h1>This is Page 17</h1>
<button type="button" id="b17" onclick="next(18,17)">NEXT</button>
</div>
<div class="col-md-12" id="page18" style="display: none">
<h1>This is page 18</h1>
</div>
</body>
</html>
答案 1 :(得分：1)
你应该指定type =＆＃34; button＆＃34;在你的按钮属性标签中
<button type="button" id="5" onclick="next(6,5)">NEXT</button>
如果您使用按钮而未指定类型，则它将作为包含表单的提交按钮。
您之前的按钮1,2,3,4有效，因为它们不在表单标记内
答案 2 :(得分：1)
您需要在form元素中添加onsubmit="return XXX();"来阻止form提交操作。
答案 3 :(得分：1)
按钮提交表单，作为其默认功能。它在你的函数中没有达到返回false，我怀疑是因为这个页面上的内容很少。
由于你包含了JQuery，你可以这样做：
$(document).ready(function(){
$('button').click(function(e){
e.preventDefault();
$(this).closest('div.col-md-12').hide();
$('#page' + $(this).data('show')).show();
});
});
这将为所有按钮提供onclick事件，您不必在每个按钮上重复onclick和功能。
上面将使用类col-md-12隐藏按钮的父div，并显示带有id页面的div +来自按钮的值（见下文）
然后按钮应该变为：
<button data-show="2">NEXT</button>
在数据显示属性中输入您要显示的下一个div的ID。