initialize javascript in php script for a contact

Question

Hi there working on a simple contact form.

<form action="mail.php" method="POST">
  <input type="text" id="name" name="name" placeholder="Name" required><br />
  <input type="text" id="email" name="email" placeholder="Mail" required><br />
  <textarea name="message" placeholder="Nachricht" required></textarea><br />
  <button name="submit" type="submit" id="submit">send</button>
</form>

with a simple php mailer

<?php 
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$formcontent="Von: $name \n Nachricht: $message" ;
$recipient = "[e-mail]";
$subject = "$betreff";
$mailheader = "Von: $email \r\n";
mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
echo "Thank You!" //need to be removed;
?>

Im using a simple javascript for changing the button to 'sending'

var send = document.getElementById('submit');
    if(send) {
        send.onclick = function () {
            this.innerHTML = 'sending';
        }
    }

Is it possible to change the button innerhtml to sent after the php script is successfully done? Also how can I avoid the redirection to the mail.php?

First it should show the send. After clicking sending should appear and when the mail.php is dont sent should appear in the button.

Any ideas or suggestions?

best regards dennym

Edit: Further Progress and solution error on contact form submit via jquery ajax

Answer 1

You should use an XHR (AJAX) request.

Rather than writing plain javascript like in your example, you'll get further faster with a javascript framework such as jQuery.

Something like this should do the trick:

$('form#formId').submit(function(){

    //set submit label to sending
    $('form#formId #submit').html('sending');

    $.post('mail.php', function(){
        //set submit label to sent
        $('form#formId #submit').html('sent');
    });

    //returning false to prevent native submission of form.
    return false;

});

You'll need to give your form an ID attribute so that you can selectively select it.

Answer 2

Is it possible to change the button innerhtml to sent after the php script is successfully done?

If you reload the same template you can have the button rendered as sent. You have to track the state of the form though on the backend. YOu could change your form to submit through javascript using ajax. After a successful response is received you can change the innerHTML.

Also how can I avoid the redirection to the mail.php?

Don't submit the form. Use javascript to collect values and make an ajax request.