sklrboy sklrboy - 6 months ago 29
Ajax Question

Change the contact-form's html AFTER validation and mail sent

I'm working on a php powered contact-form for my page, where, after the submit button has been clicked AND (!) the mail has been sent, I would like to replace the content of the HTML. I could manage so far, that after

.btn
is clicked, the HTML gets replaces, but that happens before any validation would happen and the mail would be sent. Can you show me a way to do that please? Thanks a lot!



$(document).ready(function() {

var newHTML = '<div class="col-sm-12 text-center" style="color:white; background-color:#6f8595; padding-bottom:15px; border-radius:5px;"><h3>Thank you for your message!<br />We will get back to you as soon as possible!</h3></div>';

$('.btn').click(function(){
$('.form').html('').append(newHTML);
});
});

.contact-form {
margin-top:30px;
margin-bottom:70px;
}

.contact-form h1 {
margin-bottom:70px;
}

.contact-form input {
width:70%;
margin:10px auto 20px auto;
}

.message textarea {
max-width:80%;
width:80%;
margin:10px auto 20px auto;
height:100px;
}

.contact-form .btn {
background-color:#6f8595;
color:white;
transition:0.3s;
width:50%;
}

.contact-form .btn:hover {
background-color:white;
color:#6f8595;
transition:0.3s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">


<form class="form clearfix" action="index.php" method="post">
<div class="col-sm-6">
<p>Name:</p>
<input type="text" name="name" placeholder="Your full name here" required>
<p>Email:</p>
<input type="email" name="email" placeholder="Your email here" required>
</div>
<div class="col-sm-6">
<p>Message:</p>
<div class="message"><textarea name="message">Hello YourSite, </textarea></div>
<div><input class="btn" type="submit" name="btn-submit" value="Send message!" required/></div>
</div>
</form>




Answer

You will need Ajax to do this.

first we need a contact.php who will do the job and return a response to inform the client if the email has been sent or not. for example:

contact.php

<?php
if (mail('caffeinated@example.com', 'My Subject', 'message')) {
    echo json_encode(['error' => false]);
} else {
    echo json_encode(['error' => true]);
}

Then in your client, you need to do an ajax request to the contact.php and update the dom depending on the response of the request :

client.html

<script>
 $(document).ready(function() {

    var newHTML = '<div class="col-sm-12 text-center" style="color:white; background-color:#6f8595; padding-bottom:15px; border-radius:5px;"><h3>Thank you for your message!<br />We will get back to you as soon as possible!</h3></div>';

    $('.btn').click(function(){
        $.post('contact.php', $('.form').serialize(), function () {
            if (data.error == false) {
                $('.form').html('').append(newHTML);
            }
        })
    });
});
</script>


    <form class="form clearfix">
    <div class="col-sm-6">
        <p>Name:</p>
        <input type="text" name="name" placeholder="Your full name here" required>
        <p>Email:</p>
        <input type="email" name="email" placeholder="Your email here" required>
    </div>
    <div class="col-sm-6">
        <p>Message:</p>
        <div class="message"><textarea name="message">Hello YourSite, </textarea></div>
        <div><input class="btn" type="submit" name="btn-submit" value="Send message!" required/></div>
    </div>
    </form>