...

View Full Version : Add text Field When Radio Button Is Selected



claireb
05-27-2012, 09:09 AM
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:


<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:


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

EpicWebDesign
05-27-2012, 08:49 PM
You could try this...

Change the HTML part of your code to:


<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:


$("#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.

claireb
05-28-2012, 03:30 AM
HI EpicWebDesign,

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

html:

<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:

$("#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 :)

EpicWebDesign
05-28-2012, 03:57 PM
No problem. Glad you were able to figure it out!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum