How do I capture the selected div value for a theater booking system that I am creating

Question

0.00/5 (No votes)

See more:

I am creating a theater booking system. I am facing problems which selecting and saving the seats using a seat plan.

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
.seat {
height: 20px;
width: 20px;
border: 1px solid gray;
cursor:pointer;
background-color:white;
}
.walk{
padding-left:20px;
}
#driver {
background-color:gray;
height: 20px;
border-radius: 50%;
}

</style>

</head>
<body>

<div style="border:1px solid gray; width:130px;">
<table>
<tr>
<td colspan="4"></td>
<td align="right"> <div id="driver"></div> </td>
</tr>
<tr>
<td><div class="seat"></div> </td>
<td><div class="seat"></div></td>
<td class="walk"> </td>
<td><div class="seat"></div></td>
<td><div class="seat"></div></td>
</tr>
<tr>
<td><div class="seat"></div> </td>
<td><div class="seat"></div></td>
<td class="walk"> </td>
<td><div class="seat"></div></td>
<td><div class="seat"></div></td>
</tr>
<tr>
<td><div class="seat"></div> </td>
<td><div class="seat"></div></td>
<td class="walk"> </td>
<td><div class="seat"></div></td>
<td><div class="seat"></div></td>
</tr>
<tr>
<td><div class="seat"></div> </td>
<td><div class="seat"></div></td>
<td class="walk"> </td>
<td><div class="seat"></div></td>
<td><div class="seat"></div></td>
</tr>
<tr>
<td><div class="seat"></div> </td>
<td><div class="seat"></div></td>
<td class="walk"> </td>
<td><div class="seat"></div></td>
<td><div class="seat"></div></td>
</tr>
<tr>
<td><div class="seat"></div> </td>
<td><div class="seat"></div></td>
<td class="walk"> </td>
<td><div class="seat"></div></td>
<td><div class="seat"></div></td>
</tr>
<tr>
<td><div class="seat"></div> </td>
<td><div class="seat"></div></td>
<td class="walk"> </td>
<td><div class="seat"></div></td>
<td><div class="seat"></div></td>
</tr>
<tr>
<td><div class="seat"></div> </td>
<td><div class="seat"></div></td>
<td class="walk"> </td>
<td><div class="seat"></div></td>
<td><div class="seat"></div></td>
</tr>
<tr>
<td><div class="seat"></div> </td>
<td><div class="seat"></div></td>
<td class="walk"> </td>
<td><div class="seat"></div></td>
<td><div class="seat"></div></td>
</tr>
</table>
</div>

<script>

allSeats = document.querySelectorAll('.seat');
for (var i = 0; i < allSeats.length; i++) {
var seat = allSeats[i];
seat.addEventListener('click', function () {
var bgclr = this.style.backgroundColor;
if(bgclr =='red')
this.style.backgroundColor = 'white'
else
this.style.backgroundColor = 'red'
debugger
}, false);
}

</script>

</body>
</html>

What I have tried:

I have tried to make div runat="server" . I got a reference to use hidden field but unable to use it. I am not able to understand how to capture the selected div values in real time and capture it in asp.net(vb). Once i get the values in string format or through a label, rest database i can easily do it.
I am using asp.net using vb.net
A quick response would be highly appreciated.
Thanks
Natasha

Posted 12-Nov-17 2:31am

Natasha Singh Delhi

Add a Solution

Comments

A_Griffin 12-Nov-17 9:00am

But the divs don't have any values in them? But a simple this.innerHTML in the same (or different) listener will yield any value you put in them, and you can send that to a generic handler (.ashx) via an AJAX call for processing.

Natasha Singh Delhi 12-Nov-17 10:30am

If i assign a value to that div like: div id="xyz" runat="server" then also how to proceed

A_Griffin 12-Nov-17 12:11pm

I don't know why you would want to do that. It won't help you capture anything in real time. But it's not really clear what you're trying to do, I'm afraid.

Natasha Singh Delhi 12-Nov-17 12:33pm

I am just trying to put the seat numbers in all the divs and capture it when anyone selects them....is there any simpler way to do this ??

A_Griffin 12-Nov-17 12:52pm

OK, well put the seat numbers in - they're not in your code. How you do that is up to you. But then you can capture when people click on a cell, just as you have done, and at the same time as turning it red you can use something like var seatNo = this.innerHTML which will then = whatever number is in that cell. You can then use that in whatever way you want.

Natasha Singh Delhi 12-Nov-17 13:22pm

After doing some research i have come to a conclusion to do something like this
div onclick="document.getElementById('<%=HiddenField1.ClientID%>').value;" runat="server" id="div1" class="seat">ll div

how do i capture this value on the server side.....or what should i write on the onclick = "????"

A_Griffin 12-Nov-17 13:34pm

But you already have working code to capture the seat number - why change it? Simply add
var seatNumber = this.innerHTML
after the line: this.style.backgroundColor = 'red'
What you then do with it is up to you. Pass it to a generic handler via AJAX, or redirect the user to another page....

Natasha Singh Delhi 12-Nov-17 13:58pm

unable to do :( :(
can u please give me the complete codes

A_Griffin 12-Nov-17 14:18pm

No, I can't. Partly because I don't know enough about your project and partly because that's not how things work here. No-one is going to write "complete code" for you, most especially here in the "Quick answers" section. This is for specific answers to specific questions. You must do some research and try, then ask if you have a question on one point.

Natasha Singh Delhi 12-Nov-17 14:29pm

ok, just tell me how can i pass the innerhtml value from the onclick attribute to the server side....my problem would be solved

A_Griffin 12-Nov-17 14:46pm

Well, I've told you how to capture it - now you can pass it to a generic handler (an .ashx page) using AJAX. jQuery can help you with the latter.

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)