Link to home
Create AccountLog in
Avatar of peter_coop
peter_coopFlag for United Kingdom of Great Britain and Northern Ireland

asked on

jquery change event not firing

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

Avatar of leakim971
leakim971
Flag of Guadeloupe image

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" )
Avatar of peter_coop

ASKER

@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
@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

Avatar of zappafan2k2
zappafan2k2

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.
@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
ASKER CERTIFIED SOLUTION
Avatar of zappafan2k2
zappafan2k2

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
SOLUTION
Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
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.
in #data find all dl, forget the one with index 1 (the second one), hide them
@leak
Thanks for that.
Thank you for your help