Jquery click, show and hide function

Question

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.

@Krishna.. Looks like above code works fine for me.. Pls check this ... jsbin.com/uqUPipI/1/edit — Rishi Php
– Rishi Php, Commented Oct 1, 2013 at 4:50

Anil kumar · Accepted Answer · 2013-10-01 04:48:29Z

4

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

answered Oct 1, 2013 at 4:48

Anil kumar

4,1774 gold badges25 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Phil Over a year ago

Might want to highlight what you've changed as it isn't completely obvious

Krishna Over a year ago

thank you.. ill accept your answer and I actually found out that you can also use <a></a> instead of type button.. but i will still use your code.. thanks a lot

Phil Over a year ago

Oh, I just meant make a note stating you added type="button" to the button elements and maybe explain why that works

karthikr · Accepted Answer · 2013-10-01 04:48:33Z

2

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

answered Oct 1, 2013 at 4:48

karthikr

100k26 gold badges208 silver badges191 bronze badges

Comments

Coder · Accepted Answer · 2013-10-01 04:51:25Z

0

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>

answered Oct 1, 2013 at 4:51

Coder

7,09613 gold badges59 silver badges87 bronze badges

Comments

arpan sharma · Accepted Answer · 2013-10-01 04:54:36Z

0

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/

answered Oct 1, 2013 at 4:54

arpan sharma

644 bronze badges

Comments

Kolby · Accepted Answer · 2013-10-01 04:55:38Z

0

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.

edited Oct 1, 2013 at 4:55

answered Oct 1, 2013 at 4:50

Kolby

2,8633 gold badges28 silver badges44 bronze badges

2 Comments

Phil Over a year ago

This would prevent clicking anywhere in the form which probably isn't desired

Kolby Over a year ago

Just change the selector to form button then.

Ashisha Nautiyal · Accepted Answer · 2013-10-01 05:07:20Z

-1

<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

answered Oct 1, 2013 at 5:07

Ashisha Nautiyal

1,3952 gold badges19 silver badges39 bronze badges

Collectives™ on Stack Overflow

Jquery click, show and hide function

6 Answers 6

3 Comments

Comments

Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

Comments

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related