0

I have a contact form on my website. I'd like to change the text of the submit button to say "submitted" after the form has successfully submitted, and maybe even make it say "submitting" while the form is submitting. I am unsure of how to do this, i could do an onclick event that would change the text, but not the route i want to take as the message could fail to send and the button would still say submitted.

Here is my html for the form

<form method="post" action="contact.php">
    <input type="text" name="name" placeholder="Name"><br>
    <input type="email" name="email" placeholder="Email"><br>
    <textarea rows="8" cols="65" name="message"placeholder="Message"></textarea><br>
    <input id="submit" type="submit" name="submit" value="Let's Get In Touch">
</form>

and here is my php code:

<?php

    $name = $_POST['name'];
    $email = $_POST['email'];
    $message = $_POST['message'];
    $from = 'From: Portfolio Website'; 
    $to = 'kyle.a.binger@gmail.com'; 
    $subject = 'Message From Personal Site';

    $body = "From: $name\n E-Mail: $email\n Message:\n $message";

    if ($_POST['submit']) {
        if (mail ($to, $subject, $body, $from)) { 
            echo '<p>Your message has been sent!</p>';
        } else { 
            echo '<p>Something went wrong, go back and try again!</p>'; 
        }
    }
?>

Is there a way to do this with my existing php code? Thanks in advance for any help.

Kyle Bing
  • 253
  • 2
  • 6
  • 20

2 Answers2

0

What you are going to need is something to pass the data to the php script, and return something/echo something back without leaving the page.

Take a look into AJAX. You will be able to exactly this. Here's a link to one of the first posts on stackoverflow that showed up. Here's a link to w3schools to give you a quick example/idea.

Community
  • 1
  • 1
Son
  • 193
  • 5
0

If you don't want to use AJAX and you're posting to page itself you can do the following

<form method="post" action=""> <!-- removed the PHP file name to post to itself -->
    <input type="text" name="name" placeholder="Name"><br>
    <input type="email" name="email" placeholder="Email"><br>
    <textarea rows="8" cols="65" name="message"placeholder="Message">  </textarea><br>
    <?php
        if (isset($_POST['submit'])) {
        echo '<input id="submit" type="button" name="submit" value="Submitted">'; //Changed type submit to button
        } else {
        echo '<input id="submit" type="submit" name="submit" value="Let\'s Get In Touch">';
        }
    ?>
</form>

<?php
    $name = $_POST['name'];
    $email = $_POST['email'];
    $message = $_POST['message'];
    $from = 'From: Portfolio Website';
    $to = 'kyle.a.binger@gmail.com';
    $subject = 'Message From Personal Site';

    $body = "From: $name\n E-Mail: $email\n Message:\n $message";

    if ($_POST['submit']) {
        if (mail ($to, $subject, $body, $from)) {
            echo '<p>Your message has been sent!</p>';
        } else {
            echo '<p>Something went wrong, go back and try again!</p>';
        }
    }
?>
PhizoR
  • 36
  • 2