I want to change or remove my html element by getting URL parameters that I set after successful register

Question

First of all I must say that I'm very new to website design and coding so please make your answer simple thanks a lot .

So I have my file register.php that contains my form . I have my action file named register-controller.php that gets the data from user , checks it and inserts it to database .

What I need is that whenever the register is success , my form gets hidden or removed and my new div shows up that contains 'register successful' . ( On the same page "register.php" )

Can I use the variable that I passed to header "register=success" to do this action ? Should I use AJAX ? JSON ? what should I do ? Please give me the simplest answer thank you all .

MY "register.php" file contains these :

 <?php require_once "../DB/users-database.php"; ?> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="/Header.CSS"> <link rel="stylesheet" href="/Style.CSS"> <link rel="stylesheet" href="/Footer.CSS"> <script src="https://kit.fontawesome.com/38b3678073.js" crossorigin="anonymous"></script> <script src="../JS/main.js" async></script> <title>ثبت نام | PCGA</title> </head> <body> <?php include '../header.php' ?> <div class="register-container"> <form action="../controllers/register-controller.php" method = "POST"> <label class = "email-label" for="email">ایمیل</label> <input type="text" id="email" name="email" placeholder="example@example.com" value = '<?php if(isset($_REQUEST['email'])){echo $_REQUEST['email'];}else{echo '';} ?>'> <?php if (isset($_REQUEST['error']) && $_REQUEST['error'] == 'emptyEmail'){ echo "<span class = 'empty-email'>فیلد نباید خالی باشد *</span>"; } else if (isset($_REQUEST['error']) && $_REQUEST['error'] == 'invalidEmailFormat') { echo "<span class = 'formaterr-email'>فرمت ایمیل نادرست است*</span>"; } ?> <label class = "phone-label" for="phone">شماره موبایل</label> <input type="text" id="phone" name="phone" placeholder="09xxxxxxxxx" value = '<?php if(isset($_REQUEST['phone'])){echo $_REQUEST['phone'];}else{echo '';} ?>'> <?php if (isset($_REQUEST['error']) && $_REQUEST['error'] == 'emptyPhone'){ echo "<span class = 'empty-phone'>فیلد نباید خالی باشد *</span>"; } else if (isset($_REQUEST['error']) && $_REQUEST['error'] == 'invalidPhoneNumber') { echo "<span class = 'formaterr-phone'>شماره موبایل حداکثر 11 عدد است و حروف قابل قبول نیست*</span>"; } ?> <label class = "user-label" for="username">نام کاربری</label> <input type="text" id="username" name="username" placeholder="Username" value = '<?php if(isset($_REQUEST['username'])){echo $_REQUEST['username'];}else{echo '';} ?>'> <?php if (isset($_REQUEST['error']) && $_REQUEST['error'] == 'emptyUsername'){ echo "<span class = 'empty-user'>فیلد نباید خالی باشد *</span>"; } else if (isset($_REQUEST['error']) && $_REQUEST['error'] == 'invalidUserName') { echo "<span class = 'formaterr-user'>فرمت نام کابری نادرست است*</span>"; } ?> <label class="pass-label" for="password">رمز عبور</label> <input type="password" id = "password" name = "password" placeholder = "Password" > <?php if (isset($_REQUEST['error']) && $_REQUEST['error'] == 'emptyPass'){ echo "<span class = 'empty-pass'>فیلد نباید خالی باشد *</span>"; } ?> <div class="checkbox-container"> <input type="checkbox" class = 'checkbox-style' name = 'rules-check'> <label for="checkbox" class="checkbox-label">من قوانین فروشگاه را کامل مطالعه کرده ام و با آن موافق هستم</label> <?php if (isset($_REQUEST['rules'])){ echo "<span class = 'rules-error'>قبول قوانین اجباری است و آن را حتما مطالعه کنید *</span>"; } ?> </div> <button type="submit" name = "submit" id="submit">ثبت نام</button> </form> </div> <?php if (isset($_REQUEST['register'])){ echo "<div class = 'register-success'> <span class = 'register-success-span'>ثبت نام با موفقیت انجام شد</span> </div>" ; } ?> <?php include '../footer.php' ?> </body> </html>

MY "register-controller.php" file contains these :

 <?php require "../DB/users-database.php"; function test_input($data) { $data = trim($data); $data = stripslashes($data); $data = htmlspecialchars($data); return $data; } if (isset($_POST['submit']) && $_POST['rules-check']) { $email = test_input($_POST["email"]); $phone = test_input($_POST["phone"]); $username = test_input($_POST["username"]); $pass = test_input($_POST["password"]); if (empty($username)){ header("Location: ../page/register.php?error=emptyUsername&username=".$username."&email=".$email."&phone=".$phone); exit(); } elseif (empty($phone)){ header("Location: ../page/register.php?error=emptyPhone&username=".$username."&email=".$email."&phone=".$phone); exit(); } elseif (empty($pass)){ header("Location: ../page/register.php?error=emptyPass&username=".$username."&email=".$email."&phone=".$phone); exit(); } elseif (empty($email)){ header("Location: ../page/register.php?error=emptyEmail&username=".$username."&email=".$email."&phone=".$phone); exit(); } elseif (!filter_var($email , FILTER_VALIDATE_EMAIL)) { header("Location: ../page/register.php?error=invalidEmailFormat&username=".$username."&phone=".$phone); exit(); } elseif (!preg_match("/^[az\\d_]{2,20}$/i" , $username)){ header("Location: ../page/register.php?error=invalidUserName&email=".$email."&phone=".$phone); exit(); } elseif (!preg_match("/^[0-9]{11}+$/" , $phone)){ header("Location: ../page/register.php?error=invalidPhoneNumber&email=".$username."&phone=".$phone); exit(); } else { $sql = "SELECT username FROM registered WHERE username = ?"; $stmt = mysqli_stmt_init($conn); if(!mysqli_stmt_prepare($stmt , $sql)){ header("Location: ../page/register.php?error=SQLcheckUser"); exit(); } else { mysqli_stmt_bind_param($stmt , "s" , $username); mysqli_stmt_execute($stmt); mysqli_stmt_store_result($stmt); $rowcount = mysqli_stmt_num_rows($stmt); if($rowcount > 0 ) { header("Location: ../page/register.php?error=UserNameTaken"); exit(); } else { $sql = "INSERT INTO registered(email,phone,username,password) VALUES(?,?,?,?)"; $stmt = mysqli_stmt_init($conn); if(!mysqli_stmt_prepare($stmt , $sql)){ header("Location: ../page/register.php?error=SQLInsert"); exit(); } else { $hased_pass = password_hash($pass , PASSWORD_DEFAULT); mysqli_stmt_bind_param($stmt , "ssss" , $email , $phone , $username , $hased_pass); mysqli_stmt_execute($stmt); header("Location: ../page/register.php?register=success"); exit(); } } } } mysqli_stmt_close($stmt); mysqli_close($conn); } elseif (isset($_POST['submit']) && !isset($_POST['rules-check'])) { $email = test_input($_POST["email"]); $phone = test_input($_POST["phone"]); $username = test_input($_POST["username"]); $pass = test_input($_POST["password"]); header("Location: ../page/register.php?rules=notChecked&username=".$username."&email=".$email."&phone=".$phone); exit(); } else { header("Location: ../page/register.php?access=denied"); exit(); } ?>

Answer 1

You can render the part of the page you prefer depending on your URL parameters by doing

<?php
if ($_GET['success']) { ?>

   <-- YOUR HTML SUCCESS CODE -->

<?php } else { ?>

   <-- YOUR HTML FORM CODE -->

<?php }
?>

Answer 2

Ajax is the best solution for me (it can be difficult to understand but the code is clean), here an example of Ajax with your situation :
Extras is the ID of all the input in the form
Page is the PHP page to be executed (register-controller.php)
Origin is the ID where you want to put the result, Origin can be null .
(To have something in the return, you have to put an echo in the php file you specified in Page )

static Ajax(origin,Extras,page)
{
    var xhr = new XMLHttpRequest();
    let formData = new FormData();
    
    for(var element in Extras)
    {
        if(document.getElementById(element))
        {
           formData.append(element,document.getElementById(element));
        }
        else
        {
          let checkbox = document.getElementsByName(element);
          if(checkbox)
          {
             //Checkbox don't work with an ID so put instead a name
             for(let i=0;i<checkbox.length;i++)
             {
                if(checkbox[i].checked)
                {                    
                   formdata.append(element+i,"1")
                }
                else
                {
                   formdata.append(element+i,"0")
                }
             }
          }
        }
    }
    xhr.open('POST',page);

    xhr.addEventListener('readystatechange', function () {

        if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
            let i= xhr.responseText;
            if(origin!=null)
            {
                if(document.getElementById(origin) && xhr.responseText!="")
                 // the result   document.getElementById(origin).innerHTML=xhr.responseText;
            }
            finish(i);
        }
        else if (xhr.readyState === XMLHttpRequest.DONE && xhr.status != 200) {
            // error message XHR,
            let textError = "Ajax Error : " + xhr.status + ", " + xhr.statusText + ", ";
            alert(textError);
        }

    });

    // send
    xhr.send(formData);
}

I want to change or remove my html element by getting URL parameters that I set after successful register

Question

2 answers

solution1
0 ACCPTED 2021-07-30 10:22:29

solution2
0 2021-07-30 10:51:50

I want to change or remove my html element by getting URL parameters that I set after successful register

Question

2 answers

solution1 0 ACCPTED 2021-07-30 10:22:29

solution2 0 2021-07-30 10:51:50

solution1
0 ACCPTED 2021-07-30 10:22:29

solution2
0 2021-07-30 10:51:50