Problems with multiple uses of jquery slideToggle()

JavaScript
1

I’m working on a form for a quilting site and just started implementing a field-hiding jQuery script to get unnecessary fields out of the way.

When the user checks the Custom “quilt_style” radio button, it drops a custom field with slideToggle(). Lower on the page, the radio button set “cust_batting” toggles two different fields based on a yes or no choice.

Here’s the dilema…if the user goes to the “cust_batting” question first, everything works fine. If the user uses the “quilt_style” field first, the “cust_batting” field only slides up, but wont come down again. Here’s the jQuery script:

$(document).ready(function() {
	// Hide fields that aren't needed yet
	$('#cust_notes').hide();
	$('#batt_type').hide();
	$('#batt_purch').hide();
	
	// On selecting the relevant radio/check, toggle additional fields
	$('input[name="quilt_style"]').change(function() {
		if ($('input[@name="quilt_style"]:checked').val() == 'Custom') 
		{
			$('#cust_notes').slideToggle().addClass('tip');
		}
		else if ($('input[@name="quilt_style"]:checked').val() != 'Custom') 
		{
			$('#cust_notes').slideUp();
		}
	});
	
	$('input[name="cust_batting"]').change(function() {
		if ($('input[@name="cust_batting"]:checked').val() == 'yes') 
		{
			$('#batt_type').slideDown().addClass('tip');
			$('#batt_purch').slideUp();
		}
		else if ($('input[@name="cust_batting"]:checked').val() == 'no') 
		{
			$('#batt_purch').slideDown().addClass('tip');
			$('#batt_type').slideUp();
		}
		else {
			$('#batt_type').slideUp();
			$('#batt_purch').slideUp();			
		}
	});
});

And here are the relevant fields in the form, stripped of php goodies:

The upper fields “quilt_style”


<div class="quilt_select">
    <label for="call_me">
        <input type="radio" name="quilt_style" value="Contact customer" id="call_me">Contact me to discuss
    </label>		
    <label for="ete_panto">
        <input type="radio" name="quilt_style" value="E2E Pantograph" id="ete_panto">Edge to Edge Pantograph (starts at $.02/sq inch)
    </label>
    <label for="panto_cust_border">
        <input type="radio" name="quilt_style" value="Panto Custom Border" id="panto_cust_border">Pantograph &amp; Custom Borders (starts at $.02/sq in. + $10 per border)
    </label>
    <label for="custom">
        <input type="radio" name="quilt_style" value="Custom" id="custom">Custom (starts at $.025 - $.035/sq in.)
    </label>
</div>

<div id="cust_notes">
    <label for="custom_notes">Notes for your custom quilt: </label>
    <textarea name="custom_notes" id="custom_notes" rows="6" cols="40"></textarea>
</div>

The lower fields “cust_batting”:


<h5>Are you supplying your own batting?</h5>
<div class="radio">
    <label for="cust_batting-yes">
        <input type="radio" name="cust_batting" value="yes" id="cust_batting-yes">Yes
    </label>
    <label for="cust_batting-no">
        <input type="radio" name="cust_batting" value="no" id="cust_batting-no">No
    </label>
</div>

<div id="batt_type">
    <label for="type_of_batting">Type of batting (* required if supplying your own)</label>
    <input type="text" name="type_of_batting" id="type_of_batting">
</div>

<div id="batt_purch" class="radio">
    <h5>Would you like to purchase our batting? (Hobbs Heirloom at only $8/yard!)</h5>
    <label for="batting_purch-yes">
        <input type="radio" name="batting_purch" value="yes" id="batting-purch-yes">Yes
    </label>
    <label for="batting_purch-no">
        <input type="radio" name="batting_purch" value="no" id="batting_purch-no">No
    </label>
</div>

You can go here for a working model, but the way it’s written, you’ll have to fill in some dummy info on the 1st page. The problem is on the 2nd page, but you can’t get there without filling in the 1st one.

2

Do you find that a test page that only has the “quilt_style” and “cust_batting” fields experiences the same trouble?

If so, you know that the script needs to be worked on, and it’s a lot easier to test the changes to the script from the test page.

If not, you know that there’s something else about the page that’s causing the issue, so you can then gradually rebuild the test page up to the full page, to work out what’s causing the issue.

3

Thanks for the suggestion…that’s what I ended up doing. And you know what? I figured it out.

In my selector for the lower fields, I was using: ‘input[@name=“cust_batting”]:checked’. All I had to do was remove the @ sign and the issue disappeared.

4

Well done! That’s what we like to see here.

For future reference, the ‘@’ in [@attr] was deprecated in jQuery 1.2 and removed from jQuery 1.3

5

Suppose we have to disable a form’s elements.

STEP 1:

Disabling all elements including text, hidden, radio, checkbox, submit, textarea, select of form

$(‘form :input’).attr(‘disabled’,‘disabled’);

Here i am selecting form by tag ‘<form>’ without using any id or class of form.

STEP 2:

Disabling only input fields including text, hidden, radio, checkbox, submit of form

$(‘form input’).attr(‘disabled’,‘disabled’);

STEP 3:

Disabling some particular inputs like only text fields or check boxes etc.

$(‘form input[type=text]’).attr(‘disabled’,‘disabled’);
$(‘form input[type=text], input[type=checkbox]’).attr(‘disabled’,‘disabled’);

6

Thanks! Gotta get used to the CSS3 selectors…and I guess some of these are unique to jQuery. What is :eq anyways?

7

jQuery has a very good documentation section for their API.

In the selectors section, you will find the [url=“http://api.jquery.com/eq-selector/”]:eq selector where it says in part:

The index-related selectors (:eq(), :lt(), :gt(), :even, :odd) filter the set of elements that have matched the expressions that precede them. They narrow the set down based on the order of the elements within this matched set.

There’s more information about it too at the :eq selector page.