Reputation: 157
please help me with my snippet.. I have this code and I don't know what is wrong.. This is my code
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<form id="krishna">
<input type="text" readonly value="krishna" ><br>
<button id="next">Next</button>
</form>
<form id="radha">
<input type="text" readonly value="radha" ><br>
<button id="prev">Previous</button>
</form>
<script>
$(document).ready(function(e) {
$("#radha").hide();
$("#next").click(function() {
$("#radha").show();
$("#krishna").hide();
});
$("#prev").click(function() {
$("#radha").hide();
$("#krishna").show();
});
});
</script>
When I click next It seems does not go to the next form.. thank you all.
Upvotes: 1
Views: 325
Reputation: 1397
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<div id="krishna">
<input type="text" readonly value="krishna" ><br>
<button id="next">Next</button>
</div>
<div id="radha">
<input type="text" readonly value="radha" ><br>
<button id="prev">Previous</button>
</div>
<script>
$(document).ready(function(e) {
$("#radha").hide();
$("#next").click(function() {
$("#radha").show();
$("#krishna").hide();
console.log("next click");
});
$("#prev").click(function() {
$("#radha").hide();
$("#krishna").show();
});
});
</script>
Working fine if you change
form
in the
div
Upvotes: -1
Reputation: 2865
This is how I did it.
$('form button').click(function(e){
$("#radha, #krishna").toggle();
return false;
});
Notes:
Upvotes: 0
Reputation: 64
Your code is fine but What is happening here that your submit button required post request. So you can prevent this behavior by e.preventDefault() function of jquery. I have updated the jquery code as below.
$(document).ready(function(e) {
$("#radha").hide();
$("#next").click(function(e){
e.preventDefault();
$("#radha").show();
$("#krishna").hide();
});
$("#prev").click(function(e){
e.preventDefault();
$("#radha").hide();
$("#krishna").show();
});
});
visit the following link to get demo on jsfiddle :
Upvotes: 0
Reputation: 7076
Because it is trying to submit the form. So you need to make that button type to button. It is "submit" by default in a form.
<form id="krishna">
<input type="text" readonly value="krishna" ><br>
<button type="button" id="next">Next</button>
</form>
<form id="radha">
<input type="text" readonly value="radha" ><br>
<button type="button" id="prev">Previous</button>
</form>
Upvotes: 0
Reputation: 99620
You need to prevent the default action, which is the form submit. When you prevent the default action from happening, you will see the desired result
Check this fiddle
$(document).ready(function () {
$("#radha").hide();
$("#next").click(function (e) {
e.preventDefault();
$("#radha").show();
$("#krishna").hide();
});
$("#prev").click(function (e) {
e.preventDefault();
$("#radha").hide();
$("#krishna").show();
});
});
P.S I am not sure why you are still using jquery 1.3.x.
Also, check the fiddle for the updated HTML
Upvotes: 2
Reputation: 4177
This may be due to some missing attibutes of your form
HTML
<form id="krishna">
<input type="text" readonly value="krishna" />
<br />
<button type='button' id="next">Next</button>
</form>
<form id="radha">
<input type="text" readonly value="radha" />
<br />
<button type='button' id="prev">Previous</button>
</form>
Script
$(document).ready(function () {
$("#radha").hide();
$("#next").click(function () {
$("#radha").show();
$("#krishna").hide();
});
$("#prev").click(function () {
$("#radha").hide();
$("#krishna").show();
});
});
check here
Upvotes: 4