<!DOCTYPE html>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
#loading-img{
display:none;
}
.response_msg{
margin-top:10px;
font-size:13px;
background:#E5D669;
color:#ffffff;
width:250px;
padding:3px;
display:none;
}
</style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-8">
            <h1><img src="Inquiry.png" width="80px">Add Your Map to the database! </h1>
            <form name="map-form" action="" method="post" id="map-form">
                <div class="form-group">
                   <label for="Creator">Creator</label>
                    <input type="text" class="form-control" name="Creator" placeholder="Creator Name" required>
                </div>
                <div class="form-group">
                    <label for="exampleInputEmail1">Short Link (Can be  up to 16 Chars) </label>
                    <input type="ShortLink" class="form-control" name="Short_Link" placeholder="ShortLink" required>
                </div>
                <div class="form-group">
                    <label for="LongLink">Long Link (the code after map=? from old) </label>
                    <input type="text" class="form-control" name="Long_Link" placeholder="LongLink" required>
                </div>
                <div class="form-group">
                   <label for="Sharestring">ShareString 1.3</label>
                   <textarea name="Sharestring" class="form-control" rows="3" cols="28" rows="5" placeholder="ShareSting 1.3"></textarea> 
                </div>
                <div class="form-group">
                    <label for="WaLa">Water or Land?</label>
                    <input type="text" class="form-control" name="Wa_La" placeholder="Is this on Water or Landlocked?" required>
                </div>
                <div class="form-group">
                    <label for="mapType">Offense or Defense</label>
                    <input type="text" class="form-control" name="Off_Def" placeholder="Offense or Defense?" required>
                </div>
                <button type="submit" class="btn btn-primary" name="submit" value="Submit" id="submit_form">Submit</button>
                <img src="img/loading.gif" id="loading-img">
            </form>
            <div class="response_msg"></div>
        </div>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#map-form").on("submit",function(e){
        e.preventDefault();
        if($("#map-form [name='Creator']").val() === '')
        {
            $("#map-form [name='Creator']").css("border","1px solid red");
        }
        else if ($("#map-form [name='Sharestring']").val() === '')
        {
            $("#map-form [name='Sharestring']").css("border","1px solid red");
        }
        else
        {
            $("#loading-img").css("display","block");
            var sendData = $( this ).serialize();
            $.ajax({
                type: "POST",
                url: "get_response.php",
                data: sendData,
                success: function(data){
                    $("#loading-img").css("display","none");
                    $(".response_msg").text(data);
                    $(".response_msg").slideDown().fadeOut(3000);
                    $("#map-form").find("input[type=text], input[type=text],input[type=text], textarea, input[type=text], input[type=text]").val("");
                }
            });
        }
    });
    $("#map-form input").blur(function(){
        var checkValue = $(this).val();
        if(checkValue != '')
        {
            $(this).css("border","1px solid #eeeeee");
        }
    });
});
</script>
</body>
</html>