JSFiddle - React, Tailwind, and code Playground
HTML
<p> Your e-mail:
<input type="text" style="background-color: #F2EBAE;" size="30" maxlength="40" name="from" />
</p>
<p>
Subject:
<input type="text" style="background-color: #F2EBAE;" size="30" maxlength="50" name="subject" />
</p>
<p>Message:<br />
<textarea rows="10" cols="50" wrap="physical" name="content"></textarea>
<br /><br />
<center>
<input type="button" id="submit-button" value="Send message" />
</p>
<div style="display: none;" id="loading"><h2>Sending..</h2></div>
<div style="display: none;" id="message-sent"><h1>Message sent!</h1></div>
JavaScript
$(function(){
$("#submit-button").click(function(){
$("#loading").fadeIn(100).show();
var from_data = $("#from").val();
var subject_data = $("#subject").val();
var content_data = $("#content").val();
//var mydata = "from=" + from_data + "&subject=" + subject_data + "&content=" + content_data;
$.ajax({
type: "POST",
url: "send.php",
data: {
from: from_data,
subject: subject_data,
content: content_data
},
success: function(){
$("#loading").fadeOut(100).hide();
$("#form").fadeOut(100).hide();
$('#message-sent').fadeIn(500).show();
}
});
});
});