jQuery Forum

How to create popup videos for page with multiple videos
[1Reply]
- 26-Apr-2016 08:28 PM
- Forum: Using jQuery
We have a page that contains multiple videos, but would like for the videos to appear in a popup (lightbox effect). Any recommendations on a good approach? Here's our page: http://bit.ly/26sGONw.

Using multiple checkboxes to show and hide (filter) content
[2Replies]
- 14-Mar-2016 01:32 PM
- Forum: Using jQuery
When a customer lands on our loans page, we want them to see all the loan companies. When they click any of the filtering checkboxes (1. Good credit, 2. Bad credit, 3. No credit check), we'd like to hide only those that don't apply. Then, when the uncheck everything, all companies appear again.
Let's say we have four companies (ACME, Bob's, Continental, and Dynamic).

Acme - Good credit
Bob's - Good credit, Bad credit
Continental - Good credit, Bad credit, No credit check
Dynamic - Good credit, Bad credit, No credit check

Here's what I have so far, but am stuck trying to get them all to display when checking any of the checkboxes, followed by unchecking all checkboxes. Thanks for any suggestions.

https://jsfiddle.net/Codewalker/6eqjdr3z/1/

HTML
2. <div class="tags">
3. <ul>
4. <li>
5. <label>
6. <input type="checkbox" rel="finGood" />Good Credit
7. </label>
8. </li>
9. <li>
10. <label>
11. <input type="checkbox" rel="finBad" />Bad Credit
12. </label>
13. </li>
14. <li>
15. <label>
16. <input type="checkbox" rel="finNo" />No Credit Check
17. </label>
18. </li>
19. </ul>
20. </div>
21. <ul class="results">
22. <li class="finGood">Acme</li>
23. <li class="finGood finBad">Bob's</li>
24. <li class="finGood finBad finNo">Continental</li>
25. <li class="finGood finBad finNo">Dynamic</li>
26. </ul>
JAVASCRIPT/JQUERY
2. $(document).ready(function () {
3. $('.results > li').show();
5. $('div.tags').find('input:checkbox').live('click', function () {
6. $('.results > li').hide();
7. $('div.tags').find('input:checked').each(function () {
8. $('.results > li.' + $(this).attr('rel')).show();
10. });
11. });
12. });

Sliding mobile side menu with submenu using Bootstrap
[6Replies]
- 07-Dec-2015 09:47 PM
- Forum: Using jQuery
We're looking to create functionality similar to the slideout seen here in mobile view ( http://bit.ly/1eSYmfE ), which includes submenus, and are looking for suggestions for an approach that would work with a Bootstrap site. We're looking at mmenu ( http://mmenu.frebsite.nl/ ) and it looks promising, so far. Are there any other solutions available that might be worth considering? Thanks.

Functionality dependent on jQuery not working, but jQuery is loading
[17Replies]
- 01-Dec-2015 02:02 PM
- Forum: Using jQuery
It appears that functionality dependent on jQuery has quit working on our home page but is working on the rest of the site. I've searched for hours and cannot figure out what's causing the light blue drop down arrows to disappear from the top blue menu, why the Cart icon button at the very top right of the site is not producing a drop down, and a few other things.

I viewed source and it appears all the links to resources are working. Here's a link to the site in staging where everything appears fine:

http://bit.ly/1Oumdk4

Here's a link to our main site where the problems exist.

http://bit.ly/1DVxfvh

Thanks for any help.

Adding lightbox feature to Elevate Zoom
[12Replies]
- 04-Aug-2015 12:21 PM
- Forum: Using jQuery Plugins
I'm trying to apply the "Gallery and Lightbox" example from this page (http://www.elevateweb.co.uk/image-zoom/examples) onto the page below, but with only one image instead of four images. The zoom works fine, but I cannot get it to open in a lightbox when the image is clicked.

http://bit.ly/1IKcinw

jQuery Zoom making image smaller instead of larger
[4Replies]
- 22-Jul-2015 01:47 AM
- Forum: Using jQuery Plugins
I'm using the jQuery Zoom plugin (http://www.jacklmoore.com/zoom/), but cannot figure out how to make the image larger on hover. I've added the reference to the jquery.zoom.js, grab.cur, grabbed.cur, and placed all the CSS in the head (for this test). The image instead appears smaller. I know there must be some setting that I'm not finding, but I can't find it. Here's the link to the test page:

http://bit.ly/1IjMCzF

Randomly redirecting user to one of two pages

[2Replies]

24-Jun-2015 04:27 PM
Forum: Using jQuery

Is there a simple jQuery way to redirect users to one of two pages? When a user clicks on a link for say foo.html, we want them to be redirected to either foo1.html or foo2.html.

I found this JavaScript solution online, which redirects to one of three pages, but am having trouble figuring out how to limit it to just two pages.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
(function(n){
 var pages = ['page1.htm', 'page2.htm', 'page3.htm'];
 n = n < 3? 0 : n < 8? 1 : 2;
 window.location.replace(pages[n]);
})(Math.floor(Math.random() * 10));
</script>
</head>
<body>

</body>
</html>

How to report that field was hidden for split test form submissions
[3Replies]
- 20-Jun-2015 04:48 PM
- Forum: Using jQuery
We've set up a form that will randomly displays a particular select box for the purposes of split testing. Some visitors will see the "Decision" field while others will not. This raises two questions:
1. For those instances when the field is not shown, how can we pass the value "field not shown" to the database?
2. For those instances when the field is shown, how can we make it a required field?
Here's our validation script with the "Decision" field added:
2. $("form").validate({
3. rules: {
4. firstName: {
5. required: true
6. },
7. lastName: {
8. required: true
9. },
10. emailAddress: {
11. required: true,
12. email: true
13. },
14. company: {
15. required: true
16. }
17. },
Here's the form:
2. <div class="form-group">
3. <label for="firstName" class="control-label" required="">Name</label>
4. <div class="row">
5. <div class="col-sm-6">
6. <input name="firstName" type="text" class="form-control" id="firstName" placeholder="First">
7. </div>
8. <div class="col-sm-6">
9. <input name="lastName" type="text" class="form-control success" id="lastName" placeholder="Last">
10. </div>
11. </div>
12. </div>
14. <div class="form-group">
15. <label for="emailAddress" class="control-label">Email</label>
16. <input name="emailAddress" type="text" class="form-control" id="emailAddress">
17. </div>
19. <div class="rform">
20. <div class="form-group">
21. <label class="control-label">Decision</label>
22. <select id="decision" name="decision" class="form-control input-sm">...
23. <option value="">--Please Select--</option>
24. <option value="Immediate">Now</option>
25. <option value="1-6 Months">Within 6 Months</option>
26. <option value="6-9 Months">After 6 Months</option>
27. </select>
28. </div>
29. </div>

Tracking pageviews with page that shows one of two divs
[4Replies]
- 19-Jun-2015 04:25 PM
- Forum: Using jQuery
We have an assortment of tracking on our pages, include WebTrends, and would like to figure out how to track pageviews for each. Currently, our pages have a section in the main body that displays a div with either a .new class or .existing class. First time visitors will see content in the div with the .new class. Previous visitors will see content in the other div with the .existing class.

So, right now, pageviews are tracked for both, but we'd like to identify pageviews for new and pageviews for existing. When the .new div is shown, the .existing div is hidden, and vice versa. I believe if we were to put the pageview tracking code in each div, that they'd both fire, doubling the reported pageviews. However, I'm not certain and wanted to ask the group.

Configuring form field to randomly appear for split test
[3Replies]
- 18-Jun-2015 12:27 AM
- Forum: Using jQuery
We have a form field that we'd like to appear approximately half the time, so we can conduct split testing. Here's the code we have in place, but the field always shows.
2. $(window).load(function(){
3. var random = Math.floor(Math.random() * $('.rform').length);
4. $('.rform').hide().eq(random).show();
5. });//]]>
We're placing the actual form field in a div with the class="rform" and another blank div with the class="rform". The thinking behind this is that either one or the other will appear. I know this is likely not the ideal way to accomplish this.
Here's the portion of the form with the aforementioned form fields:
2. <div class="rform">
3. <div class="form-group">
4. <label class="control-label">Test Question</label>
5. <select id="testQuestion" name="testQuestion" class="form-control input-sm">...
6. <option value="">--Please Select--</option>
7. <option value="One">One</option>
8. <option value="Two">Two</option>
9. <option value="Three">Three</option>
10. <option value="Four">Four</option>
11. <option value="Five">Five</option>
12. </select>
13. </div>
14. </div>
16. <div class="rform">Test</div>

Conditional textbox fields to appear based on drop-down menu selection
[2Replies]
- 11-Jun-2015 02:11 PM
- Forum: Using jQuery
We're trying to create functionality on this page (http://soc.att.com/1f5iJGd) that will hide/show textbox fields based on what is selected in the "Reason for Request" drop-down, but it's not working properly. Here's the jQuery code, so far:
2. <script type="text/javascript">
3. /* <![CDATA[ */
4. $(document).ready(function(){
6. $("#reasonRequest").change(function(){
7. if ($(this).val() == "Services Questions" ) {
8. $("#servicesQuestionsComments").slideDown("fast");
9. } else {
10. $("#servicesQuestionsComments").slideUp("fast");
11. }
12. });
14. $("#reasonRequest").change(function(){
15. if ($(this).val() == "Contract Billing Questions" ) {
16. $("#contractBillingQuestionsComments").slideDown("fast");
17. } else {
18. $("#contractBillingQuestionsComments").slideUp("fast");
19. }
20. });
22. $("#reasonRequest").change(function(){
23. if ($(this).val() == "Technical Support" ) {
24. $("#technicalSupportComments").slideDown("fast");
25. } else {
26. $("#technicalSupportComments").slideUp("fast");
27. }
28. });
30. $("#reasonRequest").change(function(){
31. if ($(this).val() == "Other" ) {
32. $("#otherComments").slideDown("fast");
33. } else {
34. $("#otherComments").slideUp("fast");
35. }
36. });
39. });
40. /* ]]> */
41. </script>
43. <style type="text/css">
44. #servicesQuestionsComments, #contractBillingQuestionsComments, #technicalSupportComments, #otherComments
45. {
46. display:none;
47. }
48. </style>
Here is the portion of the form with the form fields:
2. <div class="form-group">
3. <label class="control-label">Reason for Request</label>
4. <select id="reasonRequest" name="reasonRequest" class="form-control input-sm">...
5. <option value="">--Please Select--</option>
6. <option value="Services Questions">Services Questions</option>
7. <option value="Product Inquiry">Product Inquiry</option>
8. <option value="Contract Billing Questions">Contract/Billing Questions</option>
9. <option value="Technical Support">Technical Support</option>
10. <option value="Other">Other (Please Explain)</option>
11. </select>
12. </div>
14. <div class="form-group" id="servicesQuestionsComments">
15. <label class="control-label">Tell us about your services questions</label>
16. <textarea class="form-control" rows="5" id="servicesQuestions"></textarea>
17. </div>
19. <div class="form-group" id="contractBillingQuestionsComments">
20. <label class="control-label">Tell us about your contract/billing questions</label>
21. <textarea class="form-control" rows="5" id="contractBillingQuestions"></textarea>
22. </div>
24. <div class="form-group" id="technicalSupportComments">
25. <label class="control-label">Tell us about your technical support questions</label>
26. <textarea class="form-control" rows="5" id="technicalSupport"></textarea>
27. </div>
29. <div class="form-group" id="otherComments">
30. <label class="control-label">Please explain</label>
31. <textarea class="form-control" rows="5" id="other"></textarea>
32. </div>

Optimizing large images for mobile devices
[2Replies]
- 20-Apr-2015 06:50 PM
- Forum: Using jQuery
What are some of the best ways to display small image file sizes for mobile devices? Some of the image sizes that we're working with are 1900x650 for desktop. One idea is to upload a smaller version of the image and to write a jQuery script that displays the smaller image.
For example, for viewports less than 768 pixels, show slide_a_small.jpg. Does that sound like a reasonable solution?
2. <div class="item">
3. <img src="img/slide_a_large.jpg">
4. <div class="carousel-one-content">
5. <h3><a href="#">Slide One</a></h3>
6. </div>
7. </div>

Is there a jQuery way to pass a variable from one function to another function?

[4Replies]

20-Apr-2015 09:48 AM
Forum: Using jQuery

We have a function that reports to our analytics program, using a URL string (onClick), the "name" and "type" for a call-to-action button.

function tracker(assetName,assetType) {
  var fileref=document.createElement('script');
  fileref.setAttribute("type","text/javascript");
  fileref.setAttribute("src", "https://thisurl.html?assetName=" + assetName + "&assetType=" + assetType + "&custType=" + custType);
  if (typeof fileref!="undefined") {        
    document.getElementsByTagName("head")[0].appendChild(fileref);
  }

We now need to report the "id" of its div and include that in the URL string.

function cStatus(elem) {
    var els = [];
    while (elem) {
        els.unshift(elem);
        elem = elem.parentNode;
        if (elem.id == "new") {
            break;
        } else if (elem.id == "current") {
            break;
        }
    }
    custType = elem.id;
}

How can we run the second function, so that it produces a variable that's used in the first function. The goal is for the first function to write a URL like this:

https://thisurl.html?assetName=" + assetName + "&assetType=" + assetType + "&custType=" + custType);

Here's a link to the test page: http://soc.att.com/1yK5ovH

Why does changing to current version of jQuery cause loss of some styling?
[13Replies]
- 10-Apr-2015 09:15 AM
- Forum: Using jQuery Plugins
I set up a jQuery YouTube Popup Player Plugin ( http://lab.abhinayrathore.com/jquery_youtube ) on a test page and, in the process, changed the jQuery version to the most current. Somehow this has caused some styling to be lost, including the little down arrows in the top horizontal navigation and font-styling throughout. The plugin required the addition of a few extra files, but everything was fine until I changed the jQuery version.

Current live site with correct styling (older jQuery version):

http://bit.ly/1yi2EWj

Test page with plugin added and incorrect styling (current jQuery version):

http://bit.ly/1OhuPbM

Any suggestions on what I could check?

YouTube Video Modal not opening on same page - takes user to YouTube
[4Replies]
- 10-Apr-2015 03:18 AM
- Forum: Using jQuery Plugins
I'm using the jQuery YouTube Popup Player Plugin found on this page (http://lab.abhinayrathore.com/jquery_youtube/), however, I cannot get the video to open in a modal. I've been at it for hours, but the clicking the "Now through Monday" banner keeps taking the user to YouTube.

This is the page where I'm trying to implement it: http://bit.ly/1OhuPbM. The image under the slider should open the YouTube video in the same window, in a modal.

On the jQuery YouTube Popup Player Plugin page, I did the following:
- Added this:
  <script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" ></script>
- Added these:
  <link type = "text/css" href = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/redmond/jquery-ui.css" rel = "stylesheet" />
  <script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js" ></script>
- Added all of this:
  <script type="text/javascript" src="js/jquery.youtubepopup.min.js?"></script>
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> <script type="text/javascript">
  $(function () {
  $.fn.YouTubePopup.defaults.draggable = true;
  $("a.youtube").YouTubePopup({ autoplay: 1, showBorder: false });
  $("img.youtube").YouTubePopup({ idAttribute: 'id' });
  $("button.youtube").YouTubePopup({ idAttribute: 'id' });
  $("a.custom").YouTubePopup({ idAttribute: 'youtube' });
  $("a.hideTitle").YouTubePopup({ hideTitleBar: true });
  });
  </script>

How to insert div from external content
[28Replies]
- 20-Jan-2015 12:03 PM
- Forum: Using jQuery
We have content from an external file that needs to be added right after the opening body tag. How can we add that using just one entry in either the head or body? We're having to update around 250 pages to include this code and would like to be able to simply paste in the code in one place. We want to keep the content in an external file so that we can manage any future content changes in one place, so that all pages would then be updated automatically.

Dynamically changing checkbox label based on URL string
[21Replies]
- 21-Nov-2014 08:13 AM
- Forum: Using jQuery
We have a form that generates a checklist option based on the URL string, but need to figure out how to change the label for for this question. The reason for this is because a script dynamically changes the id based on the URL string:

For example...
inst=1 will generate a checkbox geared towards guitar players

inst=2 will generate a checkbox geared towards bass players

inst=3 will generate a checkbox geared towards keyboard players

There's already a script in place that creates a variable based on the URL string. This variable is called instrumentname.

Here's the HTML:

<input type="checkbox" id="instrument" name="instrument" value="on" class="check">

<label for="instrument"><span></span></label>

Here's an example of what is generated (view source) if inst=1 for guitar is in the URL string:

<input type="checkbox" id="instrument_guitar" name="instrument_guitar" value="on" class="check">

<label for="instrument"><span></span></label>

In this example, we need the highlighted label for changed to read "instrument_guitar". How can we target that using jQuery?

Dynamically displayed checkbox causes validation to break
[4Replies]
- 04-Nov-2014 12:37 AM
- Forum: Using jQuery Plugins
I have been at this for hours and cannot figure out why the form on the following page won't validate properly: http://soc.att.com/1tC6mWs

The "topic=3" URL parameter displays the first checkbox. When I remove it, the form validates properly. I'm using this method to require that at least one checkbox is checked:
2. jQuery.validator.addMethod("oneOptChecked", function() {
3. if (document.getElementById('firstbox').checked || document.getElementById('secondbox').checked || document.getElementById('thirdbox').checked || document.getElementById('fourthbox').checked) {
4. return true;
5. } else {
6. return false;
7. }
8. }, jQuery.validator.format("Please select one"));
When it works properly, if none of the checkboxes are checked and the submit button is clicked, the label text for each checkbox turns red.

Here's the validation code:
2. $("form").validate({
3. rules: {
4. ignore: ':hidden',
5. firstbox: {
6. oneOptChecked: true
7. },
8. secondbox: {
9. oneOptChecked: true
10. },
11. thirdbox: {
12. oneOptChecked: true
13. },
14. fourthbox: {
15. oneOptChecked: true
16. },
17. },
Here's the form itself:
2. <div class="form-group" id="checkboxes">
3. <div class="col-sm-12">
4. <li id="one"><div class="checkbox"><input type="checkbox" id="firstbox" name="nuture_topic" class="check"><label for="subscription"><span></span></label></div></li>
5. <li id="two"><div class="checkbox"><input type="checkbox" id="secondbox" name="secondbox" class="check"><label for="subscription">Second Box</label></div></li>
6. <li id="three"><div class="checkbox"><input type="checkbox" id="thirdbox" name="thirdbox" class="check"><label for="subscription">Third Box</label></div></li>
7. <li id="fourth"><div class="checkbox"><input type="checkbox" id="fourthbox" name="fourthbox" class="check"><label for="subscription">Fourth Box</label></div></li>
8. </div>
9. </div>

Validating two sets of checklists
[12Replies]
- 27-Oct-2014 02:49 PM
- Forum: Using jQuery
I have a form that contains two sets of checkboxes. The first set contains two subscription options and the second contains just a single checkbox for having read terms and conditions. How can I set up validation so that at least one (daily or weekly) is checked from the first group AND to check and make sure the user has checked the Terms and Conditions checkbox?
2. 
3. <div class="form-group">
4. <div class="col-sm-9" id="freq01">
5. <div class="checkbox"><input type='checkbox' name='daily' value='daily'><label for="subscription">Daily</label></div>
6. <div class="checkbox"><input type='checkbox' name='monthly' value='weekly'><label for="subscription">Weekly</label> </div>
7. </div>
8. </div>
9. 
10. <input type='checkbox' name='terms' value='terms' id="terms">

Validating radio buttons on multipage form
[11Replies]
- 23-Apr-2014 08:26 AM
- Forum: Using jQuery
We have a multipage set up here (http://soc.att.com/1eXHTps) that consists of three sections of questions. When the page loads, section one is visible, while section two and three are hidden. After answering the questions on section one, and before displaying section two, we'd like to set up validation to make sure each question is answered. Any suggestions on the best way to proceed?

Here's the code that displays the three sections:
2. <script>
3. $(function(){
5. //reset progress bar
6. $('#progress').css('width','0');
7. $('#progress_text').html('0% Complete');
9. $('#submit1').click(function(){
10. $('#first_step').slideUp();
11. $('#second_step').slideDown();
12. });
13. });
15. $(function(){
17. $('#submit2').click(function(){
18. $('#second_step').slideUp();
19. $('#third_step').slideDown();
20. });
21. });
23. $(function(){
24. $('#submit').click(function(){
25. });
26. });
27. </script>
Here's the basic layout of the first two questions in section one:
2. 
3. <input type="radio" name="q1" value="Answer one">Answer one
4. <input type="radio" name="q1" value="Answer two">Answer two
5. <input type="radio" name="q1" value="Answer three">Answer three
7. 
8. <input type="radio" name="q2" value="Answer one">Answer one
9. <input type="radio" name="q2" value="Answer two">Answer two
10. <input type="radio" name="q2" value="Answer three">Answer three

Positioning image on layer on top of another image using jQuery
[7Replies]
- 23-Apr-2014 12:19 AM
- Forum: Using jQuery
On this responsive page (http://soc.att.com/1eXHTps), I'm trying to position the logo so that it is always 25 pixels from the top and right of the main image (until getting to tablet and mobile viewports). It's positioning needs to be dependent on the positioning of the image beneath it.
I've tried CSS, but cannot get it to lock onto its background image. The CSS solutions I've tried position the logo relative to the window.

Is there a jQuery approach for this that would work? My apologies if this isn't appropriate for this forum.

Here's what I have for the logo image, which I know is not the correct solution:
2. .logo-over {
3. position: absolute; top: 30px; left: 820px; height:42px; width: 42px;
4. }
6. @media (max-width: 890px) {
7. .logo-over {
8. position: absolute; top: 25px; left: 620px;
9. }
10. @media (max-width: 790px) {
11. .logo-over {
12. position: absolute; top: 20px; left: 520px;
13. }
14. @media (max-width: 600px) {
15. .logo-over {
16. position: absolute; top: 20px; left: 420px;
17. }
1. <img class="img-responsive" style="-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))" src="http://images.response.att-mail.com/EloquaImages/clients/ATTABSDivision/{348886f1-9ec9-4289-8d3a-cc795cf4b4b2}_01splash-desktop_1024x436_032414.jpg">
  <img class="logo-over" src="http://images.response.att-mail.com/EloquaImages/clients/ATTABSDivision/{88c0dd82-9042-473b-86c3-9d951342ee83}_attlogo.png">

Cannot get multipage form to submit
[21Replies]
- 21-Apr-2014 05:09 PM
- Forum: Using jQuery
I've tried and tried and cannot get this multipage form to submit: http://soc.att.com/1eXHTps, but cannot make it work. I've got it set up with three sections, where only one section is shown at a time, while the other two are hidden.

Section one contains the first three questions and is visible when arriving on the page. Sections two and three are hidden. Once the submit button on section one is submitted, it slides up and section two becomes visible. This same process occurs when going from page two to page three.

Section three contains the submit button for the entire form, but for some reason, it won't submit. Any ideas?

How can I reverse remove() for form on a select list?
[13Replies]
- 18-Apr-2014 10:17 AM
- Forum: Using jQuery
I have a select list for "Country" that works like this. There's a "Country" select list. If "US" is selected, a "State" (name="state") select list appears underneath. If "Canada" is selected, a "Province" (name="province") select list appears underneath. If another country is selected, a text field (name="province") appears underneath.

I'm using "remove()" to remove the non-selected states or provinces, so that they don't pass any data at all. The problem is, when someone accidentally picks, say 'US', then selects 'Canada', since Canada was "removed" from the DOM, it leaves the province field in the database blank.

How can I reverse "remove()"?

Here's the jQuery:
2. $(document).ready(function(){
4. $("#country").change(function(){
5. if ($(this).val() == "US" ) {
6. $("#USStates").slideDown("fast");
7. } else {
8. $("#USStates").slideUp("fast");
9. $("#USStates").remove();
10. }
11. });
13. $("#country").change(function(){
14. if ($(this).val() == "Canada" ) {
15. $("#CanadianProvinces").slideDown("fast");
16. } else {
17. $("#CanadianProvinces").slideUp("fast");
18. $("#CanadianProvinces").remove();
19. }
20. });
22. $("#country").change(function(){
23. if (($(this).val() != "US" ) && ($(this).val() != "Canada" )) {
24. $("#OtherCountries").slideDown("fast");
25. } else {
26. $("#OtherCountries").slideUp("fast");
27. $("#OtherCountries").remove();
28. }
29. });
31. $("#country").change(function(){
32. if ($(this).val() == "--Please Select--" ) {
33. $("#USStates").slideUp("fast");
34. $("#CanadianProvinces").slideUp("fast");
35. $("#OtherCountries").slideUp("fast");
36. }
37. });
39. });
Here's the HTML:
2. <div class="form-group">
3. <div class="col-sm-12">
4. <label class="control-label" for="textinput">Country*</label>
5. <select id="country" name="country" class="form-control input-sm">...
6. <option value="">--Please Select--</option>
7. <option value="US">US</option>
8. <option value="Canada">Canada</option>
9. <option value="France">France</option>
10. <option value="Germany">Germany</option>
11. <option value="Spain">Spain</option>
12. <option value="United Kingdom">United Kingdom</option>
13. </select>
14. </div>
15. </div>
17. <div class="form-group hideStateProv" id="USStates">
18. <div class="col-sm-12">
19. <label class="control-label" for="textinput">State*</label>
20. <select id="state" name="state" class="form-control input-sm">...
21. <option>--Please Select--</option>
22. <option value="AL">Alabama</option>
23. <option value="AK">Alaska</option>
24. <option value="AR">Arkansas</option>
25. <option value="AZ">Arizona</option>
26. <option value="CA">California</option>
27. <option value="CO">Colorado</option>
28. <option value="CT">Connecticut</option>
29. <option value="DE">Delaware</option>
30. <option value="DC">District of Columbia</option>
31. <option value="FL">Florida</option>
32. <option value="GA">Georgia</option>
33. <option value="HI">Hawaii</option>
34. <option value="ID">Idaho</option>
35. <option value="IL">Illinois</option>
36. <option value="IN">Indiana</option>
37. <option value="IA">Iowa</option>
38. <option value="KS">Kansas</option>
39. <option value="KY">Kentucky</option>
40. <option value="LA">Louisiana</option>
41. <option value="ME">Maine</option>
42. <option value="MD">Maryland</option>
43. <option value="MA">Massachusetts</option>
44. <option value="MI">Michigan</option>
45. <option value="MN">Minnesota</option>
46. <option value="MS">Mississippi</option>
47. <option value="MO">Missouri</option>
48. <option value="MT">Montana</option>
49. <option value="NE">Nebraska</option>
50. <option value="NV">Nevada</option>
51. <option value="NH">New Hampshire</option>
52. <option value="NJ">New Jersey</option>
53. <option value="NM">New Mexico</option>
54. <option value="NY">New York</option>
55. <option value="NC">North Carolina</option>
56. <option value="ND">North Dakota</option>
57. <option value="OH">Ohio</option>
58. <option value="OK">Oklahoma</option>
59. <option value="OR">Oregon</option>
60. <option value="PA">Pennsylvania</option>
61. <option value="RI">Rhode Island</option>
62. <option value="SC">South Carolina</option>
63. <option value="SD">South Dakota</option>
64. <option value="TN">Tennessee</option>
65. <option value="TX">Texas</option>
66. <option value="UT">Utah</option>
67. <option value="VT">Vermont</option>
68. <option value="VA">Virginia</option>
69. <option value="WA">Washington</option>
70. <option value="WV">West Virgina</option>
71. <option value="WI">Wisconsin</option>
72. <option value="WY">Wyoming</option>
73. </select>
74. </div>
75. </div>
77. <div class="form-group hideStateProv" id="CanadianProvinces">
78. <div class="col-sm-12">
79. <label class="control-label" for="textinput">Province*</label>
80. <select id="province" name="province" class="form-control input-sm">...
81. <option value="">--Please Select--</option>
82. <option value="AL">Alberta</option>
83. <option value="BC">British Columbia</option>
84. <option value="MB">Manitoba</option>
85. <option value="NB">New Brunswick</option>
86. <option value="NL">Newfoundland and Labrador</option>
87. <option value="NS">Nova Scotia</option>
88. <option value="NT">Northwest Territories</option>
89. <option value="NU">Nunavut</option>
90. <option value="ON">Ontario</option>
91. <option value="PE">Prince Edward Island</option>
92. <option value="QC">Quebec</option>
93. <option value="SK">Saskatchewan</option>
94. <option value="YT">Yukon</option>
96. </select>
97. </div>
98. </div>
100. <div class="form-group hideStateProv" id="OtherCountries">
101. <div class="col-sm-12">
102. <label class="control-label" for="textinput">State/Province*</label>
103. <input name="province" type="text" class="form-control input-sm">
104. </div>
105. </div>

Show divs on second page based on checkbox selections from first page
[7Replies]
- 09-Apr-2014 09:18 AM
- Forum: Using jQuery
We have a form on page one that includes checkboxes for the following real estate topics:

Which areas are you interested in moving?
- Carpinteria
- Downtown
- Goleta
- Hope Ranch
- Isla Vista
- Mesa
- Mission Canyon
- Montecito
- Riviera
- Smarkand
- San Roque
- Santa Ynez Valley
- Summerland
- Upper East
- Waterfront
How can we set it up so that only the checked topics appear on the second page? I'm thinking of setting the second page to "show" all in case someone stumbles there without going through the form page.

How can I autopopulate a select list based on checkboxes checked in previous question?
[4Replies]
- 09-Apr-2014 12:22 AM
- Forum: Using jQuery
We have a form with two questions. The first question consists of checkboxes. The second is a select list. How can we set it up so that the select list is populated based on the checked checkboxes from the first question?

Response title

Attachments

jQuery Forum

Activity Trend