Avatar of peter_coop
peter_coop
Flag 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

JavaScriptWeb Languages and StandardsjQuery

Avatar of undefined
Last Comment
peter_coop

8/22/2022 - Mon
leakim971

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

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

This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23
leakim971

work fine : http://jsfiddle.net/L3Tsy/
no?
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.
peter_coop

ASKER
@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
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
ASKER CERTIFIED SOLUTION
zappafan2k2

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
SOLUTION
Log in to continue reading
Log In
Sign up - Free for 7 days
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
peter_coop

ASKER
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.
leakim971

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

ASKER
@leak
Thanks for that.
Your help has saved me hundreds of hours of internet surfing.
fblack61
peter_coop

ASKER
Thank you for your help