Use checkbox rather than radio buttons on form

I have a form that uses Jquery to show or hide input boxes depending on what the user has checked.

The form currently uses radio button to show the extra input but I want to use a single checkbox. So, if you select the checkbox the other inputs display.

I have attached the Jquery code.

Anyone know how to edit that code so this can happen?


form formopen
$(document).ready(function(){
	$("#parent2").css("display","none");
            
    $(".aboveage2").click(function(){
    	if ($('input[name=X1include]:checked').val() == "No" ) {
        	$("#parent2").slideDown("fast"); //Slide Down Effect
            $.cookie('showTop', 'expanded');              
        } else {
            $("#parent2").slideUp("fast");	//Slide Up Effect
            $.cookie('showTop', 'collapsed');
        }
     });  
     
      var showTop = $.cookie('showTop');  
     
      if (showTop == 'expanded') {  
		
      	$("#parent2").show("fast");  
        $('input[name=X1include]:checked');  

      } else {
      	$("#parent2").hide("fast");
        $('input[name=X1include]:checked');
      }  
          
});

/*With jQuery Cookie*/
$(document).ready(function(){
	$("#parent3").css("display","none");
            
    $(".aboveage3").click(function(){
    	if ($('input[name=age3]:checked').val() == "No" ) {
        	$("#parent3").slideDown("fast"); //Slide Down Effect
            $.cookie('showTop', 'expanded');              
        } else {
            $("#parent3").slideUp("fast");	//Slide Up Effect
            $.cookie('showTop', 'collapsed');
        }
     });  
     
      var showTop = $.cookie('showTop');  
     
      if (showTop == 'expanded') {  
		
      	$("#parent3").show("fast");  
        $('input[name=age3]:checked');  

      } else {
      	$("#parent3").hide("fast");
        $('input[name=age3]:checked');
      }  
          
});

Open in new window

BrighteyesDesignAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

StingRaYCommented:
Try this:

// Javascript part
$(document).ready(function(){
	$('input.addguest').live('click', function() {
		if ($(this).is(':checked')) {
			html = $('div.guestbox:first-child').clone();
			$("input:checkbox", html).removeAttr("checked");
			$(this).parent().after(html);
		} else {
			$(this).parent().nextAll('.guestbox').remove();
		}
	});
});

Open in new window


<!-- HTML part -->
<form action="" method="get">
<div class="guestbox">
First Name: <input type="text" name="guestname[]" value=""><br>
Book another guest: <input type="checkbox" class="addguest">
</div>
<input type="submit" value="BOOK NOW">
</form>

Open in new window


Since I use the guestname input box as "guestname[]", it always send guest name to backend script as an array.
0
BrighteyesDesignAuthor Commented:
Hi StingRay,

Thanks for that

Shall I replace all of the current Javascript with your code?

Also, with the form, the name needs o be itemname one as that's a requirement for the cart i'm using .

Fyi: I have a link here that show how it is at the moment...http://www.anjoman.co.uk/formbin2.php
0
StingRaYCommented:
Try this:

// JS part
$(document).ready(function(){
	$('ol:not(:first)').hide();
	$('input:checkbox.addguest').live('click', function() {
		if ($(this).is(':checked')) {
			$(this).parents('ol').next('ol').slideDown('fast').find('input:checkbox').removeAttr('checked');
		} else {
			$(this).parents('ol').nextAll('ol').slideUp("fast");
		}
	});
});

Open in new window


<!-- HTML part -->
<form action="http://www.romancart.com/cart.asp" method="post">
	<input type="hidden" name="storeid" value="57502" />
	<input type="hidden" name="itemname" value="monthly meeting title"/>
	<input type="hidden" name="itemname2" value="12/12/12"/>
	<input type="hidden" name="itemname3" value="12:30"/>
	<input type="hidden" name="itemname4" value="London"/>
	<input type="hidden" name="dependentmaster" value="yes">
	<input type="hidden" name="price" value="10.00" />
	<input type="hidden" name="X1price" value="20.00">
	<input type="hidden" name="X1storeid" value="57502">
	<input type="hidden" name="X1quantity" value="1">
	<ol class="formset">
		<li>
			<label for="X1itemname">First Name: </label>
			<input type="text" id="X1itemname" value="" name="X1itemname"/></li>
		<li></li>
		<li>
			<label for="age2">Book another guest</label> 
			<input type="checkbox" name="X1include" value="Yes" class="addguest aboveage2"></li>
	</ol>
	<ol id="parent2" class="formset">
		<li><strong>Guest 1</strong></li>
		<li><label for="pname2">Name: </label>
		<input type="text" id="pname2" value="" name="pname2"/></li>
	   <li>
		 <label for="age3">Book another guest</label> 
		<input type="checkbox" name="age3" value="Yes" class="addguest aboveage3"></li>
	</ol>
	<ol id="parent3" class="formset">
		<li><strong>Parent/Guardian Information:</strong></li>
		<li>
			<label for="pname3">Name: </label>
			<input type="text" id="pname3" value="" name="pname3"/></li>
		</li>
		<li></li>
	</ol>
	<input type="image" src="img/button-book.gif" border="0" name="submit3" />
</form>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

StingRaYCommented:
I have modded my code with your code. Hope this works for you.
0
BrighteyesDesignAuthor Commented:
Hi Stingray,

Thanks for that, all info stays visible though?

http://www.anjoman.co.uk/formexpertbin.html

0
chaitu chaituCommented:

its not able to find below js file.check the path whether this js file exists or not.

js/jquery.cookie.js
0
BrighteyesDesignAuthor Commented:
Hi there,

That's now linked ok, still the same?
0
chaitu chaituCommented:
still am getting same error.first check out the js errors.
0
BrighteyesDesignAuthor Commented:
mmm strange Firefox and Safari find it ok?

I've linked it as a full url path to make sure

http://www.anjoman.co.uk/js/jquery.cookie.js
Screen-shot-2011-12-16-at-11.29..png
Screen-shot-2011-12-16-at-11.28..png
0
StingRaYCommented:
Include this line:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

Open in new window


before:

<script type="text/javascript" src="http://www.anjoman.co.uk/js/jquery.cookie.js"></script>

Open in new window

0
BrighteyesDesignAuthor Commented:
Brilliant, it working perfectly now!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.