Untitled

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" type="text/css" href="homeStyle.css">
<title>Register</title>
<style>
body  {
    /*background-image: url("background.jpg");
    background-size: 1350px 800px;*/
}
</style>

    <link rel="stylesheet" href="assets/css/main.css" />
    <link rel="stylesheet" href="assets/css/app.css" />

</head>
<body onload='getTags()'>

<div class="w3-col m7">
<div class="wrapper">

    <div class="cover-whole-page">
        <img class="overlay-gradiant" src="assets/imgs/overlay.png" />
    </div>

    <div class="main-text">
        გინდა გაიგო ცნობებზე ნამდვილია თუ მითია, სწორედ რომ შენთვის შექმნილა , სუპერ საიტი პითია
    </div>


    <div class="register-container">
        <div class="search-container-in">

            <div class="search-container-text green-text">დარეგისტრირდი</div>

            <form class="input-container-register " id="form" action="UserRegistration" method="post">

                <div class="search-input-outer register-inp">
                    <input class="search-input" id='idName' name="userName" type="text" value="" placeholder="სახელი">
                </div>

                <div class="search-input-outer register-inp">
                    <input class="search-input"  type="password" id='idPass' name="password" onkeyup='check()' type="text" value="" placeholder="პაროლი">
                    <b id="check"></b>
                </div>

                <div class="search-input-outer register-inp">
                    <input class="search-input"  type="email" name="mail" value="" placeholder="ელ-ფოსტა">
                </div>
<!--
                <div class="checkbox-outer">

                    <div class="choose-product-item no-margin">
                        <input class="choose-product-radio ng-untouched ng-valid ng-dirty" formcontrolname="chooseProduct" type="checkbox" id="1">
                        <label for="1"><span ></span>მეცნიერება</label>
                    </div>


                    <div class="choose-product-item">
                        <input class="chooseProduct ng-untouched ng-valid ng-dirty" formcontrolname="chooseProduct" type="checkbox" id="2">
                        <label for="2"><span ></span>ხელოვნება</label>
                    </div>

                    <div class="choose-product-item">
                        <input class="chooseProduct ng-untouched ng-valid ng-dirty" formcontrolname="chooseProduct" type="checkbox" id="3">
                        <label for="3"><span ></span>მუსიკა</label>
                    </div>

                    <div class="choose-product-item no-margin">
                        <input class="chooseProduct ng-untouched ng-valid ng-dirty" formcontrolname="chooseProduct" type="checkbox" id="4">
                        <label for="4"><span ></span>საკვები</label>
                    </div>

                    <div class="choose-product-item">
                        <input class="chooseProduct ng-untouched ng-valid ng-dirty" formcontrolname="chooseProduct" type="checkbox" id="5">
                        <label for="5"><span ></span>პოილიტიკა</label>
                    </div>

                    <div class="choose-product-item">
                        <input class="chooseProduct ng-untouched ng-valid ng-dirty" formcontrolname="chooseProduct" type="checkbox" id="6">
                        <label for="6"><span ></span>სხვა</label>
                    </div>
            </div>-->
    <div id="tags">Please Choose topics that You are interested
                    in <br /></div>


                </form>


                <button class="regiter-submit-btn" type="submit" id='add' disabeled=true>
                <div class="search-submit-btn-in" >
                    <div class="search-submit-btn-text">რეგისტრაცია</div>
                </div>
            </button>

            <button class="register go-login">
                    ავტორიზაცია
            </button>

            </div>


        </div>
    </div>


</div>

	        <script>
                function check() {
                    var value = $.trim($("#idPass").val());

                    if (value.length <= 6) {
                        $("#add").prop('disabled', true);
                        document.getElementById("check").innerHTML = "Please, make sure passwrod is at least 6 chars"
                    } else {
                        $("#add").prop('disabled', false);
                        document.getElementById("check").innerHTML = "That looks okay"
                    }

                }

                $(document).on("submit","#form",
                                function(event) {
                                    event.preventDefault();
                                    var array = $("input[name='tags']:checked").map(function() {
                                                return this.id;
                                                }).get()

                                    var $form = $(this);

                                    // Preparing the data to send
                                    var data = {
                                        userName : $("input[name=userName]").val(),
                                        password : $("input[name=password]").val(),
                                        mail : $("input[name=mail]").val(),
                                        tags : array
                                    };

                                    var jsonData = JSON.stringify(data);
                                    $.post($form.attr("action"), jsonData, function(jsonResponse) {
                                                        document.getElementById("1").innerHTML = jsonResponse;
                                                        if (jsonResponse == "Welcome") {
                                                            window.location.replace("HomePage.jsp");
                                                        } else {
                                                            document.getElementById("1").innerHTML = jsonResponse;
                                                        }

                                                    });

                                });
            </script>
            <script type="text/javascript">
                function getTags(){
                    var xhttp = new XMLHttpRequest();
                    xhttp.onreadystatechange = function() {
                        if (this.readyState == 4 && this.status == 200) {
                            var obj = JSON.parse(this.responseText);
                            for (var i = 0; i < obj.length; i++) {
                                var checkbox = document.createElement('input');
                                var mybr = document.createElement('br');
                                checkbox.type = "checkbox";
                                checkbox.name = "tags";
                                checkbox.value = obj[i].tag_id;
                                checkbox.id = obj[i].tag_id;
                                var label = document.createElement('label')
                                label.htmlFor = "id";
                                label.appendChild(document.createTextNode(obj[i].tagName));

                                document.getElementById( "tags").appendChild(checkbox);
                                document.getElementById( "tags").appendChild(label);
                                document.getElementById( "tags").appendChild(mybr);

                            }
                        }
                      };
                      xhttp.open("GET", "UserRegistration", true);
                      xhttp.send(null);
                }
    </script>

    </div>
</body>
</html>