Hide "submit" button once a form is sent successfully, then show success message-CodePudding

At the moment I have a working contact form. I'd like to hide the "submit" button of my form when the form is sent successfully and then display a success message.

At the moment it redirects, which I've left for the purpose of this request.

I've tried multiple solutions, tweaking of the js but js sure isn't my strong point. I've left the CSS in also for the purpose of this question as I believe that will be the route I need to go down.

<< ? php
if (empty($_POST) === false) {

  session_start();

  function test_input($data) {
    $data = trim($data);
    $data = stripslashes($data);
    $data = htmlspecialchars($data);
    return $data;
  }

  $errors = array();

  if (isset($_POST['name'], $_POST['email'], $_POST['message'])) {
    $fields = array(
      'name' => $_POST['name'],
      'email' => $_POST['email'],
      'message' => $_POST['message']
    );

    foreach($fields as $field => $data) {
      if (empty($data)) {
        //$errors[] = "The " . $field . " is required";
        $errors[] = "Please fill-in the form correctly";
        break 1;
      }
    }

    if (empty($errors) === true) {
      if (!filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
        $errors[] = "Invalid e-mail address";
      }
    }

    if (empty($errors) === true) {
      $name = test_input($_POST['name']);
      $email = test_input($_POST['email']);
      $message = test_input($_POST['message']);

      $to = "[email protected]";
      $subject = "example | You have a new message from ".$name;

      $body = ......




        if (isset($_POST['name']) && isset($_POST['email']) && isset($_POST['message'])) {
          $data = $_POST['name'].
          ' == Email: '.$_POST['email'].
          ' Message: '.$_POST['message'].
          "\r\n";
          $ret = file_put_contents('entries.log', $data, FILE_APPEND | LOCK_EX);
          if ($ret === false) {
            die('There was an error writing this file');
          } else {
            echo "$ret bytes written to file";
          }
        } else {
          header('location: ../sendmail/redirect.html');
        }

      $headers = "MIME-Version: 1.0".
      "\r

#thank-you-message {
  display: none;
}

#thank-you-message.show {
  display: block;
}

<form action="/sendmail.php" method="post" onsubmit="return checkform(this);">
  <input type="text" name="name" id="" autocomplete="off" placeholder="Name" required><br>
  <input type="email" name="email" id="" autocomplete="off" placeholder="E-mail" required><br>
  <textarea name="message" id="" cols="30" rows="10" placeholder="Type Your Message" required></textarea>
  <button type="submit">Send</button>
</form>
<p id="thank-you-message">Thank you for contacting us. We will be in touch with you soon.</p>

CodePudding user response：

You can use JavaScript to hide this button or generate this site by using PHP.

You have two possibilities, cookies or sessions.

Check if cookie or session is set, if not display the button or form, if is set hide button or form.

This can be done within a If/Else condition and a simple „print“ function.

Like (PHP)

IF (isset xxx = true) {
   // print nothing
   // redirect to page xxx.html
   // or print Text like Lorem Ipsum
}
else {
   print '<form method=“POST“ action=“form.php“> … </form>';
}

After submit the form you have to set a session or cookie in „form.php“.

When a user come back to this site, the site will check the cookie or session and print the form or not.

You have to change the IF/Else condition to your needs.

You can also print a „Thank you page“ or something else you want, you can also redirect to a other page by the header function within php.

CodePudding user response：

Quick fix, you could try structuring your code in this format if using PHP

function save() {
$('.btn-danger').hide()
var number_i = $('#number_i').text();
var date_s = $('#date_s').text();
var name_p = "<?php echo $_POST['product_name']; ?>";
if (number_i != '___') {
  $.post('saveEntry.php', {number: number_i, date: date_s, name: name_p}, function() {
    $('#confirmation').text('Info: the data was saved!');
    $('#confirmation').attr('class', 'alert alert-success');
  })
} else {
  alert('Introdu Numar Bon Fiscal!');
}

};

CodePudding user response：

No need for JS for this. Assuming your form is parsing properly, you can add the following styles to your stylesheet.

#thank-you-message {
  display: none;
}

button:focus ~ #thank-you-message {
  display: block;
}

I removed your PHP and the rest of your form so that you can see a demonstration. See below:

Edit ~ added sample JS for the button to change text upon form submission. (Doesn't affect p displaying on button click)

function form_success(){
    document.getElementById("btn").innerHTML = "Sent!";
}

#thank-you-message {
  display: none;
}

button:focus {
  background-color: green;
  color: white;
}

button:focus~#thank-you-message {
  display: block;
}

<button type="submit" id="btn" onclick="form_success()">Send</button>
<p id="thank-you-message">Thank you for contacting us. We will be in touch with you soon.</p>