CODEWITHSUNDEEP
javascriptjquery
user1837293
user1837293

Reputation: 1666

Hide / show doesn't work as expected with jQuery (JavaScript)?

How do I hide / show a html-node using jQuery selectors? See Fiddle here. The intent is to hide the text1 paragraph by clicking the first button and to hide the other text by clicking on the other button. Now, the node is hidden but then reappears. Please explain?

Here's the html part

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="js/test.js"></script>
</head>
<body>
<p id="text1">text1</p>
<p id="text2">text2</p>
<form>
<input type="submit" id="hide1"></input>
<input type="submit" id="hide2"></input>
</form>

</body>
</html>

and here the JavaScript / jQuery code:

$(document).ready(function(){
    $("#hide1").click(function(){
        $("#text1").hide();
        $("#text2").show();
    });
    $("#hide2").click(function(){
        $("#text2").hide();
        $("#text1").show();
    });
});

Upvotes: 0

Views: 389

Answers (6)

vol7ron
vol7ron

Reputation: 42099

Several options here.

  1. Don't submit the form. You can accomplish this by not using submit buttons. To do this, set your input type to button, rather than submit

    <input type="button" id="hide1" value="hide"> <!-- note: input close tag removed/unnecessary —>

    You could also use <button> element:

    <button type="button" id="hide1">hide</button>

  2. Stop execution after the button is clicked (fiddle). This can be accomplished by preventing the default action for the event, or by returning false from the function:

    $(document).ready(function(){
    $("#hide1").click(function(evnt){  // make sure to localize/name the event argument
        $("#text1").hide();
        $("#text2").show();
        return false;  // or evnt.preventDefault()
    });
    $("#hide2").click(function(evnt){  // make sure to localize/name the event argument
        $("#text2").hide();
        $("#text1").show();
        return false;  // or evnt.preventDefault()
    });
});

Upvotes: 1

dmeglio
dmeglio

Reputation: 2830

You can either change the type to button, or if you have a reason to keep them as submit, you can do the following:

$(document).ready(function(){
    $("#hide1").click(function(e){
        $("#text1").hide();
        $("#text2").show();
        e.preventDefault();
    });
    $("#hide2").click(function(e){
        $("#text2").hide();
        $("#text1").show();
        e.preventDefault();
    });
});

You're submitting the form which essentially reloads the page. the e.preventDefault() prevents that action.

Upvotes: 2

Brent Roose
Brent Roose

Reputation: 39

By default, the a submit input type will do as said: submit the form, resulting in a page refresh. There is a way to prevent this default behaviour though:

// event.preventDefault();
$("#hide1").click(function(event){
    event.preventDefault();

    // continue
});

preventDefault() will prevent the default behaviour to be triggered, in this case: submitting the form.

Upvotes: 0

Hannan Hossain
Hannan Hossain

Reputation: 740

Default behavior of a submit button is to post form. So, either you have to use preventDefault() method or you can return false to prevent form post if you want to keep those button as submit button.

$(document).ready(function(){
   $("#hide1").click(function(e){
       $("#text1").hide();
       $("#text2").show();
       return false;
   });
   $("#hide2").click(function(e){
       $("#text2").hide();
       $("#text1").show();
       return false;
   });
});

Upvotes: 1

Aram
Aram

Reputation: 5705

You use the form tag in the html and using button of type submit on it, so it post backs the page and so you see the labels both show up again after post back this will fix your issue (change the button type to be button)

<body>
<p id="text1">text1</p>
<p id="text2">text2</p>
<form>
<input type="button" value='button1' id="hide1"></input>
<input type="button" value='button2' id="hide2"></input>
</form>
</body>

Upvotes: 2

elixenide
elixenide

Reputation: 44823

Change type="submit" to type="button". Otherwise, it submits the form.

Upvotes: 2

Related Questions