Question

Ok here is my problem, and all of my ‘dirty’ code. This isn’t my production code but just trying to make it work at the moment.

Basically what I need is when a user selects the Not Ok radio button it displays the textarea for that unique set which it doesn’t do right now when I select Not Ok it gives the textarea’s for all the entries which right now is about 13 sets of questions that get generated dynamically from a mysql database at the moment. I have a feeling it has to do something with unique id’s that are either in the wrong place in my code now, or just simply aren’t there at all. Any help is appreciated greatly.

<div data-role="collapsible" data-theme="b" data-content-theme="c">
<h3>Vehicle Check Information</h3>
<?php
$query = mysql_query("SELECT * FROM vehicle_q");
while($row = mysql_fetch_array($query)) {
    $q_title = $row['title'];
    $q_id = $row['id'];
?>

<div data-role="fieldcontain" style="border:0;">
<fieldset data-role="controlgroup">
<legend><?php echo $q_title; ?>:</legend>

<input type="radio" name="help[]" id="checkbox-1a" value="Ok" />
<label for="checkbox-1a">Ok</label>
<input type="radio" name="help[]" id="checkbox-2a" value="Not Ok" />
<label for="checkbox-2a">Not Ok</label>

</fieldset>

<div id="hidden_text-<?php echo $q_id; ?>" style="display:none;">

<script>
$(document).ready(function(){
$(":radio:eq(1)").click(function(){
$("#hidden_text-<?php echo $q_id; ?>").show(500);
});
$(":radio:eq(0)").click(function(){
$("#hidden_text-<?php echo $q_id; ?>").hide(500);
});
});
</script>

<fieldset data-role="fieldcontain">
<label for="<?php echo $q_title; ?>_t">Explain the Deficiency(If any):</label>
<textarea name="text_a[]" id="<?php echo $q_title; ?>_t"></textarea>
</fieldset>
</div>
</div>
<input type="hidden" name="q_title1[]" value="<?php echo $q_title; ?>" />

<?php
}
?>

</div>

Answer 1

The other 2 answers are ways to fix your issue. As a side, here is possibly why it is happening. When you are using –

$(":radio:eq(1)").click(function()
$(":radio:eq(0)").click(function()

You are using a click listener that just checks for if ‘any’ radio button with that index position was clicked on your page. So any button with 1 index position will make every $(":radio:eq(1)").click(function() execute.

Edit –

You would want to change your radio button ids, as (1) they will not be unique as you repeat them with each while() loop, and (2) you could use it to check if that specific radio buttton was clicked.

Try changing it to –

...
<input type="radio" name="help[]" id="checkbox-1a-<?php echo $q_id; ?>" value="Ok" />
<label for="checkbox-1a">Ok</label>
<input type="radio" name="help[]" id="checkbox-2a-<?php echo $q_id; ?>" value="Not Ok" />
<label for="checkbox-2a">Not Ok</label>

</fieldset>

<div id="hidden_text-<?php echo $q_id; ?>" style="display:none;">

<script>
$(document).ready(function(){
$("#checkbox-2a-<?php echo $q_id; ?>").click(function(){
$("#hidden_text-<?php echo $q_id; ?>").show(500);
});
$("#checkbox-1a-<?php echo $q_id; ?>").click(function(){
$("#hidden_text-<?php echo $q_id; ?>").hide(500);
});
});
</script>