Put the checkbox value onto a label
I want to make a seat reservation program. I want, when you click on a checkbox, it puts the value of the checkbox onto a label.
<table>
<tr>
<td><label> Naam </label></td>
<td> <div> <?php echo form_input($username); ?></div></td>
<td><label> Naam </label></td>
<td> <div> <?php echo form_input($username2); ?></div></td>
</tr>
<tr>
<td><label>e-mail </label></td>
<td><div> <?php echo form_input($email); ?></div></td>
<td><label>e-mail </label></td>
<td><div> <?php echo form_input($email2); ?></div></td>
</tr>
<tr>
<td><label> gsm-nummer </label></td>
<td><div> <?php echo form_input ($gsmnummer); ?> </div></td>
<td><label> gsm-nummer </label></td>
<td><div> <?php e开发者_JAVA技巧cho form_input ($gsmnummer2); ?> </div></td>
</tr>
<tr>
<td><label>zitplaats</label></td>
<td><div id="seatDiv"> <?php echo form_label('seat'); ?> </div></td>
<td><label>zitplaats</label></td>
<td><div id="seatDiv2"> <?php echo form_label('seat'); ?> </div></td>
</tr>
<tr>
<td> <?php echo form_submit(array('name'=> 'verzend','value' => 'verzend')); ?> </td>
<td> <?php echo form_submit(array('name'=> 'plaats','value' => 'Bevestig plaats')); ?> </td>
<?php echo form_close(); ?>
<?php echo form_open('user/register3'); ?>
<td><?php echo form_submit(array('name'=> 'Voeg_toe','value' => 'voeg toe')); ?> </td>
</tr>
</table>
<?php echo form_close(); ?>
<table>
<tr>
<th width="23" scope="col"> <input type="checkbox" name="check" value="Z01" align="center" onchange="javascript:process()"/> </th>
<th width="23" scope="col"> <input type="checkbox" name="check" value="Z02" align="center" onchange="javascript:process()"/></th>
<th width="6" scope="col"> </th>
<th width="6" scope="col"> </th>
<th width="23" scope="col"> <input type="checkbox" name="check" value="Z03" align="center" onchange="javascript:process()"/> </th>
<th width="23" scope="col"> <input type="checkbox" name="check" value="Z04" align="center" onchange="javascript:process()"/></th>
<th width="23" scope="col"> <input type="checkbox" name="check" value="Z05" align="center" onchange="javascript:process()"/></th>
<th width="23" scope="col"> <input type="checkbox" name="check" value="Z06" align="center" onchange="javascript:process()"/></th>
<th width="23" scope="col"> <input type="checkbox" name="check" value="Z07" align="center" onchange="javascript:process()"/></th>
<th width="6" scope="col"> </th>
<th width="11" scope="col"> </th>
<th width="26" scope="col"> <input type="checkbox" name="check" value="Z08" align="center" onchange="javascript:process()"/> </th>
<th width="20" scope="col"> <input type="checkbox" name="check" value="Z09" align="center" onchange="javascript:process()"/></th>
</tr>
<tr>
<th width="23" scope="col"> <input type="checkbox" name="check" value="Z10" align="center" onchange="javascript:process()"/> </th>
<th width="23" scope="col"> <input type="checkbox" name="check" value="Z11" align="center"/></th>
<th width="6" scope="col"> </th>
<th width="6" scope="col"> </th>
<th width="23" scope="col"> <input type="checkbox" name="check" value="Z12" align="center" onchange="javascript:process()"/> </th>
<th width="23" scope="col"> <input type="checkbox" name="check" value="Z13" align="center" onchange="javascript:process()"/></th>
<th width="23" scope="col"> <input type="checkbox" name="check" value="Z14" align="center" onchange="javascript:process()"/></th>
<th width="23" scope="col"> <input type="checkbox" name="check" value="Z15" align="center" onchange="javascript:process()"/></th>
<th width="23" scope="col"> <input type="checkbox" name="check" value="Z16" align="center" onchange="javascript:process()"/></th>
<th width="6" scope="col"> </th>
<th width="6" scope="col"> </th>
<th width="26" scope="col"> <input type="checkbox" name="check" value="Z17" align="center" onchange="javascript:process()"/> </th>
<th width="20" scope="col"> <input type="checkbox" name="check" value="Z18" align="center" onchange="javascript:process()"/></th>
</tr>
<tr>
<th width="23" scope="col"> <input type="checkbox" name="check" value="Z19" align="center" onchange="javascript:process()"/> </th>
<th width="23" scope="col"> <input type="checkbox" name="check" value="Z20" align="center" onchange="javascript:process()"/></th>
<th width="6" scope="col"> </th>
<th width="6" scope="col"> </th>
<th width="23" scope="col"> <input type="checkbox" name="check" value="Z21" align="center" onchange="javascript:process()"/> </th>
<th width="23" scope="col"> <input type="checkbox" name="check" value="Z22" align="center" onchange="javascript:process()"/></th>
<th width="23" scope="col"> <input type="checkbox" name="check" value="Z23" align="center" onchange="javascript:process()"/></th>
<th width="23" scope="col"> <input type="checkbox" name="check" value="Z24" align="center" onchange="javascript:process()"/></th>
<th width="23" scope="col"> <input type="checkbox" name="check" value="Z25" align="center" onchange="javascript:process()"/></th>
<th width="6" scope="col"> </th>
<th width="6" scope="col"> </th>
<th width="26" scope="col"> <input type="checkbox" name="check" value="Z26" align="center" onchange="javascript:process()"/> </th>
<th width="20" scope="col"> <input type="checkbox" name="check" value="Z27" align="center" onchange="javascript:process()"/></th>
</tr>
<tr>
<th width="23" scope="col"> <input type="checkbox" name="check" value="Z28" align="center" onchange="javascript:process()"/> </th>
<th width="23" scope="col"> <input type="checkbox" name="check" value="Z29" align="center" onchange="javascript:process()"/></th>
<th width="6" scope="col"> </th>
<th width="6" scope="col"> </th>
<th width="23" scope="col"> <input type="checkbox" name="check" value="Z30" align="center" onchange="javascript:process()"/> </th>
<th width="23" scope="col"> <input type="checkbox" name="check" value="Z31" align="center" onchange="javascript:process()"/></th>
<th width="23" scope="col"> <input type="checkbox" name="check" value="Z32" align="center" onchange="javascript:process()"/></th>
<th width="23" scope="col"> <input type="checkbox" name="check" value="Z33" align="center" onchange="javascript:process()"/></th>
<th width="23" scope="col"> <input type="checkbox" name="check" value="Z34" align="center" onchange="javascript:process()"/></th>
<th width="6" scope="col"> </th>
<th width="6" scope="col"> </th>
<th width="26" scope="col"> <input type="checkbox" name="check" value="Z35" align="center" onchange="javascript:process()"/> </th>
<th width="20" scope="col"> <input type="checkbox" name="check" value="Z36" align="center" onchange="javascript:process()"/></th>
</tr>
<tr>
<th width="23" scope="col"> <input type="checkbox" name="check" value="Z37" align="center" onchange="javascript:process()"/> </th>
<th width="23" scope="col"> <input type="checkbox" name="check" value="Z38" align="center" onchange="javascript:process()"/></th>
<th width="6" scope="col"> </th>
<th width="6" scope="col"> </th>
<th width="23" scope="col"> <input type="checkbox" name="check" value="Z39" align="center" onchange="javascript:process()"/> </th>
<th width="23" scope="col"> <input type="checkbox" name="check" value="Z40" align="center" onchange="javascript:process()"/></th>
<th width="23" scope="col"> <input type="checkbox" name="check" value="Z41" align="center" onchange="javascript:process()"/></th>
<th width="23" scope="col"> <input type="checkbox" name="check" value="Z42" align="center" onchange="javascript:process()"/></th>
<th width="23" scope="col"> <input type="checkbox" name="check" value="Z43" align="center" onchange="javascript:process()"/></th>
<th width="6" scope="col"> </th>
<th width="6" scope="col"> </th>
<th width="26" scope="col"> <input type="checkbox" name="check" value="Z44" align="center" onchange="javascript:process()"/> </th>
<th width="20" scope="col"> <input type="checkbox" name="check" value="Z45" align="center" onchange="javascript:process()"/></th>
</tr>
<tr>
<th width="23" scope="col"> <input type="checkbox" name="check" value="Z46" align="center" onchange="javascript:process()"/> </th>
<th width="23" scope="col"> <input type="checkbox" name="check" value="Z47" align="center" onchange="javascript:process()"/></th>
<th width="6" scope="col"> </th>
<th width="6" scope="col"> </th>
<th width="23" scope="col"> <input type="checkbox" name="check" value="Z48" align="center" onchange="javascript:process()"/> </th>
<th width="23" scope="col"> <input type="checkbox" name="check" value="Z49" align="center" onchange="javascript:process()"/></th>
<th width="23" scope="col"> <input type="checkbox" name="check" value="Z50" align="center" onchange="javascript:process()"/></th>
<th width="23" scope="col"> <input type="checkbox" name="check" value="Z51" align="center" onchange="javascript:process()"/></th>
<th width="23" scope="col"> <input type="checkbox" name="check" value="Z52" align="center" onchange="javascript:process()"/></th>
<th width="6" scope="col"> </th>
<th width="6" scope="col"> </th>
<th width="26" scope="col"> <input type="checkbox" name="check" value="Z53" align="center" onchange="javascript:process()"/> </th>
<th width="20" scope="col"> <input type="checkbox" name="check" value="Z54" align="center" onchange="javascript:process()"/></th>
</tr>
</table>
The procces function is a function i written before,that you only can check one checkbox.
You can do something like this in your onchange method :
$("#seatDiv").html($(this).val());
having :
<tr>
<td><label>seat</label></td>
<td><div id="seatDiv"> <?php echo form_label('seat'); ?> </div></td>
</tr>
in your html.
using JQuery, you can then easily add this behavior on all seat checkboxes.
To have this done automatically on every checkbox, just put this in global script of the page :
$(document).ready(function() {
$("input[name=check]").change(function() {
$("#seatDiv").html($(this).val());
}
}
$('input[name=checkbox]').click(function(){
$('#labelId').text($(this).val());
});
<label id="SeatNumber">
<input type="checkbox" name="check" value="Z08" align="center" onchange="javascript:process(this)"/>
$("SeatNumber").html(this.value);
加载中,请稍侯......
精彩评论