Untitled

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>WeDo Wear Notifications Simulation</title>
        <style>
        </style>
    </head>
    <body>
        <!-- using bootstrap 3.X (already included) define the html layout, validate the form -->
        <!-- the form should include the following fields -->
        <!-- ActinId -> Unique ID - Integer && auto-increment ->
        <!-- Name -> String & Required - max length 20 -->
        <!-- Message -> String & Required - max length 50 -->
        <!-- PhoneNumber -> Number & Required - min/max length 9 this number can only start with '91 || 92 || 93 || 96'-->
        <!-- Action -> Select between 2 options: "Wear Notifications || Normal Action" -->
        <form>
        Action Number:<br>
        <input type="number" id="actionId" name="actionId" readonly>
        <br>
        Name:<br>
        <input type="text" id="username" name="username" maxlength="20" required>
        <br>
        Message:<br>
        <input type="text" id="message" name="message" maxlength="50" required >
        <br>
        Phone Number:<br>
        <input type="text" id="customerPhone" name="customerPhone" maxlength="9" minlength="9" pattern="(91|92|93|96)[0-9]{7}" title="must have 9 numbers and start by 9" required >
        <br>
        Action:<br>
        <select id="actionTriggered" name="actionTriggered" form="chose">
          <option value="send">Wear Notifications</option>
          <option value="dont">Normal Action</option>
        </select>
        <br>
        <br>

        <button onclick="enviar()">Submit</button>
        </form>


            <script src="node_modules/socket.io/node_modules/socket.io-client/socket.io.js"></script>
            <script src="http://code.jquery.com/jquery-latest.min.js"></script>
            <script>

            var socket = io('http://localhost:18282');
            var counter = new Date().getTime();

            $('#actionId').val(counter);

            function enviar(){

                var ActionIdValue=0;
                var MessageValue="x";
                var NameValue="a";
                var PhoneNumberValue=1;
                var ActionValue="s";


            //Create socket connection using socket.io

                        //on button click a json should be created
                         result =  {
                            "action" : {
                                      "actionId": $('#actionId').val(),
                                      "message": $('#message').val(),
                                      "username": $('#username').val(),
                                      "customerPhone": $('#customerPhone').val(),
                                      "actionTriggered": $('#actionTriggered').val()
                                      }
                        }
                        //       AND


console.log("----");
console.log(result);
console.log("----");


                socket.emit('data',result);
                }

            </script>
            <!-- Latest compiled and minified CSS -->
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
            <!-- Optional theme -->
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
            <!-- Latest compiled and minified JavaScript -->
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
            <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
        </body>
    </html>