Why is my hide() and show() not working even without error in JQuery?

Question

I have a function that will show the other content and hide the recent content. But when I am clicking the submit input it's not working. I tried to use anchor tag and button tag and it has the same output.

html:

$(function(){
            $('.btn .button').on('click', function(){
                $('.container').show()
                $('.container-two').hide()

            })
        })

* {
    text-decoration: none;
}

body {
    background: #8390A2;
}

.student {
    padding-top: 10px;
    padding-bottom: 20px;
}

.form .student div {
    padding: 10px;
}

.form .student div input {
    background: #f1f5f9;
    margin-top: 5px;
    height: 20px;
}

.student-name {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
.form .student-name div {
    padding: 10px;
}

.form .student-name div input {
    background: #f1f5f9;
    margin-top: 5px;
    height: 20px;
}

.title-header {
    border-top-right-radius: 10%;
    border-top-left-radius: 10%;
    border-bottom: 1px solid grey;
    height: 40px;
    background: #efefef;
}

.title-header h3 {
    text-align: center;
    padding: 9px;
}

.form form div .info {
    position: relative;
}


.form .info label {
    position: absolute;
    color: grey;
    pointer-events: none;
    top: 36px;
    left: 15px;
    transition: 0.5s ease;
}

.form .info input:focus ~ label {
    transform: translateY(-20px);
    color: black;
}

.form .info input {
    outline: none;
    border: none;
    border-bottom: 1px solid silver;
    padding-top: 20px;
}

.form .student div:first-child input {
    width: 95%;
}

.form .info input:focus {
    border-color: #4CCEE8;
}

.form .btn {
    position: absolute;
    padding-top: 50px;
    right: 36.5%;
}

.form .btn input,
.form-two .btn input {
    border-radius: 15px;
    outline: none;
    width: 100px;
    height: 40px;
}

.form-two .address div {
    padding: 10px;
}

.address .info-two {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.form-two .student-info div {
    padding: 10px;
}

.form-two .student-info div input {
    background: #f1f5f9;
    margin-top: 5px;
    height: 20px;
}

.form-two .address div input {
    background: #f1f5f9;
    margin-top: 5px;
    height: 20px;
}

.form-two .student-info div input {
    background: #f1f5f9;
    margin-top: 5px;
    height: 20px;
}

.form-two form div .info {
    position: relative;
}


.form-two .info label {
    position: absolute;
    color: grey;
    pointer-events: none;
    top: 36px;
    left: 15px;
    transition: 0.5s ease;
}

.form-two .info input:focus ~ label {
    transform: translateY(-20px);
    color: black;
}

.form-two .info input {
    outline: none;
    border: none;
    border-bottom: 1px solid silver;
    padding-top: 20px;
}

.form-two .address div:first-child input {
    width: 95%;
}

.form-two .address div:last-child div {
    padding-left: 1px;
}

.form-two .address div:last-child div label {
    left: 8px;
}

.form-two .info input:focus {
    border-color: #4CCEE8;
}

.form-two .btn {
    position: absolute;
    padding-top: 14px;
    right: 36.5%;
}

.active {
    display: none;
}

main {
    border-radius: 1%;
    background: #f1f5f9;
    width: 27rem;
    min-height: 30rem;
    margin: auto;
    margin-top: 13rem;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2)
}

form h4 {
    margin: 10px;
}


@media only screen and (max-width: 1366px) {
    main {
    background: #f1f5f9;
    width: 27rem;
    min-height: 30rem;
    margin: auto;
    margin-top: 5rem;
    }   
}

<div class="container">
        <main>
            <div class="form">
                <div class="title-header">
                    <h3>Personal Data Information</h3>
                </div>
                <form action="" method="POST">
                    <div class="student">
                        <div class="info">
                            
                            <input type="text" name="Program">
                            <label>Program</label>
                        </div>
                        <div class="info">
                            
                            <input type="text" name="Student #">
                            <label>Student #</label>
                        </div>
                    </div>
                    <h4>Student Name</h4>
                    <div class="student-name">
                        <div class="info">
                            
                            <input type="text" name="Surname" id="surname">
                            <label>Surname</label>
                        </div>
                        <div class="info">
                            
                            <input type="text" name="Given Name" id="givenname">
                            <label>Given Name</label>
                        </div>
                        <div class="info">
                            
                            <input type="text" name="Middle Name" id="middlename">
                            <label>Middle Name</label>
                        </div>
                        <div class="info">
                            
                            <input type="text" name="Auxillary Name" id="auxillaryname">
                            <label>Auxillary Name</label>
                        </div>
                    </div>
                    <div class="btn">
                        <input type="submit" name="submit" value="Continue" class="button">
                    </div>
                </form>
            </div>
        </main>
    </div>

    <div class="container-two active">
        <main>
            <div class="form-two">
                <div class="title-header">
                    <h3>Personal Data Information</h3>
                </div>
                <form action="" method="POST">
                    <h4>Address</h4>
                    <div class="address">
                        <div class="info">
                            
                            <input type="text" name="City Address">
                            <label>City Address</label>
                        </div>
                        <div class="info-two" style="padding: 0px;">
                            <div class="info">
                                
                                <input type="text" name="Student #" style="width: 70%;">
                                <label>Zip Code</label>
                            </div>
                            <div class="info">
                                
                                <input type="text" name="Student #" style="width: 70%;">
                                <label>Tel no.</label>
                            </div>
                        </div>
                        <div class="info">
                            
                            <input type="email" name="Student #" style="width: 95%;">
                            <label>Email Address</label>
                        </div>
                        <div class="info">
                            
                            <input type="text" name="City Address" style="width: 95%;">
                            <label>Home Address</label>
                        </div>
                        <div class="info">
                                
                            <input type="text" name="Student #" style="width: 34%;">
                            <label>Zip Code</label>
                        </div>
                    </div>
                    <div class="btn">
                        <input type="submit" name="submit" value="Continue">
                    </div>
                </form>
            </div>
        </main>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" charset="utf-8"></script>

I tried to use addClass() and removeClass(), also css() but nothing happens. I also find an answer but nothing like my problem.

Test your page with the browser "Network" developer tool open. — Pointy, Mar 23 '21 at 13:45
@Andreas, to go to another container. I tried to use anchor tag and button tag but nothing happens. — pickledrick, Mar 23 '21 at 13:45
@pickledrick not the purpose of *your* submit button, but generally what would a *submit* button do? There's a clue in the name... — freedomn-m, Mar 23 '21 at 13:47
@AdrienLAMOTTE there's two buttons, the first has the class `` — freedomn-m, Mar 23 '21 at 13:47
Exactly, your button is submitting your form and thus reloading the page (after your script has run). Reloading the page restores it to the original - ie with `container` still showing - so you *think* it's doing nothing, but if you watch closely and watch the network tab, you'll see what it's *actually* doing. — freedomn-m, Mar 23 '21 at 13:49
All the wrong guesses should be removed, Andreas already found the problem. You can't submit a form and at the same time stay on the same page. Either no submit at all like @freedomn-m suggested, or prevent default submit behaviour using `event.preventDefault()`. — Daniel W., Mar 23 '21 at 13:49
Ok, add `return false` at the end of your `.on("click", function () { _your code__ ; return false; })` (or `preventDefault()` as the edit in the comment above) — freedomn-m, Mar 23 '21 at 13:52
You also have your show/hide around the wrong way - you want to hide the first container and show the second: https://jsfiddle.net/3wtcLa2d/ — freedomn-m, Mar 23 '21 at 13:52
@freedomn-m prevent default submit behaviour must be attached to submit event listener `$('.form').on('submit', function(e) { e.preventDefault(); });` — Daniel W., Mar 23 '21 at 13:53
@freedomn-m, the `` works fine now. sorry to forgot that I changed the hide and show to addclass and removeclass. — pickledrick, Mar 23 '21 at 13:56
My code works fine now. thank you for the answers and I learned from all your suggestions. Thank you! — pickledrick, Mar 23 '21 at 13:58
@DanielW. no - if you prevent default of the click event it doesn't fire the default click event and it's the default click event which *triggers* the submit event. It *can* be attached to the form submit, but there's no need for a form submit to be cancelled in this case as there's no need for a form submit. https://jsfiddle.net/3wtcLa2d/1/ — freedomn-m, Mar 23 '21 at 13:58
@freedomn-m but it doesn't prevent from hitting enter and submitting. The whole onclick is wrong, you must use onsubmit. — Daniel W., Mar 23 '21 at 14:04
@freedomn-m it's normal behaviour, you can submit any form without a submit button. That's why onclick is wrong here anyways. But I also agree that a normal button is better than a submit button here! — Daniel W., Mar 23 '21 at 14:12

score 0 · Answer 1 · answered Mar 23 '21 at 14:05

First of all, change the first submit type input to a button. Instead of <input type="submit" name="submit" value="Continue" class="button"> Should be <button class="button" type="button">Continue</button> This will prevent the form submission, and add the missing "button" class to the button.

Then modify the jquery code like this:

$(function(){
  $('.btn .button').on('click', function(e){
    $('.container').hide()
    $('.container-two').show()
  })
})

My answer was based on the assumption that you want to show the second container after pressing the first "continue" button.

$(function(){
  $('.btn .button').on('click', function(e){
    $('.container').hide();
    $('.container-two').show();
  });
});

* {
    text-decoration: none;
}

body {
    background: #8390A2;
}

.student {
    padding-top: 10px;
    padding-bottom: 20px;
}

.form .student div {
    padding: 10px;
}

.form .student div input {
    background: #f1f5f9;
    margin-top: 5px;
    height: 20px;
}

.student-name {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
.form .student-name div {
    padding: 10px;
}

.form .student-name div input {
    background: #f1f5f9;
    margin-top: 5px;
    height: 20px;
}

.title-header {
    border-top-right-radius: 10%;
    border-top-left-radius: 10%;
    border-bottom: 1px solid grey;
    height: 40px;
    background: #efefef;
}

.title-header h3 {
    text-align: center;
    padding: 9px;
}

.form form div .info {
    position: relative;
}


.form .info label {
    position: absolute;
    color: grey;
    pointer-events: none;
    top: 36px;
    left: 15px;
    transition: 0.5s ease;
}

.form .info input:focus ~ label {
    transform: translateY(-20px);
    color: black;
}

.form .info input {
    outline: none;
    border: none;
    border-bottom: 1px solid silver;
    padding-top: 20px;
}

.form .student div:first-child input {
    width: 95%;
}

.form .info input:focus {
    border-color: #4CCEE8;
}

.form .btn {
    position: absolute;
    padding-top: 50px;
    right: 36.5%;
}

.form .btn input,
.form-two .btn input {
    border-radius: 15px;
    outline: none;
    width: 100px;
    height: 40px;
}

.form-two .address div {
    padding: 10px;
}

.address .info-two {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.form-two .student-info div {
    padding: 10px;
}

.form-two .student-info div input {
    background: #f1f5f9;
    margin-top: 5px;
    height: 20px;
}

.form-two .address div input {
    background: #f1f5f9;
    margin-top: 5px;
    height: 20px;
}

.form-two .student-info div input {
    background: #f1f5f9;
    margin-top: 5px;
    height: 20px;
}

.form-two form div .info {
    position: relative;
}


.form-two .info label {
    position: absolute;
    color: grey;
    pointer-events: none;
    top: 36px;
    left: 15px;
    transition: 0.5s ease;
}

.form-two .info input:focus ~ label {
    transform: translateY(-20px);
    color: black;
}

.form-two .info input {
    outline: none;
    border: none;
    border-bottom: 1px solid silver;
    padding-top: 20px;
}

.form-two .address div:first-child input {
    width: 95%;
}

.form-two .address div:last-child div {
    padding-left: 1px;
}

.form-two .address div:last-child div label {
    left: 8px;
}

.form-two .info input:focus {
    border-color: #4CCEE8;
}

.form-two .btn {
    position: absolute;
    padding-top: 14px;
    right: 36.5%;
}

.active {
    display: none;
}

main {
    border-radius: 1%;
    background: #f1f5f9;
    width: 27rem;
    min-height: 30rem;
    margin: auto;
    margin-top: 13rem;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2)
}

form h4 {
    margin: 10px;
}


@media only screen and (max-width: 1366px) {
    main {
    background: #f1f5f9;
    width: 27rem;
    min-height: 30rem;
    margin: auto;
    margin-top: 5rem;
    }   
}

<div class="container">
        <main>
            <div class="form">
                <div class="title-header">
                    <h3>Personal Data Information 1</h3>
                </div>
                <form action="" method="POST">
                    <div class="student">
                        <div class="info">
                            
                            <input type="text" name="Program">
                            <label>Program</label>
                        </div>
                        <div class="info">
                            
                            <input type="text" name="Student #">
                            <label>Student #</label>
                        </div>
                    </div>
                    <h4>Student Name</h4>
                    <div class="student-name">
                        <div class="info">
                            
                            <input type="text" name="Surname" id="surname">
                            <label>Surname</label>
                        </div>
                        <div class="info">
                            
                            <input type="text" name="Given Name" id="givenname">
                            <label>Given Name</label>
                        </div>
                        <div class="info">
                            
                            <input type="text" name="Middle Name" id="middlename">
                            <label>Middle Name</label>
                        </div>
                        <div class="info">
                            
                            <input type="text" name="Auxillary Name" id="auxillaryname">
                            <label>Auxillary Name</label>
                        </div>
                    </div>
                    <div class="btn">
                    <button class="button" type="button">Continue</button>
                    </div>
                </form>
            </div>
        </main>
    </div>

    <div class="container-two active">
        <main>
            <div class="form-two">
                <div class="title-header">
                    <h3>Personal Data Information 2</h3>
                </div>
                <form action="" method="POST">
                    <h4>Address</h4>
                    <div class="address">
                        <div class="info">
                            
                            <input type="text" name="City Address">
                            <label>City Address</label>
                        </div>
                        <div class="info-two" style="padding: 0px;">
                            <div class="info">
                                
                                <input type="text" name="Student #" style="width: 70%;">
                                <label>Zip Code</label>
                            </div>
                            <div class="info">
                                
                                <input type="text" name="Student #" style="width: 70%;">
                                <label>Tel no.</label>
                            </div>
                        </div>
                        <div class="info">
                            
                            <input type="email" name="Student #" style="width: 95%;">
                            <label>Email Address</label>
                        </div>
                        <div class="info">
                            
                            <input type="text" name="City Address" style="width: 95%;">
                            <label>Home Address</label>
                        </div>
                        <div class="info">
                                
                            <input type="text" name="Student #" style="width: 34%;">
                            <label>Zip Code</label>
                        </div>
                    </div>
                    <div class="btn">
                        <input type="submit" name="submit" value="Continue">
                    </div>
                </form>
            </div>
        </main>
    </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Zamir Manihar · Answer 2 · 2021-03-24T05:15:54.823

-1

I copied and pasted the code to codepen and found that he is trying to show the div which is already visible and trying to hide the div which is already hidden, so replaced the hide() and show() with each other.

prevent the default submit event and add hide() and show() on correct divs

$(function(){
  $('.btn .button').on('click', function(e){
    e.preventDefault();
    $('.container').hide()
    $('.container-two').show()
  })
})

edited Mar 24 '21 at 05:15

answered Mar 23 '21 at 13:55

Zamir Manihar

121
12

1

Consider leaving a comment with your answer explaining the OP why this could solve the problems, Code examples are rarely useful on it's own – Carsten Løvbo Andersen Mar 23 '21 at 14:02
I copied and pasted the code to [codepen](https://codepen.io/pen/) and found that he is trying to show the div which is already visible and trying to hide the div which is already hidden, so replaced the `hide()` and `show()` with each other – Zamir Manihar Mar 23 '21 at 14:08
Please, edit your answer to add description instead of a comment. – Syscall Mar 23 '21 at 19:14

Why is my hide() and show() not working even without error in JQuery?

2 Answers2