Krishna
Krishna

Reputation: 157

Jquery click, show and hide function

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

Answers (6)

Ashisha Nautiyal
Ashisha Nautiyal

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

Kolby
Kolby

Reputation: 2865

This is how I did it.

http://jsfiddle.net/GnzWZ/2/

$('form button').click(function(e){
    $("#radha, #krishna").toggle();
    return false;
});

Notes:

  • return false is the jquery solutions for preventdefault.
  • You can simplify your selectors and optimize your code a little more.
  • Avoid making style changes that should be originally made in CSS.

Upvotes: 0

arpan sharma
arpan sharma

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 :

http://jsfiddle.net/4N95Q/

Upvotes: 0

Coder
Coder

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.

JSFidle Demo

<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

karthikr
karthikr

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

Anil kumar
Anil kumar

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

Related Questions