CODEWITHSUNDEEP
javascriptjqueryhtmlforms
Pt. Raman Sharma
Pt. Raman Sharma

Reputation: 309

Form Display through JQuery not working

I am trying to display different fields of the form according to selection. It is working properly till few stages. At 6th page, the page refreshes automatically without any input from my side. My code is below. Please help me gettiig out of this error. The actual working page can be found 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"> &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>

Please help me understand what problem is there actually??

Upvotes: 0

Views: 78

Answers (4)

Abhijeet
Abhijeet

Reputation: 4309

  1. Id's assigned to buttons are only numbers id should start with character and can contain alphabets,numbers and '_'.
  2. Your form tag should start after body open.
  3. Validate duplicate Id's in your page.
  4. Replace add button type as "button". e.g. <button type="button" id="b1">

Fix these problems your html page will work properly.

Added working code below

<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">
				&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="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>

Upvotes: 1

iliaz
iliaz

Reputation: 395

The button submits the form, as its default function. It doesn't reach the return false in your function and I am suspecting because of the little content on this pages.

Since you are including JQuery, you can do:

$(document).ready(function(){
    $('button').click(function(e){
        e.preventDefault();
        $(this).closest('div.col-md-12').hide();
        $('#page' + $(this).data('show')).show();
    });
});

This will give all buttons an onclick event and you will not have to repeat the onclick and function on each one.

The above will hide the button's parent div with class col-md-12 and show the div with id page + the value from the button (see below)

Then the button should become:

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

On data show attribute you enter the id of the next div you want to show.

Upvotes: 1

passion
passion

Reputation: 1360

You need to prevent form's submitting action by adding onsubmit="return XXX();" in your form element.

Upvotes: 1

R.K.Saini
R.K.Saini

Reputation: 2708

You should specify type="button" in your button attributes tag like this

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

If you are using button without specifying the type it will work as submit button for containg form.

your previous button 1,2,3,4 works because they are not inside form tag

Upvotes: 1

Related Questions