Member Avatar for prnjn

Hi,
I dont know javascript and i dont have time to learn it coz i have to submitt the dynamic web project which i am making using jsp,servlet, mysql database.

I only need help in this part.Please help.

I have a checkbox , i want to use three images in place of the checkbox,

1.when the variable ( fetched from database) has value "booked" then redImage.jpg and the checkbox should also be disabled.
2.When the variable (fetched from database) has value "not_booked then "greenImg.jpg"
3.When the checkbox is checked then "blueImg.jpg"

Please help me, my project is almost comlete , but i am getting problem with only this GUI part.
how to show different images in place of checkbox according to the condition.

Edited by prnjn because: correction
  • 3 Contributors
  • 3 Replies
  • 224 Views
  • 21 Hours Discussion Span
  • Latest Post Latest Post by paulkd

Dani AI

Generated

A compact, production-ready approach that fits JSP/Servlet workflows: render a native checkbox on the server with the appropriate attributes for the DB state, hide it visually but keep it accessible, and use a sibling element whose background-image is swapped via CSS (:checked and :disabled). This requires no JavaScript for the usual case; a tiny script is included below only as a defensive sync for older browsers or if the state can change after render. This answers 's original requirement and supplies the HTML asked for, while respecting 's point that the code should be easy to read.

<!-- server should add 'checked disabled' when status == "booked" -->
<label class="seat">
  <input type="checkbox" id="seat<%=seatId%>" name="seat"
    <% if ("booked".equals(status)) { %> checked disabled <% } %> >
  <span class="seat-icon" aria-hidden="true"></span>
</label>

<style>
.seat { display:inline-block; position:relative; }
.seat input { position:absolute; left:-9999px; } /* visually hide but keep accessible */
.seat .seat-icon {
  width:24px; height:24px; display:inline-block;
  background: url('greenImg.jpg') no-repeat center center;
  background-size: contain;
}
.seat input:checked + .seat-icon { background-image: url('blueImg.jpg'); }
.seat input:disabled + .seat-icon { background-image: url('redImage.jpg'); cursor:not-allowed; opacity:0.9; }
</style>

<script>
/* Optional: ensure visual state matches DOM (useful in some older browsers) */
document.querySelectorAll('.seat input[type=checkbox]').forEach(function(chk){
  var icon = chk.nextElementSibling;
  if (chk.disabled) icon.style.backgroundImage = "url('redImage.jpg')";
  else icon.style.backgroundImage = chk.checked ? "url('blueImg.jpg')" : "url('greenImg.jpg')";
  chk.addEventListener('change', function(){
    icon.style.backgroundImage = chk.checked ? "url('blueImg.jpg')" : "url('greenImg.jpg')";
  });
});
</script>

Notes and troubleshooting: ensure image paths are correct relative to the CSS (use absolute paths if needed); put the :disabled rule after :checked so a booked (disabled) seat always shows red even if marked checked by the server; keep the native input for keyboard and screen-reader access, and add an aria-label or title on the input if the page needs clearer semantics. If the booking state arrives asynchronously (AJAX), apply the same class/attributes from the client and run the small JS sync above.

Recommended Answers

All 3 Replies

Member Avatar for Member #949455

I dont know javascript and i dont have time to learn it coz i have to submitt the dynamic web project which i am making using jsp,servlet, mysql database.

If you don't know anything about javascript/database then it's pointless for anyone to post any code if you don't know how to read it.

I only need help in this part.Please help.

What credit do I get if I help you?

Edited by Member #949455
Member Avatar for prnjn

If you don't know anything about javascript/database then it's pointless for anyone to post any code if you don't know how to read it.

I know Database , I know servlets , I know JSP , I know HTML,
I also know basics of Javascript , do simple things.
So i can read and understant the code. but with the small knowledge of javascript i dont know how to solve my above given specific question.

What credit do I get if I help you?

What creadit do you want in return for helping?

Edited by prnjn
Member Avatar for paulkd

Can you post the HTML that you want JavaScript to work with?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.