user3441151 user3441151 - 1 month ago 5
CSS Question

HTML selected rectangle box

I have 4 Profession Prof A, Prof B, Prof C and Prof D.
enter image description here

What I want is that when a user clicks on the Prof A button, then the Prof A color would be a dark color and all the remaining colored buttons would be grey.

When I click on the next button, the selected Prof A would be saved to a database, the next button should require that a Prof button has been selected.

My profession.jsp page code is given below

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Profession</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
<script src="js/jquery-1.11.3.min.js"></script>
<script>
$(function() {
var reqJSONObj = '${reqJSONObj}';
reqJSONObj = reqJSONObj.replace("/", "'");
var _parseJson = JSON.parse(reqJSONObj);
var orgName = _parseJson['orgName'];
document.getElementById('lblsuccessMsg').innerHTML = "sucsess - '&lt;" + orgName + "&gt; has an agreement";
if (reqJSONObj == "" || reqJSONObj == null) {
window.location.href = "index.jsp";
}
});
</script>
</head>
<body>
<form name="form_profession" action="org_name" method="post">
<div class="container-fluid orgdiv">
<div class="topgreen" style="">
<p>
<i class="fa fa-check"></i> <span id="lblsuccessMsg"></span>
</p>
</div>
<div class=" text-center topbgimage">
<img src="images/bg.jpg" class="" style="max-width: 100%;">
</div>
<div class="container">
<div class="row">
<div class="col-sm-12 heading text-center"
style="text-align: center;">
<h1 class="">Profession</h1>
<p>
Select Your Profession So we can Provide you with appropriate service
</p>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="col-md-3 col-sm-3 box">
<h2>Prof A</h2>
</div>
<div class="col-md-3 col-sm-3 box">
<h2>Prof B</h2>
</div>
<div class="col-md-3 col-sm-3 box">
<h2>Prof C</h2>
</div>
<div class="col-md-3 col-sm-3 box">
<h2>Prof D</h2>
</div>
</div>
</div>
</div>
<div class="col-md-12 text-center footerdiv" style="text-align: center;">
<input type="submit" class="bg-primary btn" name="btnProfession" id="btnProfession" value="Next" />
</div>
</div>
</form>
</body>
</html>

Answer

Is this what you are looking for - https://jsfiddle.net/ToddNewent/rredqa2k/1/

HTML

<body>
  <form id="form" name="form_profession" action="org_name" method="post">
    <div class="container-fluid orgdiv">
      <div class="topgreen" style="">
        <p>
          <i class="fa fa-check"></i> <span id="lblsuccessMsg"></span>
        </p>
      </div>

      <div class="container">
        <div class="row">
          <div class="col-sm-12">
            <div class="a col-md-3 col-sm-3 box">
              <h2 class="a">Prof A</h2>
            </div>
            <div class="b col-md-3 col-sm-3 box">
              <h2 class="b">Prof B</h2>
            </div>
            <div class="c col-md-3 col-sm-3 box">
              <h2 class="c">Prof C</h2>
            </div>
            <div class="d col-md-3 col-sm-3 box">
              <h2 class="d">Prof D</h2>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-12 text-center footerdiv" style="text-align: center;">
        <input type="submit" class="bg-primary btn" name="btnProfession" id="btnProfession" value="Next" />
      </div>
    </div>
  </form>
</body>

CSS

h2{
  color:white;
}
.row{
  min-width:440px;
  width:100%;
  padding-bottom:4%;
}

.box{
  display:inline-block;
  width:20%;
  padding:2%;
  border-radius:12px;
  background-color:blue;
  text-align:center;
}

#btnProfession{
  display:block;
  margin:0 auto;
  border-radius:12px;
  background-color:blue;
  color:white;
  text-align:center;
  width:20%;
  padding:2%;
}

JavaScript

$('.row').on('click',function(e){
   $('.a, .b, .c, .d').css('backgroundColor','gray');
   $("." + e.target.className[0]).css('backgroundColor','darkblue');
});
Comments