2016-09-06 69 views
0

我想根據選擇顯示不同的表單域。它正在正常工作,直到幾個階段。在第6頁,頁面自動刷新,無需從我身邊輸入任何信息。我的代碼如下。請幫我解決這個錯誤。實際工作頁面,可以發現here.通過JQuery不顯示錶單顯示

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"> &nbsp;</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

添加了以下工作代碼 – Abhijeet

+0

嘗試用上面給定的替換窗體開始標記。它不會在點擊按鈕時提交表單。 –

回答

1

應指定類型= 「按鈕」

新增工作代碼屬性標籤這樣

<button type="button" id="5" onclick="next(6,5)">NEXT</button> 

它將用作包含表單的提交按鈕。

以前的按鈕1,2,3,4的作品,因爲它們不是表單標籤

1
  1. 爲按鈕分配的ID僅爲數字ID應以 字符開頭,可以包含字母,數字和'_'。
  2. 您的表單標記應在正文打開後啓動。
  3. 在頁面中驗證重複的ID。
  4. 將添加按鈕類型替換爲「按鈕」。例如<button type="button" id="b1">

修復這些問題您的html頁面將正常工作。如果您使用的按鈕沒有指定在按鈕下方

<html> 
 
<head> 
 
<title>My Survey</title> 
 
<link rel="stylesheet" 
 
\t href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" 
 
\t integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" 
 
\t crossorigin="anonymous"> 
 
<script 
 
\t src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
 
<script 
 
\t src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" 
 
\t integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" 
 
\t crossorigin="anonymous"></script> 
 
<script> 
 
\t function next(idshow, hide) { 
 
\t \t $("#page" + hide).hide(); 
 
\t \t $("#page" + idshow).show(); 
 
\t \t //return false; 
 
\t } 
 
</script> 
 

 
</head> 
 
<body> 
 

 

 
\t <div class="col-md-12" id="page1"> 
 
\t \t <h1>WELCOME TO ONLINE SURVEY</h1> 
 
\t \t <button type="button" id="b1" onclick="next(2,1)">NEXT</button> 
 
\t </div> 
 

 
\t <div class="col-md-12" id="page2" style="display: none"> 
 
\t \t <center> 
 
\t \t \t <h1>IMPORTANT</h1> 
 
\t \t </center> 
 
\t \t <p>If you Accept the terms and conditions and provide a relevant 
 
\t \t \t information, then you may get UPTO 1 year free trial of apps 
 
\t \t \t developed by company in future.</p> 
 
\t \t <button type="button" id="b2" onclick="next(3,2)">NEXT</button> 
 
\t </div> 
 

 
\t <div class="col-md-12" id="page3" style="display: none"> 
 
\t \t <h2> 
 
\t \t \t <center>This app is only for survey and not responsible for 
 
\t \t \t \t any claims made by company.</center> 
 
\t \t </h2> 
 
\t \t <h3> 
 
\t \t \t <center>TERMS AND CONDITIONS</center> 
 
\t \t </h3> 
 
\t \t <p>1. IF YOU ACCEPT THE TERMS AND CONDITIONS, YOU GET UPTO 1 YEAR 
 
\t \t \t FREE TRIAL OF APPS MADE BY COMPANY (for purpose the survey is done). 
 
\t \t </p> 
 
\t \t <p> 
 
\t \t \t 2. AFTER ACCEPTING THE TERMS AND CONDITIONS FOLLOWING POINTS ARE 
 
\t \t \t BOUND TO THE CLIENT: <br> a) You must provide all information 
 
\t \t \t which is asked by the company. <br> b) In future, if required 
 
\t \t \t you provide more information if asked. <br> c) If after 
 
\t \t \t accepting the terms and condition, not providing or non-cooperating 
 
\t \t \t in collecting relevant information, the company have all authority to 
 
\t \t \t cancel the contract . <br> d) In future company has all powers 
 
\t \t \t to change the terms and conditions without prior notice. <br> e) 
 
\t \t \t If any new clause to be added also accepted by the client. <br> 
 
\t \t </p> 
 
\t \t <button type="button" id="b3" onclick="next(4,3)">ACCEPT</button> 
 
\t </div> 
 

 
\t <div class="col-md-12" id="page4" style="display: none"> 
 
\t \t <p align="center"> 
 
\t \t \t <strong>ARE YOU PROFESSIONAL?</strong> 
 
\t \t </p> 
 
\t \t <p> 
 

 
\t \t \t <input type="radio" name="r1" onclick="next(5,4)" value="YES">YES 
 
\t \t </p> 
 
\t \t <p> 
 
\t \t \t <input type="radio" name="r1" onclick="next(17,4)" value="NO">NO 
 
\t \t </p> 
 
\t </div> 
 
\t <form name="myform" method="POST" action=""> 
 
\t \t <div class="col-md-12" id="page5" style="display: none"> 
 
\t \t \t <h2>Personal Information</h2> 
 
\t \t \t <p> 
 
\t \t \t \t Profile Picture <input type="file" id="pic" class="myinput" 
 
\t \t \t \t \t name="sbm" align="left" accept="image/*" value="Browse"> 
 
\t \t \t \t &nbsp; 
 
\t \t \t </p> 
 
\t \t \t <p>FIRST NAME :</p> 
 
\t \t \t <p> 
 
\t \t \t \t <input type="text" class="nm" name="name" id="name"> 
 
\t \t \t </p> 
 
\t \t \t <p>MIDDLE NAME:</p> 
 
\t \t \t <p> 
 
\t \t \t \t <input type="text" class="nm" name="mname" id="mnm"> 
 
\t \t \t </p> 
 
\t \t \t <p>LAST NAME :</p> 
 
\t \t \t <p> 
 
\t \t \t \t <input type="text" name="lname" class="nm" id="lnm"> 
 
\t \t \t </p> 
 

 
\t \t \t <p>QUALIFICATION</p> 
 
\t \t \t <p> 
 
\t \t \t \t <input type="text" name="qual" id="qual"> 
 
\t \t \t </p> 
 
\t \t \t <p></p> 
 
\t \t \t <p id="hd1">example(MBBS,BHMS,DHMS ETC)</p> 
 

 
\t \t \t <p id="hd2">DESGINATION:</p> 
 
\t \t \t <p> 
 
\t \t \t \t <input type="text" name="desg" id="desg"> 
 
\t \t \t </p> 
 
\t \t \t <p></p> 
 
\t \t \t <p>example(genral practioner, surgeon, skin specialist etc)</p> 
 
\t \t \t <p>EXPIRENCE:</p> 
 
\t \t \t <p> 
 
\t \t \t \t <input type="text" name="expi" id="expi"> 
 
\t \t \t </p> 
 
\t \t \t <p> 
 
\t \t \t \t <button type="button" id="b5" onclick="next(6,5)">NEXT</button> 
 
\t \t \t </p> 
 
\t \t </div> 
 
\t </form> 
 
\t <div class="col-md-12" id="page6" style="display: none"> 
 
\t \t <h1>This is Page 6</h1> 
 
\t \t <button type="button" id="b6" onclick="next(7,6)">NEXT</button> 
 
\t </div> 
 

 
\t <div class="col-md-12" id="page17" style="display: none"> 
 
\t \t <h1>This is Page 17</h1> 
 
\t \t <button type="button" id="b17" onclick="next(18,17)">NEXT</button> 
 
\t </div> 
 

 
\t <div class="col-md-12" id="page18" style="display: none"> 
 
\t \t <h1>This is page 18</h1> 
 
\t </div> 
 

 
</body> 
 
</html>

1

您需要防止form的提交行動通過在form要素加上onsubmit="return XXX();"內。

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和顯示與標識網頁的DIV +從按鈕的值(見下文)

然後按鈕應該成爲:

<button data-show="2">NEXT</button> 

在數據顯示屬性中輸入您想要顯示的下一個div的ID。