CODEWITHSUNDEEP
jqueryselectinputfocusslideup
kkirsche
kkirsche

Reputation: 1257

Focusing on Text Input Field When <select> field is shown

I am working on creating a form section which shows input fields (either text or select fields) when a user checks the respective checkbox. The problem that I am having though is that if you have displayed the select and one of the text inputs, if you attempt to click the text field to type, it will jump focus up to the select making it impossible to type in the field.

I am using jQuery to achieve the functionality (most recent version) and am executing the following javascript code to achieve this. The HTML that goes with it is below this.

//Class Year Dropdown
$("#ifClassScholashipsSelected").css("display", "none");
$(".enableClassYearSelection").click(function() {
    if ($("input[name=Class_Scholarships]:checked").val() == "class_scholarships") {
        $("#ifClassScholashipsSelected").slideToggle("fast"); //Slide Down Effect
    } else {
        $("#ifClassScholashipsSelected").slideToggle("fast"); //Slide Up Effect
    }
});
//Other Funds Dropdown
$("#ifOtherFundsSelected").css("display", "none");
$(".enableOtherFunds").click(function() {
    if ($('input[name=OtherFunds]:checked').val() == "other_funds") {
        $("#ifOtherFundsSelected").slideDown("fast"); //Slide Down Effect
    } else {
        $("#ifOtherFundsSelected").slideUp("fast"); //Slide Up Effect
    }
});
//In Memory Of Dropdown
$("#ifInMemoryOfSelected").css("display", "none");
$(".enableInMemoryOf").click(function() {
    if ($('input[name=InMemoryOf]:checked').val() == "in_memory_of") {
        $("#ifInMemoryOfSelected").slideDown("fast"); //Slide Down Effect
    } else {
        $("#ifInMemoryOfSelected").slideUp("fast"); //Slide Up Effect
    }
});
//In Honor Of Dropdown
$("#ifInHonorOfSelected").css("display", "none");
$(".enableInHonorOf").click(function() {
    if ($('input[name=InHonorOf]:checked').val() == "in_honor_of") {
        $("#ifInHonorOfSelected").slideDown("fast"); //Slide Down Effect
    } else {
        $("#ifInHonorOfSelected").slideUp("fast"); //Slide Up Effect
    }
});​

This is having an effect on the following code :

<input type="checkbox" name="Class_Scholarships" value="class_scholarships" class="enableClassYearSelection" />
    <label><strong>Class Scholarships</strong>
<!--Dropdown if selected-->
<div id="ifClassScholashipsSelected">
    <em>Please select the appropriate class below</em></label> <br />
        <select name="SelectedClassYear">
            <option value="NoClass">Choose a Class</option>
            <option value="Class_Of_2003">Class of 2003 Scholarship IHO Ralph A. Crawley</option>
            <option value="Class_Of_2004">Class of 2004 Scholarship IMO C. Frazier 04 &amp; IHO W. Simms</option>
            <option value="Class_Of_2005">Class of 2005 Scholarship IMO Prof. Lee Cohen</option>
            <option value="Class_Of_2006">Class of 2006 Scholarship IMO Peter C. Bance Jr</option>
            <option value="Class_Of_2007">Class of 2007 Scholarship IHO Lt. Gen. Sam Wilson</option>
            <option value="Class_Of_2008">Class of 2008 Scholarship IHO Ms. Gerry Pettus</option>
            <option value="Class_Of_2009">Class of 2009 Scholarship</option>
            <option value="Class_Of_2010">Class of 2010 Scholarship IHO Mrs. Dottie Fahrner</option>
            <option value="Class_Of_2011">Class of 2011 Scholarship IHO Ms. Anita Garland</option>
            <option value="Class_Of_2012">Class of 2012 Scholarship IHO Mr. Jason M. Ferguson 96</option>
            <option value="Class_Of_1951">Class of 1951 Memorial Scholarship</option>
            <option value="Class_Of_1953">Class of 1953 Scholarship Endowment</option>
            <option value="Class_Of_1954">Class of 1954 Wilson Center Lecture Series</option>   
            <option value="Class_Of_1958">Class of 1958 Summer College Endowment Fund</option>  
            <option value="Class_Of_1960">Class of 1960 Good Men Good Citizens Scholarship</option>  
            <option value="Class_Of_1961">Class of 1961 Good Men Good Citizens Scholarship</option>
            <option value="Class_Of_1980">Class of 1980 Endowed Scholarship</option>
        </select>
    </div>
    <!--End Dropdown-->
    <br />

<input type="checkbox" name="CultureandCommunity" value="culture_and_community" />
    <label><strong>Culture and Community</strong> &mdash; Supports the arts at Hampden-Sydney and service opportunities locally and around the world.</label><br />
    <input type="checkbox" name="OtherFunds" value="other_funds" class="enableOtherFunds" />
    <label><strong>Would you like to donate to other funds?</strong></label>
        <!--Dropdown if selected-->
            <div id="ifOtherFundsSelected">
                <em>Please select the fund below</em></label> <br />
                <div class="scrolllist">
                    <input type="checkbox" name="BortzLibrary" value="1" /> Bortz Library<br />
                    <input type="checkbox" name="EstherAtkinsonMuseum" value="1"  />Esther Atkinson Museum<br />
                    <input type="checkbox" name="EverettStadium" value="1" />Everett Stadium<br />
                    <input type="checkbox" name="GMGCScholarship" value="1" />Good Men Good Citizens Scholarship<br />
                    <input type="checkbox" name="KirkAthleticCenter" value="1" />Kirk Athletic Center<br />
                    <input type="checkbox" name="BaseballBigHittersClub" value="1"  />Baseball Big Hitters Club<br />
                    <input type="checkbox" name="BasketballRoundballClub" value="1" />Basketball Roundball Club<br /> 
                    <input type="checkbox" name="CrossCountryHarriers" value="1" />Cross Country Harriers<br />
                    <input type="checkbox" name="GolfHoleOneClub" value="1" />Golf Hole In One Club<br />
                    <input type="checkbox" name="FootballGridironClub" value="1" />Football Gridiron Club<br />
                    <input type="checkbox" name="LacrosseFaceOffClub" value="1" />Lacrosse Face Off Club<br />                                                                       
                    <input type="checkbox" name="SoccerGoalClub" value="1" />Soccer Goal Club<br />   
                    <input type="checkbox" name="TennisRacquetClub" value="1" />Tennis Racquet Club<br /> 
                    <input type="checkbox" name="SwimmingClub" value="1" />Swimming Club<br />
                    <input type="checkbox" name="RugbyClub" value="1" />Rugby Club<br />  
                    <input type="checkbox" name="UnrestrictedCapital" value="1" />Unrestricted Capital<br />   
                    <input type="checkbox" name="WilsonCenter" value="1" />Wilson Center<br />
                    <input type="checkbox" name="Other" value="1" />Other&mdash;<em>Explain in Special Instructions</em><br />                                
        </div>
            </div>
            <!--End Dropdown-->
            <br />

            <input type="checkbox" name="InMemoryOf" value="in_memory_of" class="enableInMemoryOf" />
        <label><strong>Is Your Donation In Memory of Someone?</strong></label>
            <!--Dropdown if selected-->
                <div id="ifInMemoryOfSelected">
                    <em>Who is your gift in memory of?</em></label> <br />
                    <input type="text" name="nameOfInMemory" size="85" value="" />
                </div>
                <!--End Dropdown-->
                <br />

                <input type="checkbox" name="InHonorOf" value="in_honor_of" class="enableInHonorOf" />
            <label><strong>Is Your Donation In Honor of Someone?</strong></label>
            <!--Dropdown if selected-->
                    <div id="ifInHonorOfSelected">
                    <em>Who is your gift in honor of?</em></label> <br />
                    <input type="text" name="nameOfInHonor" size="85" value="" />
                    </div>
                    <!--End Dropdown-->

New corrected markup:

<input type="checkbox" name="Class_Scholarships" value="class_scholarships" class="enableClassYearSelection" />
    <label><strong>Class Scholarships</strong></label>
    <!--Dropdown if selected-->
    <div id="ifClassScholashipsSelected">
        <label><em>Please select the appropriate class below</em></label>
        <br />
        <select name="SelectedClassYear">
        <option value="NoClass">Choose a Class</option>
        <option value="Class_Of_2003">Class of 2003 Scholarship IHO Ralph A. Crawley</option>
        <option value="Class_Of_2004">Class of 2004 Scholarship IMO C. Frazier 04 &amp; IHO W. Simms</option>
        <option value="Class_Of_2005">Class of 2005 Scholarship IMO Prof. Lee Cohen</option>
        <option value="Class_Of_2006">Class of 2006 Scholarship IMO Peter C. Bance Jr</option>
        <option value="Class_Of_2007">Class of 2007 Scholarship IHO Lt. Gen. Sam Wilson</option>
        <option value="Class_Of_2008">Class of 2008 Scholarship IHO Ms. Gerry Pettus</option>
        <option value="Class_Of_2009">Class of 2009 Scholarship</option>
        <option value="Class_Of_2010">Class of 2010 Scholarship IHO Mrs. Dottie Fahrner</option>
        <option value="Class_Of_2011">Class of 2011 Scholarship IHO Ms. Anita Garland</option>
        <option value="Class_Of_2012">Class of 2012 Scholarship IHO Mr. Jason M. Ferguson 96</option>
        <option value="Class_Of_1951">Class of 1951 Memorial Scholarship</option>
        <option value="Class_Of_1953">Class of 1953 Scholarship Endowment</option>
        <option value="Class_Of_1954">Class of 1954 Wilson Center Lecture Series</option>   
        <option value="Class_Of_1958">Class of 1958 Summer College Endowment Fund</option>  
        <option value="Class_Of_1960">Class of 1960 Good Men Good Citizens Scholarship</option>  
        <option value="Class_Of_1961">Class of 1961 Good Men Good Citizens Scholarship</option>
        <option value="Class_Of_1980">Class of 1980 Endowed Scholarship</option>
    </select>
    </div>
    <!--End Dropdown-->
    <br />

<input type="checkbox" name="CultureandCommunity" value="culture_and_community" />
<label><strong>Culture and Community</strong> &mdash; Supports the arts at Hampden-Sydney and service opportunities locally and around the world.</label><br />

<input type="checkbox" name="OtherFunds" value="other_funds" class="enableOtherFunds" />
    <label><strong>Would you like to donate to other funds?</strong></label>
    <!--Dropdown if selected-->
        <div id="ifOtherFundsSelected">
            <label><em>Please select the fund below</em></label> <br />
                <div class="scrolllist">
                <input type="checkbox" name="BortzLibrary" value="1" /> Bortz Library<br />
                <input type="checkbox" name="EstherAtkinsonMuseum" value="1"  />Esther Atkinson Museum<br />
                <input type="checkbox" name="EverettStadium" value="1" />Everett Stadium<br />
                <input type="checkbox" name="GMGCScholarship" value="1" />Good Men Good Citizens Scholarship<br />
                <input type="checkbox" name="KirkAthleticCenter" value="1" />Kirk Athletic Center<br />
                <input type="checkbox" name="BaseballBigHittersClub" value="1"  />Baseball Big Hitters Club<br />
                <input type="checkbox" name="BasketballRoundballClub" value="1" />Basketball Roundball Club<br /> 
                <input type="checkbox" name="CrossCountryHarriers" value="1" />Cross Country Harriers<br />
                <input type="checkbox" name="GolfHoleOneClub" value="1" />Golf Hole In One Club<br />
                <input type="checkbox" name="FootballGridironClub" value="1" />Football Gridiron Club<br />
                <input type="checkbox" name="LacrosseFaceOffClub" value="1" />Lacrosse Face Off Club<br />                                                                       
                <input type="checkbox" name="SoccerGoalClub" value="1" />Soccer Goal Club<br />   
                <input type="checkbox" name="TennisRacquetClub" value="1" />Tennis Racquet Club<br /> 
                <input type="checkbox" name="SwimmingClub" value="1" />Swimming Club<br />
                <input type="checkbox" name="RugbyClub" value="1" />Rugby Club<br />  
                <input type="checkbox" name="UnrestrictedCapital" value="1" />Unrestricted Capital<br />   
                <input type="checkbox" name="WilsonCenter" value="1" />Wilson Center<br />
                <input type="checkbox" name="Other" value="1" />Other&mdash;<em>Explain in Special Instructions</em><br />                                
        </div>
        </div>
        <!--End Dropdown-->
        <br />

                                <input type="checkbox" name="InMemoryOf" value="in_memory_of" class="enableInMemoryOf" />
                            <label><strong>Is Your Donation In Memory of Someone?</strong></label>
                            <!--Dropdown if selected-->
                                <div id="ifInMemoryOfSelected">
                                    <label><em>Who is your gift in memory of?</em></label> <br />
                                    <input type="text" name="nameOfInMemory" size="85" value="" />
                                </div>
                                <!--End Dropdown-->
                                <br />

                                <input type="checkbox" name="InHonorOf" value="in_honor_of" class="enableInHonorOf" />
                            <label><strong>Is Your Donation In Honor of Someone?</strong></label>
                            <!--Dropdown if selected-->
                                <div id="ifInHonorOfSelected">
                                    <label><em>Who is your gift in honor of?</em></label> <br />
                                    <input type="text" name="nameOfInHonor" size="85" value="" />
                                </div>
                                <!--End Dropdown-->

Upvotes: 0

Views: 1081

Answers (2)

Osama Ahmad
Osama Ahmad

Reputation: 235

The problem because of this lines

<label><strong>Class Scholarships</strong>
<!--Dropdown if selected-->
<div id="ifClassScholashipsSelected">
<em>Please select the appropriate class below</em></label> <br />
    <select name="SelectedClassYear">

you are opening the Label before Div and Close it in the Div.

 <label> 
 <div>
 </label> 
 </div>

and this is The JsFiddle Demo

Upvotes: 0

Travesty3
Travesty3

Reputation: 14479

This is happening because your HTML is invalid.

Near the beginning of your HTML, you open a <label> tag. Inside that <label> tag, you open a <div> tag. You then close the <label> tag before closing the <div> tag.

This is a no-no. Move your </label> tag and it works:

Change:      jsFiddle

    <label><strong>Class Scholarships</strong>
<!--Dropdown if selected-->
<div id="ifClassScholashipsSelected">
    <em>Please select the appropriate class below</em></label> <br />

To:      jsFiddle

<label><strong>Class Scholarships</strong></label>
<!--Dropdown if selected-->
<div id="ifClassScholashipsSelected">
    <em>Please select the appropriate class below</em><br />

Upvotes: 4

Related Questions