http://stackoverflow.com/questions/16284859

by Gerald Gillespie

HTML

<form>
    <input class="reset" id="gbname" type="text" value="john" />
    <input class="reset" id="gbmessage" type="text" value="hi" />
    <input id="submit" type="submit" />
</form>
<div id="kommentarer"/>kommentarer</div>
<div id="successmessage"/>

JavaScript

$(document).ready(function () {
    
   function clearForm(){
        $('input.reset').each(function(){
            $(this).val('');
        });
    }
    
    $("form").on('submit', function () {
        alert('submitted!');
        var gbname = $("#gbname");
        var gbmessage = $("#gbmessage");

        formFields = [gbname[0], gbmessage[0]]
        var warning = false;

        for (i = 0; i < formFields.length; i++) {
            formFields[i].style.backgroundColor = "white";
            if (formFields[i].value == "") {
                formFields[i].style.backgroundColor = "red"
                $(formFields[i]).bind("keyup", resetBgColor);
                $(formFields[i]).bind("change", resetBgColor);
                warning = true;
            }
        }

        if (warning == true) {
            alert("Vänligen fyll i fälten korrekt!");
            return false;
        } else {
            var J = JSON.stringify({
                        "gbname": gbname.val(),
                        "gbmessage": gbmessage.val()
                    });
            console.log(J);
            $.ajax({
                type: "POST",
                url: '/echo/json/',
                datatype: 'json',
                data: {
                    json: J,
                    delay: 3
                },
                success: function (data) {
                    $("#successmessage").html(data);
                    $("#successmessage").hide();
                    $("#successmessage").fadeIn(1500); //Fade in error/success-meddelande

                    var comment = $("<div class='film2'><p class='names'><b>Namn:</b>" + data.gbname + "</p> <p class='messages'><b>Meddelande:</b>" + data.gbmessage + "</p></div>");

                    $("#kommentarer").prepend(comment);
                    clearForm();


                }  // end success
            }); // end ajax

            return false;
        }  // end else

        return false;

    });

});