Question

i have an area which is initially hidden, and should appear/disappear based on a field’s content.

so if the user selects pay by credit card – then the extra fields open, if not – then they disappear.

the problem is that it only works to show them – not hide.

can someone pls see here: http://bit.ly/dOCNQQ

Thanks in advance!

$(function(){ 
    $('#CCinfo').hide();       
    $('#paymethod').change(function(){
    var payme = $(this).val();
    if (payme=='CreditCard') {
            $('#CCinfo').show("slow");
        } else {
            $('#CCinfo').hide();    
        }
    });
});

<tr>
 <td colspan="2" align="right">
  <strong>pay by:</strong><br />
  <input type="radio" name="paymethod" id="paymethod" title="*" class="required" value="CreditCard"/>credit card<br />
  <tr>
   <td colspan="2" align="right"><strong>pay by:</strong><br />
    <input type="radio" name="paymethod" id="paymethod" title="*" class="required" value="CreditCard"/>credit card<br />&nbsp;
    <input type="radio" name="paymethod" id="paymethod" title="*" class="required" value="Check"/>cash<br />&nbsp;
    <input type="radio" name="paymethod" id="paymethod" title="*" class="required" value="At Dinner"/>check
   </td>
  </tr>
  &nbsp;
  <input type="radio" name="paymethod" id="paymethod" title="*" class="required" value="Check"/>cash<br />&nbsp;
  <input type="radio" name="paymethod" id="paymethod" title="*" class="required" value="At Dinner"/> check
 </td>
</tr>

Answer 1

In your example multiple inputs have the same id, “paymethod”, which you then use to listen for a change event. In HTML the id attribute of an element must be unique, when you call $("#paymethod") it is only finding the first input with this id. You should either remove the common id attribute or create unique ones. You should use the name attribute to locate the radio inputs.

So the HTML would be something like this:

<td align="right" colspan="2"><strong>pay by:</strong><br>
    <input type="radio" value="CreditCard" class="required" title="*" name="paymethod">credit card<br>&nbsp;
    <input type="radio" value="Check" class="required" title="*" name="paymethod">cash<br>&nbsp;
    <input type="radio" value="At Dinner" class="required" title="*" name="paymethod"> check
</td>

The JS to get the radio elements would be:

$("input[name='paymethod']").change(function() { ... });