Hi Guys,

I've got a simple form with checkboxes. When someone checks the 'Other' checkbox, a new checkbox is appended to the end of the list, so the user can add as many "Other' fields as they like (code is below). I've created a function that binds the click function to the class of the 'Other' checkboxes. After it has appened the new checkbox it then has to call itself to rebind the click function to the new checkbox. This is working great in FF, but in IE6 and IE7 I get an infinite loop and it keeps adding checkboxes until I stop the script. Can anyone please point out my mistake here?

<html>
<head>
<title>Test</title>
<script src="http://www.sitesuite.com.au/affiliate/js/jquery/jquery.js"; type="text/javascript"></script>
<script>
var othercnt = 1;

function initOther() {
 $(".otherfield").unbind("click").click(function() {
   if ($(this)[0].checked == true) {
     othercnt++;
$(this).parent().parent().append('<div id="other_' + othercnt + '"><input type=checkbox name=other class="otherfield"> Other: <input type=text name="validation_level" value="" class="input othertext"></div>');
   }
   else
   {
     $(this).next(".othertext").val('');
     var lastcount = othercnt;
     var lastdiv = "#other_" + lastcount;
     var lastfield = lastdiv + " .otherfield";
     if ($(lastfield).checked != true) {
       $(lastdiv).remove();
       othercnt--;
     }
   }
initOther(); // re-initialise click function on new checkbox - THIS IS THE PROBLEM
 });
}

$(function(){
 initOther();
});

</script>
</head>
<body>
<table>
   <thead>
       <tr><th>Validation Levels</th></tr>
   </thead>
   <tbody>
       <tr>
           <td >
               <table width=100% cellpadding=0 cellspacing=0 border=0>
                   <tbody>
                       <tr>
                           <td>
<div><input type=checkbox name=validation_level value="Basic">Basic</div> <div><input type=checkbox name=validation_level value="Standard">Standard</div> <div><input type=checkbox name=other class="otherfield"> Other: <input type=text name="validation_level" value="" class="input othertext"></div>
                           </td>
                       </tr>
                   </tbody>
               </table>
           </td>
       </tr>
   </tbody>
</table>
</body>

Regards,

David
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Reply via email to