Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

PHP Loses effects with the post method of the form

lmnu

Coder
Hello,
When I add method="POST" (line 147) to my form I lose the effect of closing the modal :

PHP:
<?php

?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Test Popup Modal</title>

    <style>
    :root {
        --bg-color: #F5F9FC;
        --grad-color-1: #00d2ff;
        --grad-color-2: #3a47d5;
        --gradient: linear-gradient(90deg, var(--grad-color-1) 0%, var(--grad-color-2) 100%);
    }

    /*--====== CSS Reset ======--*/
    *,
    *::before,
    *::after {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    html {
        scroll-behavior: smooth;
    }

    body {
        font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
        background-color: var(--bg-color);
    }

    /*--====== Common Styles ======--*/
    .btn {
        background-image: var(--gradient);
        color: #fff;
        font-size: 1rem;
        padding: 0.6rem 1.8rem;
        border-radius: 50px;
        transition: transform 0.2s ease;
        border: none;
    }

    .btn:hover {
        transform: translateY(-2px);
    }

    /*--====== Modal ======--*/
    .modal {
        background-color: rgba(0, 0, 0, 0.3);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99;
        width: 100%;
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        pointer-events: none;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.4s ease, visibility 0.3s ease;
    }

    /* when Modal has open class */
    .modal.open {
        pointer-events: all;
        opacity: 1;
        visibility: visible;
    }

    .modal_wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 1.5rem;
        min-height: calc(100% - 3rem);
    }

    .modal_content {
        position: relative;
        background-color: var(--bg-color);
        width: 100vw;
        max-width: 800px;
        padding: 4rem;
        border-radius: 10px;
        text-align: center;
        overflow: hidden;
        transform: scale(0);
        transition: transform 0.5s ease;
    }

    /* when Modal is open then modal-content will... */
    .modal.open .modal_content {
        transform: scale(1);
    }

    .modal_body {
        margin: 2rem 0 3rem;
    }

    .modal_body p {
        font-size: 1.2rem;
        line-height: 1.6;
        letter-spacing: 0.8px;
    }

    .close_btn {
        font-size: 1.2rem;
        margin: 20px 0;
    }
    </style>


</head>

<body>
    <button class="btn nav_btn">Test 1</button>
    <button class="btn nav_btn">Test 2</button>

    <!--====== Modal-01 ======-->
    <div class="modal">
        <div class="modal_wrapper">
            <div class="modal_content">
                <div id="contact" role="dialog" tabindex="-1">
                    <div class="form-infos">
                        <div class="form-infos-container">
                            <h2>Hello 1</h2>
                            <button class="btn nav_btn close_btn">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--====== Modal-02 ======-->
    <div class="modal">
        <div class="modal_wrapper">
            <div class="modal_content">
                <div id="contact" role="dialog" tabindex="-1">
                    <div class="form-infos">
                        <form action="#" method="POST">
                            <h2>Hello 2</h2>
                            <input class="inp_name" type="text" /><br>
                            <button class="btn nav_btn close_btn">Close</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
    const modals = document.querySelectorAll('.modal');
    const nav_btn = document.querySelectorAll('.nav_btn');
    const close_btn = document.querySelectorAll('.close_btn');

    const openModal = (index) => {
        modals[index].classList.add('open');
    };

    const closeModal = (index) => {
        modals[index].classList.remove('open');
    };


    // opening the clicked Modal.
    nav_btn.forEach((currnavbtn, index) => {
        currnavbtn.addEventListener('click', () => {
            openModal(index);
        });
    });


    // closing the current opened Modal.
    close_btn.forEach((currCloseBtn, index) => {
        currCloseBtn.addEventListener('click', () => {
            closeModal(index);
        });
    });
    </script>
</body>

</html>

Thank you for your help
 
Solution
You can add e.preventDefault(); in the code to prevent the form from submitting:
JavaScript:
// closing the current opened Modal.
close_btn.forEach((currCloseBtn, index) => {
    currCloseBtn.addEventListener('click', (e) => {  //add e in the brackets
        e.preventDefault();
        closeModal(index);
    });
});
You can add e.preventDefault(); in the code to prevent the form from submitting:
JavaScript:
// closing the current opened Modal.
close_btn.forEach((currCloseBtn, index) => {
    currCloseBtn.addEventListener('click', (e) => {  //add e in the brackets
        e.preventDefault();
        closeModal(index);
    });
});
 
Solution

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom