Show a div after the form is submitted (or after pressing the "Send" button)

Question

My task is to make a div visible after submitting a form. The problem is: after submitting the form, the div appears for 0.5 sec, then it disappears again.

This is the relevant code part. I want to show the div with id="data".

<form action="" method="post" onsubmit="show_div()">
  <div class="request">
    <center>
      <img id="logo" src="/img/n1_red.png" alt="">
      <h1 id="t_request" class="item">Account Name</h1>
      <br/>
      <input type="text" id="request" name="Request" value="<?php echo $cloud; ?>" class="item"><br/>
      <input type="submit" class="bttn" class="item" onclick="show_div()" value="Send" /><br/>
    </center>
  </div>
  
  <div id="data" style="display:none">
    <h2 id="t_mail">Mail</h2>
    <p class="result"><?php echo $Email; ?></p>
    
    <h2 id="t_password">Password</h2>
    <input type="checkbox" id="pass_visibility" onclick="unhide_password()" value="Unhide pass"/>
    <label for="pass_visibility" id="pass_visibility_label">(Unhide pass)</label>
    <p class="pass_result" id="text_hidden_pass">Password is hidden.</p>
    <p class="result" id="text_pass" style="display:none"><?php echo $Password; ?></p>
    
    <h2 id="t_total_gb">Total GB</h2>
    <p class="result"><?php echo $Total_GB; ?></p>
    
    <h2 id="t_gb_used">Used GB</h2>
    <p class="result"><?php echo $GB_Used; ?></p>
    
    <h2 id="t_about">About</h2>
    <p class="result"><?php echo $About; ?></p>
    
    <h2 id="t_key">KEY</h2>
    <p class="result"><?php echo $Decryption; ?></p>
    
    <h2 id="t_authy">Authy</h2>
    <p class="result"><?php echo $Authy; ?></p>
    
    <h2 id="t_nr_acc">Acc name</h2>
    <p class="result"><?php echo $Name; ?></p>
  </div>
</form>

and this is the JavaScript code:

var div = document.getElementById("data");

function show_div() {
    div.style.display = "block";
}

I tried to do this in 2 different methods:

First one was to add onclick="show_div() to the submit button.

<input type="submit" class="bttn" class="item" onclick="show_div()" value="Send" /><br/>

Then I added onsubmit="show_div()" to the submit form.

<form action="" method="post" onsubmit="show_div()">

As I said, with this method (after submitting the form/clicking the button) the result is not as expected. The div appears for 0.5 sec, then it disappears again.

Not sure if you need, but here is the CSS for id="data":

#data {
    border-top: dashed 3px rebeccapurple;
    border-left: dashed 3px rebeccapurple;
    padding-left: 20px;
    display: block;
}

And here the PHP code:

$cloud = "";
$Email = "";
$Password = "";
$Name = "";
$Total_GB = "";
$GB_Used = "";
$About = "";
$Decryption = "";
$Authy = "";



if($_SERVER["REQUEST_METHOD"] == "POST") { 



    $servername = "localhost";
    $username = "root";
    $password = "";
    $db = "xxx";


    $con = mysql_connect($servername,$username,$password);

    if (!$con) {

    die('Could not connect: ' . mysql_error());

    }

    mysql_select_db("xxx", $con); 


    $cloud = $_POST["Request"];

    // Query
    $query = "SELECT * FROM Clouds WHERE Name = '$cloud' LIMIT 1";
    $result = mysql_query($query) or die(mysql_error());

    if ($result >= 1) {
        while($row = mysql_fetch_assoc($result)) {

            $Email = $row['Email'];
            $Password = $row['Password'];
            $Name = $row['Name'];
            $Total_GB = $row['Total_GB'];
            $GB_Used = $row['GB_Used'];
            $About = $row['About'];
            $Decryption = $row['Decryption'];
            $Authy = $row['Authy'];
            
            }
    } else {
        //$error_not_found = "Account not found!";
    }
}

I am missing something? Any advice for me? Thanks

Another Stack Overflow question: I checked everything. I followed her tips too. No result. Well... The same result

Answer 1

This is a snippet you may use. It is not possible to show a div and send the form together, see the comment of esque above.

<form id="form1" action="..." method="post">
  <!-- here your form fileds -->
</form>

// true = show div --- false = send form
var showDiv = true;

// form id selector
var myForm = document.querySelector("#form1");

// bind submit event to form
myForm.addEventListener("submit", function(event) {
  if (showDiv == false) {
    console.log('send form');
    return;
  }
  event.preventDefault();
  console.log('Show div, form not send');
  var div = document.getElementById("data");
  div.style.display = "block";
});