CODEWITHSUNDEEP
javascriptphpjquerymysqlmysqli
Maruli Davin
Maruli Davin

Reputation: 83

How to use innerHTML by Id or class in php echo and get value from database?

I'm using javascript to replace the validation code value after pressing the button, the code looks like this:

document.getElementById('showCode').addEventListener('click', function() {
  const icon = this.querySelector('i');
  if (icon.classList.contains('fa-eye')) {
    icon.classList.remove('fa-eye');
    icon.classList.add('fa-eye-slash');
    document.getElementById('validCode').innerHTML = 'validationcodehere';
  } else {
    icon.classList.remove('fa-eye-slash');
    icon.classList.add('fa-eye');
    document.getElementById('validCode').innerHTML = '●●●●●●●●●●●●●●';
  }
});
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-4">
        <span id='validCode'>●●●●●●●●●●●●●●</span>
        <button id='showCode' class='btn btn-secondary btn-sm ms-4'><i class="fa fa-eye"></i></button>
    </div>
</body>
</html>

Code above is running fine but not running when put inside php echo. The php7 code I'm using looks like this:

<?php
while ($row=mysqli_fetch_array($query))
    {
    echo "<tr>";
    echo "<td>".$row['id']."</td>";
    echo "<td>".$row['orderid']."</td>";
    echo "<td>".$row['validation']."</td>";
    echo "<td><span id='validCode'>●●●●●●●●●●●●●●</span><button id='showCode' class='btn btn-secondary btn-sm ms-4'><i class='fa fa-eye'></i></button></td>";
    echo "<td>".$row['order_date']."</td>";
    echo "</tr>";
    }
?>

My question is how to make it to run in a php echo session and how to get the value of "document.getElementById('validCode').innerHTML = 'validationcodehere';" validationcodehere the value from the database ".$row['validation']." Thanks.

Upvotes: 0

Views: 505

Answers (1)

imvain2
imvain2

Reputation: 15857

I got rid of the IDs and replaced with classes.

I also got rid of the dots in the span and put the verification code in a data attribute.

Using classList.toggle I toggle the icon classes on/off.

and I use the repeat function to show a dot for each character in the code.

let showCodeBTN = document.querySelector(".btn-showCode");
showCodeBTN.addEventListener("click", showCode);
  const codeEl = document.querySelector("[data-code]");
  codeEl.innerHTML = "●".repeat(codeEl.getAttribute("data-code").length);


function showCode() {

  const code = codeEl.getAttribute("data-code");

  const icon = this.querySelector('i');
  const showingCode = (icon.classList.contains('fa-eye-slash'));
  icon.classList.toggle("fa-eye");
  icon.classList.toggle("fa-eye-slash");
  codeEl.innerHTML = (showingCode) ? "●".repeat(code.length) : code;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <div class="container mt-4">
    <span data-code="12345678"></span>
    <button class='btn-showCode btn btn-secondary btn-sm ms-4'><i class="fa fa-eye"></i></button>
  </div>
</body>

</html>

PHP ECHO:

echo "<td><span data-code='{$row['validation']}'></span><button  class='btn-showCode btn btn-secondary btn-sm ms-4'><i class='fa fa-eye'></i></button></td>";

Upvotes: 1

Related Questions