JSFiddle - React, Tailwind, and code Playground

by Bardh Lohaj

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/fullcalendar/1.6.4/fullcalendar.css">
<script src="http://cdn.jsdelivr.net/fullcalendar/1.6.4/fullcalendar.min.js"></script>
<form id='contactform'>
    <input id="name" type="text" name="name" placeholder="Name" />
    <br/>
    <input id="email" type="text" name="email" placeholder="Email" />
    <br/>
    <input type="submit" name="submit" value="Submit" class="submitbutton" />
    <input type="reset" name="clearbutton" value="Clear" class="clearbutton" />
</form>
<div id="outcome"></div>

JavaScript

function processForm(e) {
    if (e.preventDefault) e.preventDefault();

    var name = document.getElementById('name').value;
    var email = document.getElementById('email').value;

    var params = "name=" + name + "&email=" + email;

    $.post("php/form.php?" + params, function (data) {
        var container = document.getElementById('outcome');
        container.innerHTML = data;
    })
        .fail(function () {
        alert("There has been an error, please try again");
    });

    return false;
}

var form = document.getElementById('contactform');
if (form.attachEvent) {
    form.attachEvent("submit", processForm);
} else {
    form.addEventListener("submit", processForm);
}