Main

Modal

by Azhar Kanorwala

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>
<div class="container-fluid">
  <div class="row">
    <div class="col-md-2"></div>
    <div class="col-md-8">
      <div class="jumbotron">
        <div class="btn-group" role="group">
          <div class="btn-group btn-group-lg" role="group">
            <button type="button" class="btn btn-primary a1" id="mb" onclick="toggle()">Motherboards</button>
            <button type="button" class="btn btn-primary a2" id="pr" onclick="toggle()">Processors</button>
            <button type="button" class="btn btn-primary a3" id="rm" onclick="toggle()">RAM</button>
            <button type="button" class="btn btn-primary a4" id="cb" onclick="toggle()">Cabinet</button>
            <button type="button" class="btn btn-primary a5" id="hd" onclick="toggle()">Hard Drives</button>
            <button type="button" class="btn btn-primary a6" id="ps" onclick="toggle()">Power Supplies</button>
          </div>
        </div>
        <div class="table-responsive">
          <table class="table" id="table_mb">
            <thead>
              <tr>
                <th class="sr_no" id="sr_no">Serial NO</th>
                <th class="mod_no" id="mod_no">Model NO</th>
                <th class="pr_no" id="mod_no">Price</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td class="sr_data_1" id="sr_data_1">1</td>
                <td class="mod_data_1" id="mod_data_1">Asus Rampage</td>
                <td class="pr_data_1"id="pr_data_1">5000</td>
              </tr>
              <tr>
                <td class="sr_data_2"  id="sr_data_2">2</td>
                <td class="mod_data_2" id="mod_data_2">Asus Rampage VII</td>
                <td...

CSS

body {
    font-family: 'Play', sans-serif;
    background-position: right;
  }
  
  .header {
    font-family: 'Play', sans-serif;
    color: whitesmoke;
  }
  
  td {
    border: 1px #DDD solid;
    padding: 5px;
    cursor: pointer;
  }
  
  .selected {
    background-color: #2196F3;
    color: #FFF;
  }
  
  .a1 {
    position: relative;
    bottom: 48px;
  }
  
  .a2 {
    position: relative;
    bottom: 48px;
  }
  
  .a3 {
    position: relative;
    bottom: 48px;
  }
  
  .a4 {
    position: relative;
    bottom: 48px;
  }
  
  .a5 {
    position: relative;
    bottom: 48px;
  }
  
  .a6 {
    position: relative;
    bottom: 48px;
  }

JavaScript

//MY code
$(window).load(function() {
  $("#table_mb tr").click(function() {
    $(this).addClass('selected').siblings().removeClass('selected');
    var value = $(this).find('td:first').html();
    //alert(value);
  });

  $('.ok').on('click', function(e) {
    alert($("#table_mb tr.selected td:first").html());
  });
});
//JS for changing events for buttons

var button_pr = document.getElementById("pr");
var table_pr = document.getElementById("table_pr");

function show() {
  table_pr.style.visibility = "visible";
}

function hide() {
  table_pr.style.visibility = "hidden";
}

function toggle() {
  if (table_pr.style.visibility === "hidden") {
    show();
  } else {
    hide();
  }
}

hide();

button.addEventListener("click", toggle, false);

//Modal JS
$("#dischargeform").validate({
  rules: {
    firstname: "required",
    lastname: "required",
  },
  messages: {
    firstname: "Please enter your firstname",
    lastname: "Please enter your lastname",
  },
  submitHandler: function(form) {
    $("#myModal").modal('show');
    $('#SubForm').click(function() {
      form.submit();
    });
  }
});