Help with Sliding Form Jquery Technique

[jmizi]

Javascript newbie here,
I’m creating a form based on chris’s advanced form. The effect i want to capture is the slide up and slide down of an area of a form. But i’m not using the jquery transform plugin.

Code:

$(document).ready(function(){

$(“#reservations-form”).validate();

$(“.yay, .oops”).hide();
$(“.yay, .oops”).fadeIn(2000);

$(“#departureArea”).hide();

$(‘.jqTransformCheckbox’).click(function(){
if ($(‘#departure:checked’).val() == ‘on’) {
$(“#departureArea”).slideDown();
} else {
$(“#departureArea”).slideUp();
}
});

$(“#arrivalArea”).hide();

$(‘.jqTransformCheckbox’).click(function(){
if ($(‘#arrival:checked’).val() == ‘on’) {
$(“#arrivalArea”).slideDown();
} else {
$(“#arrivalArea”).slideUp();
}
});
});

The #arrivalArea and #departureArea hide as expected. But they do not slide down on click. I figure it must be do to the fact that its targeting .jqTransformCheckbox. But again i’m not using the transfrom plugin. So i guess my question is what do i need to rename the ‘.jqTransformCheckbox’ so that it targets the desired checkboxes? ….. i’ve tried using the input name, id, and class…. Any help would be mucho appreciated…. Thanks!

[cybershot]

what is with this line

if ($(‘#departure:checked’).val() == ‘on’)

I understand what you are trying to do, what I don’t get is the value ‘on’. Usually something like this is either a ‘1’ for on or ‘true’ Is on defined in your script? or is this a function I have never seen before?

[jmizi]

I’m not sure… like i said i’m a newbie with js. This is based on chris’s advanced website change form…. except without the jqtrasform. Chris’s form uses ‘on’, but i’m not sure if its targeting something in jqtransform that i’m not using. The html that i’m trying to target looks like this

Code:

[jmizi]

Ok… so i tried using ‘1’ and ‘true’ instead of ‘on’, but to no avail. I have a feeling that its the ‘.jqTransform’ that i have to change, but i tried to replace it with the checkbox input class, name, and div, but none of them worked. Again, I’m new to js and jquery so im pretty much trial and error at this point. I just need to know how i would target a html form checkbox input in this situation with js.

Please let me know if i need to clarify anything. U peeps are my last hope.

[howard001]

I’m a newbie with js. But i think that these few tips given bellow will help you

1- Add javascript inclusion in the header section of your web page

//required
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.jqtransform.min.js"></script>

2- Write your form

<form class="jqtransform">
<div class="rowElem">
<label for="name">Name: </label>
<input type="text" name="name" />
</div>
<div class="rowElem"><input type="submit" value="send" /><div>
</form>

3- Finally use the plugin

After it, select the forms and call the jqTransform plugin. See some examples:

<script type="text/javascript">
$(function() {
//find all form with class jqtransform and apply the plugin
$("form.jqtransform").jqTransform();
});
</script>

[jmizi]

Thanks for the help… but I’m afraid thats not really what i was getting at.

I am not using the jqtransform and i dont want to use it… but i want the same slideUp slideDown effect that chris uses in his form.

Like his form, i want a certain section of the form to slide down when a certain checkbox is checked. So in my js file I hide the the div that i want to slide up and down so that initially, the div does not show. This much is working.

Code:

$(“#departureArea”).hide();

Now the next thing is getting it so that when this checkbox in my html code is checked…

Code:

Airport Departure

… then this div in my html will slide down from its hidden state…

Code:

Flight #

I think i’ve narrowed the proble to this js

Code:

$(‘ ‘).click(function(){
if ($(‘#departure:checked’).val() == ‘on’) {
$(“#departureArea”).slideDown();
} else {
$(“#departureArea”).slideUp();

}
});

I just need to know what to target on the checkbox… do i target the name, class, or id,…… or do i need to create an actual style in my css for it target it…..

I hope i dont sound stupid but i’m just trying to be as clear as possible… and i’ve double checked that im all linked up to my js files and the jquery file and all that other little stuff…

[Author]

Posts