jquery change event not firing

peter_coop
peter_coop used Ask the Experts™
on
I am using a jQuery change event that is working fine apart from an addition I just made. What I am trying to do, is when a user selects anything other than 'NEW' from the select, then show an input element.

I assumed that this would work with just an else statement, but I was wrong. I would be grateful if someone could check my code and show me where I am going wrong?

I only posted code that was relevant, as all the other code is working apart from this else statement.
Thanks
<!--- dropdown for new user addition  -->
<script language="javascript" type="text/javascript">


        $(function() {

        $("#fld_company").show();
        $("#data").hide();


        $("#fld_company").live('click', function() {
              $("#fld_fld").toggle(1000);
              $("#formMessage").toggle(1000);
        });

            $("#AUSR_company").live('change', function() {
              if($(this).val()=="new")

             {
                $("#data").slideDown(1000);

             }

        else

           {

            $("#AUSR_name").show().slideDown(1000);

           }
        });
    });

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
leakim971Multitechnician
Top Expert 2014

Commented:
line 17, replace : if($(this).val()=="new")
by : if( $(this).val() == "NEW")
or by : if( $(this).val().toLowerCase() == "new" )

perhaps you need to remove space too?
so another one : if( $(this).val().toLowerCase().replace(/\s/g,"") == "new" )

Author

Commented:
@leak
I have tried all the options but still the same. The div I am trying to show is initially in the section which is being hidden in  the #data div in my code. Perhaps it has something to do with that? thanks

Author

Commented:
@leak
I have added the htnl as well. Sorry about the formatting, but whenever I post code here, it throws the formatting off. Looks fine in editor, Thanks
<!--- dropdown for new user addition  -->
<script language="javascript" type="text/javascript">
      
			
        $(function() {
					
			$("#fld_company").show();
			$("#data").hide();
					
					
		   jQuery("#fld_company").live('click', function() {
                   $("#fld_fld").toggle(1000);
                   $("#formMessage").toggle(1000);
        });
        jQuery("#AUSR_company").live('change', function() {
              if($(this).val()=="new")
             {
                $("#data").slideDown(1000);
            }
						else
						
             
               $("#AUSR_name").slideDown(1000);
            
						
        });
    });
  	
</script>


<!--- form to add user --->

<div id="adduserform" style="display:none;">
	<div id="AUSR_padd"></div>
  <form id="AUSR_adduser" name="AUSR_adduser" action="" method="post" class="adduserform">
    
		<fieldset>
			<legend id="fld_company">Select Company</legend>
			<div id="formMessage">Click again to open</div>
			<div id="fld_fld">
				
			<dl>
				<dt>
					<label for="AUSR_company" class="opt">Company</label>
				</dt>
				<dd>
					
					<select id="AUSR_company" name="AUSR_company">
					<option SELECTED VALUE="">Select a code</option>
					<option value="demo">DEMO</option>
					
					<option value="demo1">DEMO1</option>
					<option value="demo2">DEMO2</option>
					<option value="new">NEW</option>
					</select>
					
				</dd>
			</dl>
			<br />
			
			<div id="data">
			<dl>
				<dt>
					<label for="AUSR_companyname" class="opt">Company Name:</label>
				</dt>
				<dd>
					<input id="AUSR_companyname" name="AUSR_companyname" type="text" size="32" maxlength="128" size="32" value = "" />
				</dd>
			</dl>
			<dl>
				<dt>
					<label for="AUSR_name" class="opt">Full Name:</label>
				</dt>
				<dd>
					<input id="AUSR_name" name="AUSR_name" type="text" size="32" maxlength="128" value = "" />
				</dd>
			</dl>
			<dl>
				<dt>
					<label for="AUSR_phone">Phone:</label>
				</dt>
				<dd>
					<input id="AUSR_phone" name="AUSR_phone" type="text" size="32" maxlength="128" value = "" />
				</dd>
			</dl>
			<dl>
				<dt>
					<label for="AUSR_fax" class="opt">Fax:</label>
				</dt>
				<dd>
					<input id="AUSR_fax" name="AUSR_fax" type="text" size="32" maxlength="128" value = "" />
				</dd>
			</dl>
			<dl>
				<dt>
					<label for="AUSR_mobile" class="opt">Mobile:</label>
				</dt>
				<dd>
					<input id="AUSR_mobile" name="AUSR_mobile" type="text" size="32" maxlength="128" value = "" />
				</dd>
			</dl>
			<dl>
				<dt>
					<label for="AUSR_email" class="opt">Email address:</label>
				</dt>
				<dd>
					<input id="AUSR_email" name="AUSR_email" type="text" size="32" maxlength="128" value = "" />
				</dd>
			</dl>
			<dl>
				<dt>
					<label for="AUSR_address1" class="opt">Address 1:</label>
				</dt>
				<dd>
					<input id="AUSR_address1" name="AUSR_address1" type="text" size="32" maxlength="128" value = "" />
				</dd>
			</dl>
			<dl>
				<dt>
					<label for="AUSR_address2" class="opt">Address 2:</label>
				</dt>
				<dd>
					<input id="AUSR_address2" name="AUSR_address2" type="text" size="32" maxlength="128" value = "" />
				</dd>
			</dl>
			<dl>
				<dt>
					<label for="AUSR_address3" class="opt">Address 3:</label>
				</dt>
				<dd>
					<input id="AUSR_address3" name="AUSR_address3" type="text" size="32" maxlength="128" value = "" />
				</dd>
			</dl>
			<dl>
				<dt>
					<label for="AUSR_town" class="opt">Town:</label>
				</dt>
				<dd>
					<input id="AUSR_town" name="AUSR_town" type="text" size="32" maxlength="128" value = "" />
				</dd>
			</dl>
			<dl>
				<dt>
					<label for="AUSR_postcode" class="opt">Postcode:</label>
				</dt>
				<dd>
					<input id="AUSR_postcode" name="AUSR_postcode" type="text" size="32" maxlength="128" value = "" />
				</dd>
			</dl>
			</div></div>
		</fieldset>
			
		<fieldset>
			<legend>User Info</legend>
			<dl>
				<dt>
					<label for="AUSR_username" class="opt">Username:</label>
				</dt>
				<dd>
					<input id="AUSR_username" name="AUSR_username" size="32" maxlength="128" value = "" />
				</dd>
			</dl>
			<dl>
				<dt>
					<label for="AUSR_password" class="opt">Password:</label></dt>
				<dd><input id="AUSR_password" name="AUSR_password" type="text" size="32" maxlength="32" value = "" />
				</dd>
			</dl>
			
		</fieldset>
		<fieldset>
				<legend>User Status</legend>
			<dl>
				<dt>
					<label for="AUSR_active" class="opt">Active</label>
				</dt>
				<dd>
					<select id="AUSR_active" name="AUSR_active">
						<option SELECTED VALUE="">Active Level</option>
						<option value="1">YES</option>
						<option value="0">NO</option>
					</select>
				</dd>
			</dl>
			<br />
			<dl>
				<dt>
					<label for="AUSR_level" class="opt">Level</label>
				</dt>
				<dd>
					<select id="AUSR_level" name="AUSR_level">
					<option SELECTED VALUE="">Client Level</option>
					<option value="0">Admin</option>
					<option value="1">Superuser</option>
					<option value="2">Limited User</option>
					</select>
				</dd>
			</dl>
		</fieldset>
		
					<div id="AUSR_result"></div>
					<button id="AUSR_submit" class="addusersubmit">Add User</button>
		
		</form>
</div>

<!--- end of form to add user --->

Open in new window

leakim971Multitechnician
Top Expert 2014

Commented:
work fine : http://jsfiddle.net/L3Tsy/
no?
If I understand you correctly, this is what's not happening:
else
           {
            $("#AUSR_name").show().slideDown(1000);
           }

In other words, the text input with id AUSR_name is not sliding down, right?

In your response #36322626, you said
"The div I am trying to show is initially in the section which is being hidden in  the #data div in my code. "
This is not technically true, but yes, you are correct about why it's not showing.  I say it's not correct because it's an input, not a div.  But it is not showing because it is inside the #data div, which is still set to display: none;

One solution would be to break up #data into three separate containers in order to get AUSR_name into its own div.

Author

Commented:
@leak

no, it is not working in your fiddle. If I select anything but new, then nothing happens. What is supposed to happen, is if I select any of the demo options, then the input #AUSR_name should slide down and only that input. If I select new, then all inputs in the data div are shown.  Thanks

@zappafan2k2
I had thought of that, but it will still cause a problem will it not because the div will still need to be hidden. Thanks
leakim971Multitechnician
Top Expert 2014
Commented:
Test page : http://jsfiddle.net/dkDSV/
$("#fld_company").show();
$("#data").hide();
$("#fld_company").live('click', function() {
    $("#fld_fld").toggle(1000);
    $("#formMessage").toggle(1000);
});
$("#AUSR_company").live('change', function() {
    if($(this).val()=="new") {
        $("dl", "#data").show();
        $("#data").slideDown(1000);
    }
    else {
        $("dl:not(:eq(1))", "#data").hide();
        $("#data").slideDown(1000);
    }
});

Open in new window

Author

Commented:
Both solutions are correct so i shall split the points if that is agreeable?

@leak
What is the purpose of the line:$("dl:not(:eq(1))", "#data").hide();

Many thanks for all your help.
leakim971Multitechnician
Top Expert 2014

Commented:
in #data find all dl, forget the one with index 1 (the second one), hide them

Author

Commented:
@leak
Thanks for that.

Author

Commented:
Thank you for your help

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial