a bit of a snag

Page 1 of 1

11 Replies - 359 Views - Last Post: 01 May 2012 - 04:06 PM

#1 robertpurpose  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 32
  • Joined: 28-January 09

a bit of a snag

Posted 01 May 2012 - 09:48 AM

My intentions here are to hide the Other textbox on load and show it when Other is selected. could i get a second pair of eyes for this one.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
     <script type="text/javascript">
	 
$(document).ready(function(){
	var School = $(ouforms.School.Other); 
	var oInput = $(ouforms.Other); 
		oInput.hide();
School.change(function(){
oInput.show();
}); 

});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>	           
	</div>
         <div id="content_main">
            
            <div id="content_sub">
		<div id="status" class="none"><!-- no empty div --></div>
               <br/>
               <form id="ouforms" name="ouforms" method="post" class="ldpforms">
                  <label for="FirstName">First Name: </label>
                  <input type="text" name="FirstName" value=""/>
                  <br/>
                  <label for="LastName">Last Name: </label>
                  <input type="text" name="LastName" value=""/>
                  <br/>
                  <label for="Email">Email </label>
                  <input type="text" name="Email" value=""/>
                  <br/>
                  <label for="School">School: </label>
                  <select name="School[]">
                     <option value="PleaseSelect" checked="checked">(Please Select) 

					</option>
                     <option value="BeachPublicSchools">Beach Public Schools 

					</option>
                     <option value="BelfieldPublicSchools">Belfield Public Schools 

					</option>
                     <option value="BillingsCountyPublicSchools">Billings County Public Schools 

					</option>
                     <option value="BowmanCountyPublicSchools">Bowman County Public Schools 

					</option>
                     <option value="DakotaHorizonYouthCenter">Dakota Horizon Youth Center 

					</option>
                     <option value="DickinsonAdultLearningCenter">Dickinson Adult Learning Center 

					</option>
                     <option value="DickinsonCatholicSchools">Dickinson Catholic Schools 

					</option>
                     <option value="DickinsonStateUniversityStudents">Dickinson State University Students 

					</option>
                     <option value="EarlyChildhoodLeft">Early Childhood Left 

					</option>
                     <option value="GlenUllinPublicSchools">Glen Ullin Public Schools 

					</option>
                     <option value="HallidayPublicSchools">Halliday Public Schools 

					</option>
                     <option value="HebronPublicSchools">Hebron Public Schools 

					</option>
                     <option value="HettingerPublicSchools">Hettinger Public Schools 

					</option>
                     <option value="HopeChristianAcademy">Hope Christian Academy 

					</option>
                     <option value="KilldeerPublicSchools">Killdeer Public Schools 

					</option>
                     <option value="LoneTreeGolvaPublicSchools">Lone Tree (Golva) Public Schools 

					</option>
                     <option value="MottRegentPublicSchools">Mott/Regent Public Schools 

					</option>
                     <option value="NewEnglandPublicSchools">New England Public Schools 

					</option>
                     <option value="RichardtonTaylorPublicSchools">Richardton  Taylor Public Schools 

					</option>
                     <option value="ScrantonPublicSchools">Scranton Public Schools 

					</option>
                     <option value="SouthHeartPublicSchools">SouthHeart Public Schools 

					</option>
                     <option value="SWCHS">SWCHS 

					</option>
                     <option value="TwinButtesPublicSchools">Twin Buttes Public Schools 

					</option>
                     <option value="WestRiverSpecialServices">West River Special Services 

					</option>
                     <option value="Other">Other 

					</option>
                  </select>
                  <br/>
                  <label for="Other">Other: </label>
                  <input type="text" name="Other" value=""/>
                  <br/>
                  <p>YOU CANNOT UNCLICK THE BUTTON If you change your mind and wuild like to choose a different session, you MUST click RESET FORM on the buttom of the page</p>
                  <label for="KEYNOTE">8:45 - 9:50 </label>
                  <br/>
                  <input type="checkbox" name="KEYNOTE[]"
                         value="KEYNOTEFROMSUITSTOTATTOOSTurningGenerationalandCulturalDifferencesintoOpportunities"
                         checked="checked"/>KEYNOTE: FROM SUITS TO TATTOOS - Turning Generational and Cultural Differences into Opportunities <br/>
                  <br/>
                  <p>1. Understanding the Common Core State Standards with Saxon Math (Grade k-12) Please contact RESP at (701) 483-0999 to register for this session.</p>
                  <label for="Option1">10:00 - 3:00 </label>
                  <br/>
                  <input type="radio" name="Option1"
                         value="2UtilizinglearningManagementsSystemsRACTCEducatorsOnly"/>2. Utilizing learning Managements Systems (RACTC Educators Only) <br/>
                  <input type="radio" name="Option1"
                         value="3TechniquesandTeachingStrategiesinWeldingfortheSecondaryInstructorsWeldingInstructorsOnly"/>3. Techniques and Teaching Strategies in Welding for the Secondary Instructors (Welding Instructors Only) <br/>
                  <br/>
                  <label for="Option2">10:00 - 11:15 </label>
                  <br/>
                  <input type="radio" name="Option2" value="4ListeningtoMusicoftheWorldGradesK12"/>4. Listening to Music of the World (Grades K-12) <br/>
                  <input type="radio" name="Option2"
                         value="520EasyHandsonScienceDemosthatYourStudentsCanPerformgradesK12"/>5. 20 Easy Hands-on Science Demos that Your Students Can Perform (grades K-12) <br/>
                  <input type="radio" name="Option2" value="6TeachingGlaciersUsingInquiryGradesK12"/>6. Teaching Glaciers Using Inquiry (Grades K-12) <br/>
                  <input type="radio" name="Option2"
                         value="7TheUNDObservatoryBringtheUniversetoNorthDakotaGradesK12"/>7. The UND Observatory: Bring the Universe to North Dakota (Grades K-12) <br/>
                  <input type="radio" name="Option2" value="8RockinOurBakkenGradesK6"/>8. Rockin' Our Bakken (Grades K-6) <br/>
                  <input type="radio" name="Option2"
                         value="9OlweusBullyingPreventionProgramOverviewGradesK12"/>9. Olweus Bullying Prevention Program Overview (Grades K-12) <br/>
                  <input type="radio" name="Option2"
                         value="10ClassroomActivitiestoEngageSecondaryStudentsGrades712"/>10. Classroom Activities to Engage Secondary Students (Grades 7-12) <br/>
                  <input type="radio" name="Option2"
                         value="11RediscoveringLostTreasuresUsingPrimarySourcesintheClassroomGradesK12"/>11. Rediscovering Lost Treasures: Using Primary Sources in the Classroom (Grades K-12) <br/>
                  <input type="radio" name="Option2" value="12AwarenessofSafetyofSocialMediaGrades712"/>12. Awareness of Safety of Social Media (Grades 7-12) <br/>
                  <input type="radio" name="Option2" value="13iPadApplicationsGradesK12"/>13. iPad Applications (Grades K-12) <br/>
                  <input type="radio" name="Option2"
                         value="14UsingiCivicstoComplementYourSocialStudiesCurriculumGrades68"/>14. Using iCivics to Complement Your Social Studies Curriculum (Grades 6-8) <br/>
                  <input type="radio" name="Option2"
                         value="15BuildingMathAmazonMissionGrades49Part1of2MUSTATTENDBOTHSESSIONS"/>15. Building Math: Amazon Mission (Grades 4-9) Part 1 of 2 (MUST ATTEND BOTH SESSIONS) <br/>
                  <input type="radio" name="Option2" value="16LetsGetGooglinGradesK12"/>16. Lets Get Googlin' (Grades K-12) <br/>
                  <input type="radio" name="Option2"
                         value="17DifferentiatedInstructionandUniversalDesignGrades812"/>17. Differentiated Instruction and Universal Design (Grades 8-12) <br/>
                  <input type="radio" name="Option2"
                         value="18RUREADYFindoutwhatsavailableforYOUinyourclassroomGrades912"/>18. RUREADY: Find out what's available for YOU in your classroom! (Grades 9-12) <br/>
                  <input type="radio" name="Option2"
                         value="19HELP911ResourcestohelpyoumovetowardMathCommonCoreStandardsGrades612&amp;Administrators"/>19. HELP... "911" Resources to help you move toward Math Common Core Standards (Grades 6-12 &amp; Administrators) <br/>
                  <input type="radio" name="Option2"
                         value="20LearningStylesAlignedwithPersonalityTypesGrades712"/>20. Learning Styles Aligned with Personality Types (Grades 7-12) <br/>
                  <input type="radio" name="Option2" value="22PlagiarisminTeachingandLearningGrades712"/>22. Plagiarism in Teaching and Learning (Grades 7-12) <br/>
                  <input type="radio" name="Option2"
                         value="23GetYourStudentsMovinThroughDanceGradesK12Part1of2MUSTATTENDBOTHSESSIONS"/>23. Get Your Students Movin' Through Dance (Grades K-12) Part 1 of 2 (MUST ATTEND BOTH SESSIONS) <br/>
                  <br/>
                  <label for="Lunch">11:15 - 12:15 Lunch </label>
                  <select name="Lunch[]">
                     <option value="PleaseSelect" checked="checked">(Please Select) 

					</option>
                     <option value="Yes">Yes 

					</option>
                     <option value="No">No 

					</option>
                  </select>
                  <br/>
                  <label for="Option3">12:15-1:30 </label>
                  <br/>
                  <input type="radio" name="Option3" value="4aListeningtoMusicoftheWorldGradeK12"/>4a. Listening to Music of the World (Grade K-12) <br/>
                  <input type="radio" name="Option3"
                         value="5a20EasyHandsonScienceDemosthatYourStudentsCanPerformGradeK12"/>5a. 20 Easy Hands-on Science Demos that Your Students Can Perform (Grade K-12) <br/>
                  <input type="radio" name="Option3" value="6aTeachingGlaciersUsingInquiryGradeK12"/>6a. Teaching Glaciers Using Inquiry (Grade K-12) <br/>
                  <input type="radio" name="Option3"
                         value="7aTheUNDObservatoryBringtheUniversetoNorthDakotaGradeK12"/>7a. The UND Observatory: Bring the Universe to North Dakota (Grade K-12) <br/>
                  <input type="radio" name="Option3" value="8aRockinOurBakkenGradeK6"/>8a. Rockin Our Bakken (Grade K-6) <br/>
                  <input type="radio" name="Option3"
                         value="9aOlweusBullyingPreventionProgramOverviewgradeK12"/>9a. Olweus Bullying Prevention Program Overview (grade K-12) <br/>
                  <input type="radio" name="Option3"
                         value="10aClassroomActivitiestoEngageSecondaryStudentsGrade713"/>10a. Classroom Activities to Engage Secondary Students (Grade 7-13) <br/>
                  <input type="radio" name="Option3"
                         value="11aRediscoveringLostTreasuresUsingPrimarySourcesintheClassroomGradeK12"/>11a. Rediscovering Lost Treasures: Using Primary Sources in the Classroom (Grade K-12) <br/>
                  <input type="radio" name="Option3" value="12aAwarenessandSafetyofSocialMediaGrade712"/>12a. Awareness and Safety of Social Media (Grade 7-12) <br/>
                  <input type="radio" name="Option3" value="13aiPadApplicationsGradeK12"/>13a. iPad Applications (Grade K-12) <br/>
                  <input type="radio" name="Option3"
                         value="14aUsingiCivicstoComplementYourSocialStudiesCurriculumGrade68"/>14a. Using iCivics to Complement Your Social Studies Curriculum (Grade 6-8) <br/>
                  <input type="radio" name="Option3"
                         value="15BuildingMathAmazonMissionGrade49Part2of2MUSTATTENDBOTHSESSIONS"/>15. Building Math: Amazon Mission (Grade 4-9) Part 2 of 2 (MUST ATTEND BOTH SESSIONS) <br/>
                  <input type="radio" name="Option3"
                         value="23GetYourStudentsMovinThroughDanceGradeK12Part2of2MUSTATTENDBOTHSESSIONS"/>23. Get Your Students Movin' Through Dance (Grade K-12) Part 2 of 2 (MUST ATTEND BOTH SESSIONS) <br/>
                  <input type="radio" name="Option3" value="24GISSoManyApplicationsGradeK12"/>24. GIS: So Many Applications (Grade K-12) <br/>
                  <input type="radio" name="Option3" value="26WhenKidsDontLearnRTIGradeK8"/>26. When Kids Don't Learn (RTI) (Grade K-8) <br/>
                  <input type="radio" name="Option3" value="27RUREADYExploreCAREERResourcesGrade58"/>27. RUREADY: Explore CAREER Resources! (Grade 5-8) <br/>
                  <input type="radio" name="Option3"
                         value="29HELP911ResourcestohelpyoumovetowardMathCommonCoreStandardsK5&amp;Administrators"/>29. HELP... "911" Resources to help you move toward Math Common Core Standards (K-5 &amp; Administrators) <br/>
                  <input type="radio" name="Option3"
                         value="30LearningStylesAlignedwithPersonalityTypesGradek6"/>30. Learning Styles Aligned with Personality Types (Grade k-6) <br/>
                  <input type="radio" name="Option3" value="31PlagiarisminTeachingandLearningGradeK6"/>31. Plagiarism in Teaching and Learning (Grade K-6) <br/>
                  <br/>
                  <p>Sessions 4a-14a are repeats of the morning sessions 4-14</p>
                  <label for="Option4">1:45 - 300 </label>
                  <br/>
                  <input type="checkbox" name="Option4[]" value="CLOSINGAWAKENTHEGENIUSforTeachers"
                         checked="checked"/>CLOSING: AWAKEN THE GENIUS for Teachers <br/>
                  <br/>
                  <input type="hidden" name="form_uuid" value="adfa5ab1-5b80-4c4c-92b5-3a012f55b23a"/>
                  <input type="submit" name="button" id="button" class="submit" value="Submit"/>
               </form>
<body>

</body>
</html>


Is This A Good Question/Topic? 0
  • +

Replies To: a bit of a snag

#2 cupidvogel  Icon User is offline

  • D.I.C Addict

Reputation: 31
  • View blog
  • Posts: 593
  • Joined: 25-November 10

Re: a bit of a snag

Posted 01 May 2012 - 11:17 AM

The problem lies in line 10. You are using change event, which fires when the textarea is updated and then loses focus, not when it is selected. What you want here is to hide the other textbox when this one is selected, so use focus:

School.change(function(){
#blah blah blah

Was This Post Helpful? 1
  • +
  • -

#3 robertpurpose  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 32
  • Joined: 28-January 09

Re: a bit of a snag

Posted 01 May 2012 - 11:24 AM

It does not even hide the textbox onload as i tried in to do in line 9. Am i missing something?
Was This Post Helpful? 0
  • +
  • -

#4 cupidvogel  Icon User is offline

  • D.I.C Addict

Reputation: 31
  • View blog
  • Posts: 593
  • Joined: 25-November 10

Re: a bit of a snag

Posted 01 May 2012 - 11:32 AM

Oh come on now, use quotes outside the selectors! And use # before a id and . before a class! Only element selectors like div, span, p should be left bare! It's not

$(ouforms);


but

$("#ouforms");

This post has been edited by cupidvogel: 01 May 2012 - 11:34 AM

Was This Post Helpful? 1
  • +
  • -

#5 robertpurpose  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 32
  • Joined: 28-January 09

Re: a bit of a snag

Posted 01 May 2012 - 11:39 AM

I made the recommended changes and i have the same result.

here is the updated jquery:

 <script type="text/javascript">
	 
$(document).ready(function(){
	var School = $("#ouforms.School.Other"); 
	var oInput = $("#ouforms.Other"); 
		oInput.hide();
School.focus(function(){
oInput.show();
}); 

});
</script>


Is there anything i am missing?
Was This Post Helpful? 0
  • +
  • -

#6 cupidvogel  Icon User is offline

  • D.I.C Addict

Reputation: 31
  • View blog
  • Posts: 593
  • Joined: 25-November 10

Re: a bit of a snag

Posted 01 May 2012 - 11:43 AM

Please explain your selectors. It's impossible to go through your 180 line long markup, especially when 99.99% of it is not pertinent to the problem.
Was This Post Helpful? 0
  • +
  • -

#7 robertpurpose  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 32
  • Joined: 28-January 09

Re: a bit of a snag

Posted 01 May 2012 - 11:46 AM

Well ouforms is the name of the form.
School is the name of the radiobutton(Select) group
Other in the declaration of the variable school is one of the buttons in the group
the Second instance of other is the textbox.


Sorry i forgot to explain what my selectors are initially.
Was This Post Helpful? 0
  • +
  • -

#8 cupidvogel  Icon User is offline

  • D.I.C Addict

Reputation: 31
  • View blog
  • Posts: 593
  • Joined: 25-November 10

Re: a bit of a snag

Posted 01 May 2012 - 11:49 AM

I really don't get it. Please provide a really succinct version of your form markup with only the necessary elements, and explain clearly what you need to do.
Was This Post Helpful? 0
  • +
  • -

#9 robertpurpose  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 32
  • Joined: 28-January 09

Re: a bit of a snag

Posted 01 May 2012 - 11:56 AM

Ok here is just the form with the one piece i want to work on.

All i want to do is to hide the textbox other when the form is loaded. If the user chooses Other from the dropdownlist the Other textbox should appear.


<form id="ouforms" name="ouforms" method="post" class="ldpforms">
                  <label for="FirstName">First Name: </label>
                  <input type="text" name="FirstName" value=""/>
                  <br/>
                  <label for="LastName">Last Name: </label>
                  <input type="text" name="LastName" value=""/>
                  <br/>
                  <label for="Email">Email </label>
                  <input type="text" name="Email" value=""/>
                  <br/>
                  <label for="School">School: </label>
                  <select name="School[]">
                     <option value="PleaseSelect" checked="checked">(Please Select) 

					</option>
                     <option value="BeachPublicSchools">Beach Public Schools 

					</option>
                     <option value="BelfieldPublicSchools">Belfield Public Schools 

					</option>
                     <option value="BillingsCountyPublicSchools">Billings County Public Schools 

					</option>
                     <option value="BowmanCountyPublicSchools">Bowman County Public Schools 

					</option>
                     <option value="DakotaHorizonYouthCenter">Dakota Horizon Youth Center 

					</option>
                     <option value="DickinsonAdultLearningCenter">Dickinson Adult Learning Center 

					</option>
                     <option value="DickinsonCatholicSchools">Dickinson Catholic Schools 

					</option>
                     <option value="DickinsonStateUniversityStudents">Dickinson State University Students 

					</option>
                     <option value="EarlyChildhoodLeft">Early Childhood Left 

					</option>
                     <option value="GlenUllinPublicSchools">Glen Ullin Public Schools 

					</option>
                     <option value="HallidayPublicSchools">Halliday Public Schools 

					</option>
                     <option value="HebronPublicSchools">Hebron Public Schools 

					</option>
                     <option value="HettingerPublicSchools">Hettinger Public Schools 

					</option>
                     <option value="HopeChristianAcademy">Hope Christian Academy 

					</option>
                     <option value="KilldeerPublicSchools">Killdeer Public Schools 

					</option>
                     <option value="LoneTreeGolvaPublicSchools">Lone Tree (Golva) Public Schools 

					</option>
                     <option value="MottRegentPublicSchools">Mott/Regent Public Schools 

					</option>
                     <option value="NewEnglandPublicSchools">New England Public Schools 

					</option>
                     <option value="RichardtonTaylorPublicSchools">Richardton  Taylor Public Schools 

					</option>
                     <option value="ScrantonPublicSchools">Scranton Public Schools 

					</option>
                     <option value="SouthHeartPublicSchools">SouthHeart Public Schools 

					</option>
                     <option value="SWCHS">SWCHS 

					</option>
                     <option value="TwinButtesPublicSchools">Twin Buttes Public Schools 

					</option>
                     <option value="WestRiverSpecialServices">West River Special Services 

					</option>
                     <option value="Other">Other 

					</option>
                  </select>
                  <br/>
                  <label for="Other">Other: </label>
                  <input type="text" name="Other" value=""/>                 
               </form>

Was This Post Helpful? 0
  • +
  • -

#10 cupidvogel  Icon User is offline

  • D.I.C Addict

Reputation: 31
  • View blog
  • Posts: 593
  • Joined: 25-November 10

Re: a bit of a snag

Posted 01 May 2012 - 12:04 PM

You may write something like this:

$(function() {
$("input[name=Other][type=text]").hide();
$("select[name=school[]]").change(function() {
if ($(this).val() == "Other") {
$("input[name=Other][type=text]").show();
}
});
});


Couple of issues: you are using text input without an id, then the only way of selecting it is through attribute selectors, as there are myriads of input elements in the page, not only that one. Not providing an id renders the label element useless, as its for attribute equals the id attribute of the input element it should tether to.

This post has been edited by cupidvogel: 01 May 2012 - 12:06 PM

Was This Post Helpful? 0
  • +
  • -

#11 robertpurpose  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 32
  • Joined: 28-January 09

Re: a bit of a snag

Posted 01 May 2012 - 12:13 PM

This is how my CMS pushes out the code so i have to work with it as is. Thanks for the help though ill get working on this
Was This Post Helpful? 0
  • +
  • -

#12 robertpurpose  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 32
  • Joined: 28-January 09

Re: a bit of a snag

Posted 01 May 2012 - 04:06 PM

It now hides the textbox successfull but when i choose a the other item it does not show it. Any suggestions?
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1