Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    May 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Add text Field When Radio Button Is Selected

    Hi All,
    Can you help me with this problem.
    I am looking at adding a field when yes is selected at part 2 for the company name.
    I want the button "Add Details" to add the field "Company Details"

    I'm not sure how to do it, html wise or in the javascript.

    This is the html it has to be wrapped in:
    Code:
    <legend>Step 2</legend>
     
     <p>
     Would you like your company name on your badges?
     </p>
     
     
     <input type="radio" id="company_name_toggle_on" name="company_name_toggle_group"></input>
     <label for="company_name_toggle_on">Yes</label>
     &emsp;
     <input type="radio" id="company_name_toggle_off" name="company_name_toggle_group"></input>
     <label for="company_name_toggle_off">No</label>
     
     <div id="company_name_wrap">
     <label for="company_name">
     Company Name:
     </label>
     <input type="text" id="company_name"></input></div>
     
     
     <div id="company_detail_wrap">
     <input type="button" id="company_detail" value="Add Details"></input><br/>
     <label for="company_detail">
     Company Contact:
     </label> </div>
     
     <input type="text" id="company_detail"></input>

    Thisis the part 2 javascript it needs to work with:

    Code:
    function stepTwoTest() {
     if (($.stepTwoComplete_one == "complete") && ($.stepTwoComplete_two == "complete")) {
     $("#step_2")
     .animate({
     paddingBottom: "120px"
     })
     .css({
     "background-image": "url(images/check.png)",
     "background-position": "bottom center",
     "background-repeat": "no-repeat"
     });
     $("#step_3").css({
     opacity: 1.0
     });
     $("#step_3 legend").css({
     opacity: 1.0 // For dumb Internet Explorer
     });
     }
     };
     
    $("#step_2 input[name=company_name_toggle_group]").click(function(){
     $.stepTwoComplete_one = "complete";
     if ($("#company_name_toggle_on:checked").val() == 'on') {
     $("#company_name_wrap").slideDown();
     } else {
     $("#company_name_wrap").slideUp();
     };
     stepTwoTest();
     });
     
    $("#step_2 input[name=special_accommodations_toggle]").click(function(){
     $.stepTwoComplete_two = "complete";
     if ($("#special_accommodations_toggle_on:checked").val() == 'on') {
     $("#special_accommodations_wrap").slideDown();
     } else {
     $("#special_accommodations_wrap").slideUp();
     };
     stepTwoTest();
     });
    Thanks for any help. Much appreciated
    Attached Files Attached Files

  • #2
    Regular Coder
    Join Date
    Apr 2012
    Posts
    165
    Thanks
    1
    Thanked 39 Times in 39 Posts
    You could try this...

    Change the HTML part of your code to:
    Code:
    <div id="company_detail_wrap"  style="display:none">
    <input type="button" id="company_detail"  value="Add Details"></input><br/>
    <label for="company_detail">Company Contact:</label>
    <input type="text" id="company_detail"></input>
    </div>
    and then change the JS portion of the script to:
    Code:
    $("#step_2 input[name=company_name_toggle_group]").click(function(){
    $.stepTwoComplete_one = "complete"; 
    if ($("#company_name_toggle_on:checked").val() == 'on') {
    		
           var e = document.getElementById('company_detail_wrap');
           if(e.style.display == 'none'){
              e.style.display = 'block';
          }
     else {
              e.style.display = 'none';
        }
    };
    stepTwoTest();
    });
    Let me know if this doesn't work for you. I wasn't able to view the actual registration page because it included external stylesheets, etc. that I didn't have access to. The codes above might need a few tweaks, but it should do what you need.

  • Users who have thanked EpicWebDesign for this post:

    claireb (05-28-2012)

  • #3
    New to the CF scene
    Join Date
    May 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    HI EpicWebDesign,

    That code doesn't work, but I have managed to get it to work with:

    html:
    Code:
    <div id="company_name_wrap">
    <input type="button" id="company_name_wrap" name="company_detail_toggle_group" value="Add Details"></input> <div id="company_detail_wrap">
    <label for="company_detail"> Company Contact: </label>
    <input type="text" id="company_detail"></input>
    </div>
    and js:
    Code:
    $("#step_2 input[name=company_detail_toggle_group]").click(function(){
    $.stepTwoComplete_one = "complete"; 
    	if ($("#company_name_toggle_on:checked").val() == 'on') {
    	$("#company_detail_wrap").slideDown();
    	} else {
    	$("#company_detail_wrap").slideUp();
    	};
    	stepTwoTest();
    	});
    Thanks for you help though

  • #4
    Regular Coder
    Join Date
    Apr 2012
    Posts
    165
    Thanks
    1
    Thanked 39 Times in 39 Posts
    No problem. Glad you were able to figure it out!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •