Checkbox Problem

Hi Sir/Ma'am,

Good day!

I made a checkbox and I use jquery on displaying one textbox if the user check the Yes checkbox but if the user check the no the textbox will be hide. It works fine now but when the checkbox has vale from the database and which is no the textbox was displayed so that I made a if condition that only if the checkbox is Yes or '' but I noticed that when I check the Yes the textbox was not display because from the database the value of textbox is No.

$(document).ready(function() {
$(".ticket").change(function () {
  //check if its checked. If checked move inside and check for others value
   
  if (this.checked && this.value === "Yes") {
  //add a text box next to it
  $("#destination_data").show();
  }
  else if (this.checked && this.value === "No") {
  //remove if unchecked
  $("#destination_data").hide();
  }
   

});
});




if($ticket == '')
{
?>   
  #destination_data {display: none; display:}
<?php
}
?>



 <tr>
  <td class="row_leaveform">Travel Tickets:</td>
  <td class="row_leavedata">
  <input type="checkbox" class="ticket" name="ticket" value="Yes" <?php if($ticket=="Yes") echo 'checked="checked"'; ?>>Yes
  <input type="checkbox" class="ticket" name="ticket" value="No" <?php if($ticket=="No") echo 'checked="checked"'; ?>>No
  </td>
  </tr>

  <tr id="destination_data">
  <?php
  if($ticket=="Yes" || $ticket=='')
  {
  ?>
  <td class="row_leaveform">Destination </td>
  <td class="row_leavedata"><b>Doha</b> to  <input type="text" name="destination" id="destination" value="<?php echo  $nationality; ?>" size="31"></td>
  <?php
  }
  ?>
  </tr>

Code (markup):

it works fine when $ticket == '';

but when in terms of update and the $ticket has value of No

in this code the destination was not display but when I try to check the Yes the destination was not display. I want it to display once I click the Yes if need to update my data.

if my remove the if condition even the value of ticket is No the destination was display


I want to happen is if

$ticket == '' or $ticket == 'Yes' the destination display
$ticket == 'No' destination not display but when I click the Yes the destination should be display

Thank you.

 

I will try it.


Thank you

 

I tried it sir but it did not work for me

 

1) Quite correct checkbox is wrong if you have BOTH options, that would be a radio button or just ONE checkbox.

2) what makes what should be a label and a input be "tabular data"?

3) Why are you pissing on the accessibility with jquery to do what modern browsers can do with CSS?

4) if it's already off that markup wouldn't be sent by php, are you dynamically adding that with the scripttardery or something?

I would probably have it output this all the time:

<label for="ticket">Travel Tickets:</label>
<input
	type="checkbox" name="ticket" id="ticket" value="1"
	<?= $ticket == 'yes' ? 'checked' : '' ?>
>

<div>
	<label for="destination">Destination:</label>
	<b>Doha</b> to  <input
		type="text" name="destination" id="destination" size="31"
		value="<?= $nationality ?>"
	>
</div>

Code (markup):

Then do something like this in the CSS:

@media (min-width:0) { /* sneaky trick to target just CSS3 browsers */
	#ticket+div {
		display:none;
	}
	#ticket:checked+div {
		display:block;
	}
}

Code (markup):

In legacy browsers the DIV, LABLE and INPUT for destination would show all the time -- OH WELL. Modern browsers it would work just fine with no extra scripting needed.

For the rest of your formatting just set the labels to inline-block and put a width on them... or if you need the input dynamic in width have the outer fieldset (you do have an outer fieldset, right?) padding or margined off and negative-margin the labels into it so the input can be set to 99%...

Table? has ZERO blasted business in there. Scripting? Even if it were needed the bloated train wreck that is jQuery isn't the answer, nor is wasting time processing if it's showing or not server-side... particularly since if you don't send it from the server, it doesn't exist so how is it going to be shown if they click on yes?

If you REALLY want yes/no instead of checked/unchecked, use type="radio" instead and keep "yes" second... remembering that radio buttons should be grouped in a fieldset, have a legend, with "yes" being one label and "no" being another.

You know, proper document structure and semantic markup for a form?