3

I have a form with a select field. Depending upon the selection, an optional second field (different for each selection) should appear to gather further information. I had a script I wrote in jQuery to do this and I converted it quickly to a plugin (with the intent to add more of my commonly used form related code to the plugin at a later date -- obv with changes to follow in that regard).

Anyway, the problem is that this code functions fine in IE7, Firefox, Chrome, Opera, etc. But it consistently causes installs of IE8 on several different computers to completely freeze. It never unfreezes and never gives an error. I'm baffled as to why this would happen or how to troubleshoot from here, given the lack of any information to debug on.

The HTML generally looks like this (snip).

<!-- Controls Below -->
<li class="group-1 has-dependents">
   <label for="selSource">How did you hear about us?</label>
   <select id="selSource" name="selSource">
       <option value="0">Select One</option>
       <option class="group-referral" value="1">Referral</option>
       <option class="group-conference" value="4">Conference</option>
       <option class="group-other" value="7">Other</option>
   </select>
</li>

<!-- Controlled Above -->
<li id="itemSource" class="group-1 dependent">
   <!-- Opt 1 -->
   <label for="selSourceReferral" class="group-referral">Who gave the referral?</label>
   <select name="selSourceReferral" id="selSourceReferral" class="group-referral" disabled="disabled">
       <option value="0">Select One</option>
       <option value="101">....</option>
       <option value="102">....</option>
       <option value="103">....</option>
       <option value="999">....</option>
   </select>

   <!-- Opt 2 -->
   <label for="selSourceConference" class="group-conference">Which conference?</label>
   <select name="selSourceConference" id="selSourceConference" class="group-conference" disabled="disabled">
       <option value="0">Select One</option>
       <option value="101">....</option>
       <option value="102">....</option>
       <option value="103">....</option>
       <option value="999">....</option>
   </select>  

  <!-- Opt 3 -->
   <label for="txtSourceOther" class="group-other">Please Specify</label>
   <input type="text" name="txtSourceOther" id="Text1" class="group-other" disabled="disabled" />
   <input type="text" name="txtSourceSubOther" id="Text2" class="group-other" disabled="disabled" />
</li>

The plugin code is as follows:

(function($){

    /* Show associated fields based on current selection */
    function show_dependents(_this, _event){
        var current = $('select option[value=' + $(_this).val() + ']').attr("class");
        if(current.length > 0){
            var temp = $(_this).closest('label, li, div, fieldset').attr("class").split(' ');
            for(var i = 0; i < temp.length; i++){
                if(temp[i].search("group-") >= 0){
                    temp = "." + temp[i] + "." + "dependent";
                    $(temp).find('label, input, select, li, div, fieldset').not('.' + current).fadeOut(function(){
                        $(temp).find('label, input, select, li, div, fieldset').not('.' + current).hide();
                    });
                    $(temp).find('.' + current).removeAttr('disabled').fadeIn();        
                }
            }
        }
    }

    $.fn.rlmforms = function(options){      
        return this.each(function(){

            $(this).bind('change.current', 
                function(e){
                    show_dependents(this, e);
                }
            );          
            $(this).trigger('change.current');
        }); // this.each()
    } // $.fn.rlmforms = function(options)

})(jQuery);

It's called by:

$('#selSource').rlmforms();

Any ideas? Note that it doesn't freeze when the page is loaded, but rather it freezes when the parent select field is clicked. The options drop down, and one can be clicked and highlighted. At which point the browser freezes up completely and never unfreezes. The dropdown doesn't even come back up, but stays down with the one that was clicked highlighted.

2
  • why are you disabling your secondary questions rather than using display:none? Also did you try replacing the if statement with $("#selSourceReferral").fadein(); and see if that also causes the freezing? If so you have a smaller example to demonstrate the problem, if not you have more information about what the problem is.
    – kralco626
    May 4, 2011 at 12:54
  • They're both disabled and display:none. They're disabled so that they won't be passed. If they weren't disabled you'd get something like selSource=1&selSourceReferral=100&selSourceConference=0&txtSourceOther=. If they're disabled you'd just get selSource=1&selSourceReferral=100. I can't remember if I disabled the fade animation--I'll try that. (Obviously since so much time has passed I used a different solution for this particular form, but I'd definitely still like to resolve this)
    – morewry
    May 4, 2011 at 13:40

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.