<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script> <div class="container"> <div class="row"> <div class="container-fluid"> <h2 style="text-align: center; padding-top: 20px;"> Task Assignment System </h2> <hr><br><br><br> <div class="container taskAssignBox" id="taskAssignInfo"> <div class="col-md-8"> <div class="form-group"> <label>Client ID</label> <input type="number" class="form-control" id="clientID" placeholder="Input Client ID"> </div><br> <div class="form-group"> <label>Description</label> <textarea class="form-control" id="summernote" name="des" placeholder="Write something...."></textarea> </div> <div class="form-group"> <br> <div class="input text"> <input type="file" class="form-control" id="attachFile"> </div> </div><br> <input type="button" class="btn btn-success" value="SUBMIT" onclick="view_all_info()"> </div> <div class="col-md-4"> <div class="form-group"> <label> Assign To </label> <select class="form-control" id="assignTo"> <option selected disabled value="">Choose Member</option> <option> John </option> <option> Mike </option> <option> Peter </option> <option> Matt </option> <option> Jerry </option> </select> </div><br> <div class="form-group"> <label>Task Type </label> <select class="form-control" id="taskType"> <option selected disabled value=""> Choose Type </option> <option> Edit </option> <option> Redesign </option> <option> New </option> <option> Live </option> </select> </div><br> <div class="form-group"> <label> Priority </label> <select class="form-control" id="priority"> <option selected disabled value=""> Choose Level </option> <option> High </option> <option> Regular </option> </select> </div> </div> </div> <div id="taskDetails_info" style="display: none;" class="animated zoomIn"> <div><strong>Client ID:</strong> <span id="client_ID" style="color: #676767;"></span> </div> <div><strong>Assign To:</strong> <span id="assign_to" style="color: #676767;"></span> </div> <div><strong>Task Type:</strong> <span id="task_type" style="color: #676767;"></span></div> <div><strong>Priority: </strong><span id="task_priority" style="color: #676767;"></span></div> <div><strong style="display: inline-block;">Description:</strong> <span id="task_des" style="color: #676767;display: inline-block;"></span> </div><br> <input type="button" class="btn btn-primary" value="BACK" onclick="backHome()"> </div> </div> </div> </div>

function view_all_info() { var CID = document.getElementById("clientID").value; var Assign = document.getElementById("assignTo").value; var TaskType = document.getElementById("taskType").value; var taskPriority = document.getElementById("priority").value; var myDes = document.getElementsByName("des")[0].value; var url = window.location.pathname; var filename = url.substring(url.lastIndexOf('/')+1); if(CID){ if(Assign){ if(TaskType){ if(taskPriority){ } else{ alert('Please Enter Task Level') } } else{ alert('Please Enter Task Type') } } else{ alert('Please Assign Task To Someone') } } else{ alert('Please Enter Client ID') } if(CID && Assign && TaskType && taskPriority) { document.getElementById("taskDetails_info").style.display = "block"; document.getElementById("taskAssignInfo").style.display = "none"; document.getElementById("client_ID").innerHTML = CID; document.getElementById("assign_to").innerHTML = Assign; document.getElementById("task_type").innerHTML = TaskType; document.getElementById("task_priority").innerHTML = taskPriority; document.getElementById("task_des").innerHTML = myDes; document.getElementById("file").innerHTML = filename; } } function backHome(){ document.getElementById("taskAssignInfo").style.display = "block"; location.reload(); }