Question

我有一个带输入字段的表单

<div class="seats">
  <div class="seat">Seat Number</div>
  <div class="seat">Seat Number</div>
  <div class="seat">Seat Number</div>
  <div class="seat">Seat Number</div>
  <div class="seat">Seat Number</div>
</div>

通过此选择，我可以选择要使用表单提交哪些票证ID。

但是现在我想创建一个座位选择器，所以我需要所有票证作为div元素。座位看起来像

$('.seat').click(function () {
  $(this).toggleClass('.selected-seat');
});

如何使这些div元素可选？我知道我用简单的javascript可以听取点击，然后更改div元素的类。

所以解决方案可能是

$('form').submit(function () {
  event.preventDefault();

  // submit array of ids of all those div elements with class 'selected-seat'
});

然后像

<div class="seats">
  <div class="seat">Seat Number <input type="checkbox" name="seats[]" value="__ticket_id__"></div>
  <div class="seat">Seat Number <input type="checkbox" name="seats[]" value="__ticket_id__"></div>
  <div class="seat">Seat Number <input type="checkbox" name="seats[]" value="__ticket_id__"></div>
  <div class="seat">Seat Number <input type="checkbox" name="seats[]" value="__ticket_id__"></div>
  <div class="seat">Seat Number <input type="checkbox" name="seats[]" value="__ticket_id__"></div>
</div>

然而，这种方法对我来说似乎有点不对劲。另一个解决方案是将元素变成类似

的元素

da = New OleDbDataAdapter("SELECT * FROM input1 inner join input on input1.id = input.id where [input.id] = '" & TextBox1.Text & "'", conn)
dt.Clear()
da.Fill(dt)
da.Dispose()
da = Nothing
DataGridView1.DataSource = dt
DataGridView1.Columns(0).HeaderText = "اسم المادة"
DataGridView1.Columns(1).HeaderText = "الكمية"
DataGridView1.Columns(2).HeaderText = "رقم المستند"
DataGridView1.Columns(3).HeaderText = "تاريخ المستند"
DataGridView1.Columns(4).HeaderText = "المستلم"
DataGridView1.Columns(5).HeaderText = "المسلم"
DataGridView1.Columns(6).HeaderText = "تاريخ التسليم"
DataGridView1.Columns(7).HeaderText = "رقم الموافقه "
DataGridView1.Columns(8).HeaderText = "تاريخ الموافقه"
DataGridView1.Columns(9).HeaderText = "ملاحظات الموافقه"
DataGridView1.Columns(10).HeaderText = "تاريخ الموافقه"
DataGridView1.Columns(11).HeaderText = "الملاحظات"

然后提交我的表单，就像我通常提交没有任何javascript的表单一样？

这些座位选择器通常如何完成？

Answer 1

所以我为你应该如何处理这个问题做了一小段代码。我建议你稍微使用jQuery，这样你就可以灵活地创建你想要创建的设计。

在下面的代码中，我刚刚创建了一个隐藏的输入框，它将带有您按下的值。您没有提到是否需要多个选择或单个座位选择器。此代码适用于单选择器。

jQuery(document).ready(function(){
  jQuery('.seat').click(function(){
    jQuery(this).css('background','#fff');
    var seatNumber = jQuery(this).find('span').text();
    jQuery(this).find('input').attr('value',seatNumber);
  });
});

.seat{
background:#eee;
margin-top:5px;
cursor:pointer;
}
.value{
color:blue;
font-weight:800;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="seats">
  <div class="seat">
    Seat Number <span class='value'>1</span>
    <input type='text' name='seatNumber' hidden>
  </div>
  <div class="seat">
    Seat Number <span class='value'>2 </span>
    <input type='text' name='seatNumber' hidden>
  </div>
  <div class="seat">
    Seat Number 
    <span class='value'>3</span>
    <input type='text' name='seatNumber' hidden>
  </div>
  <div class="seat">
    Seat Number 
    <span class='value'>4</span>
    <input type='text' name='seatNumber' hidden>
  </div>
  <div class="seat">
    Seat Number 
    <span class='value'>5</span>
    <input type='text' name='seatNumber' hidden>
  </div>
  
   
</div>

Answer 2

你可以像往常一样提交表格。表单将自动检测已选中复选框。希望这有帮助。

$('.seat').click(function () {
	if($(this).attr("class") == "seat"){
  		$(this).addClass('selected-seat');
  		$(this).children().attr('checked', "checked");
  	}
  	else{
  		$(this).removeClass('selected-seat');
  		$(this).children().prop('checked', true);;
  	}
});

	.selected-seat{
		background : #f00;
	}
	input[type="checkbox"]{
		display: none;
	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form method="post" action="http://localhost/yourProject/SubmitProsesHere.php">
<div class="seats">
  <div class="seat">Seat Number 1
  	<input type="checkbox" name="seats[]" value="__ticket_id__5">
  </div>
  <div class="seat">Seat Number 2
  	<input type="checkbox" name="seats[]" value="__ticket_id__4">
  </div>
  <div class="seat">Seat Number 3
  	<input type="checkbox" name="seats[]" value="__ticket_id__3">
  </div>
  <div class="seat">Seat Number 4
  	<input type="checkbox" name="seats[]" value="__ticket_id__2">
  </div>
</div>
<input type="submit" value='send' name="test">
</form>

sleect seat 1,2 and 3

result print_r $_POST

使用JavaScript和HTML提交包含选定音乐会席位的表单

2 个答案: