How can I redirect users to different pages based on a hidden element in PHP?

I’m trying to use a hidden element to go to a new page. So firstly I have JavaScript validation which validates my credit card number, cvv, month, and year.

JavaScript:

In this JavaScript card below I have multiple functions where I use RegExp and validate. This works perfectly.

function checkall() {
    if (check_ccnum() &&
        check_seccode() &&
        check_exp()) {
        alert('Success');
        // getElementById('hidden').value = 1;
    } else {
        alert("Somethng went wrong, please try again...");
        // getElementById('hidden').value = -1;
        // location.reload();

    }
}

HTML/PHP:

<form>
            <label for="ccnum">Credit card number:</label>
            <input type="number" id="ccnum" name="cardnumber" placeholder="1111-2222-3333-4444" size=16>
        <label for="expmonth">Expiration Date:</label>
        <select id="exMonth" title="select a month">
            <option value="0">Select month</option>
            <option value="01">January</option>
            <option value="02">February</option>
            <option value="03">March</option>
            <option value="04">April</option>
            <option value="05">May</option>
            <option value="06">June</option>
            <option value="07">July</option>
            <option value="08">August</option>
            <option value="09">September</option>
            <option value="10">October</option>
            <option value="11">November</option>
            <option value="12">December</option>
        </select>
        <select id="exYear" title="select a year">
            <option value="0">Select Year</option>
            <option value="2021">2021</option>
            <option value="2022">2022</option>
            <option value="2023">2023</option>
            <option value="2024">2024</option>
            <option value="2025">2025</option>
            <option value="2026">2026</option>
            <option value="2027">2027</option>
            <option value="2028">2028</option>
            <option value="2029">2029</option>
            <option value="2030">2030</option>
            <option value="2031">2031</option>
        </select>
            <label for="cvv">CVV</label>
            <input type="text" id="Codecvv" name="cvv" placeholder="352 (can be 4 digits)">
            <input type='submit' value='Checkout Now!' id='btn'>
            <input type="hidden" id='hidden' name="hidden"> 
        </form>

This is my HTML code for where I created the form.

What I want to do is using the hidden element and the JavaScript validation I want to if the validation is correct the hidden element = 1 and then move to a .PHP file if its wrong then the hidden element = -1 and reload the page.

PHP code:

<?php


        $h = isset($_POST['hidden']) ? $_POST['hidden'] : '';

        if ($h == 1) {
            //access db and insert record
            $link = new mysqli("localhost", "root", "", "creditcard");
            /* check connection */
            if ($link->connect_errno) {
                echo "Connect failed " . $link->connect_error;
                exit();
            }
            header("location: Success.php");

            /* close connection */
            $link->close();
        }

        if ($h == -1) {
            header('location: reload()');
        }

        ?>

The Problem:

when I click the submit button, nothing happens and the page just reloads. what I want it to do is that the button when clicked then using the hidden either it reloads the page or goes to a new page using the hidden element.

btn inside the HTML doc:

<script>
            const btn = document.getElementById('btn');
            btn.addEventListener('click', checkall);
        </script>

update 1:
even if I use

<form action="Success.php" method="post">

the page still moves to the nest PHP file even if the validations are wrong.

update 2:

function checkall() {
    if (check_ccnum() &&
        check_seccode() &&
        check_exp()) {
        alert('Success');
        getElementById('hidden').value = 1;
    } else {
        alert("Somethng went wrong, please try again...");
        getElementById('hidden').value = -1;
        // location.reload();

    }
}

32 thoughts on “How can I redirect users to different pages based on a hidden element in PHP?”

Leave a Comment