climberusa
12-20-2005, 05:47 PM
Hi this is my first post here. I am looking for some help with some dynamically added form fields generated by Dustin Diaz (http://www.dustindiaz.com/add-and-remove-html-elements-dynamically-with-javascript/). It works like a charm but I have the need to have dynamically added fields that are added or removed depending on a radio button selection. the form is here (http://www.ustravelak.com/soa/new/index.php) The code I am using is:
function addHotel() {
var ni = document.getElementById('hotel');
var numi3 = document.getElementById('hotelValue');
var num3 = (document.getElementById('hotelValue').value -1)+ 2;
numi3.value = num3;
var newdiv = document.createElement('div');
var divIdName = 'Hotel '+num3+'';
function hidedivs(x) {
if(x == 1)
{
y = 2;
}
else
{
y = 1;
}
document.getElementById(x).style.visibility = "hidden";
document.getElementById(y).style.visibility = "visible";
}
var hHtml = '<div class="add"><h3>Hotel '+num3+'</h3><div class="r"><label for="hotel_city'+num3+'">City: </label>'
+ '<input type="text" name="hotel_city'+num3+'" id="hotel_city'+num3+'" size="10" maxlength="30" title="Hotel City '+num3+'" '
+ 'onfocus="explain2(this, \'exp_hotel\')" onblur="hide(this, \'exp_hotel\')" /></div><div class="r"><label for="hotel_in'+num3+'">Check-in Date: </label>'
+ '<input type="text" name="hotel_in'+num3+'" id="hotel_in'+num3+'" size="10" maxlength="10" onfocus="explain2(this, \'exp_hotel\')" onblur="hide(this, \'exp_hotel\')" title="Hotel Check-in Date '+num3+'" />'
+ '<img src="../img/cal.png" class="cal" onclick="displayCalendar(document.forms[0].hotel_in'+num3+',\'mm/dd/yyyy\',this)" />'
+ '</div><div class="r"><label for="hotel_out'+num3+'">Check-out Date: </label>'
+ '<input type="text" name="hotel_out'+num3+'" id="hotel_out'+num3+'" size="10" maxlength="10" onfocus="explain2(this, \'exp_hotel\')" onblur="hide(this, \'exp_hotel\')" title="Hotel Check-out Date '+num3+'" />'
+ '<img src="../img/cal.png" class="cal" onclick="displayCalendar(document.forms[0].hotel_out'+num3+',\'mm/dd/yyyy\',this)" /></div>'
+ '<div class="r"><label for="pre_hotel'+num3+'">Preferred Hotel: </label><input type="text" name="pref_hotel'+num3+'" id="pref_hotel'+num3+'" size="10" maxlength="30" title="Preferred Hotel '+num3+'" '
+ 'onfocus="explain2(this, \'exp_hotel\')" onblur="hide(this, \'exp_hotel\')" /></div>'
+ '<div class="r"><label for="pre2_hotel'+num3+'">2nd Choice: </label><input type="text" name="pref2_hotel'+num3+'" id="pref_hotel'+num3+'" size="10" maxlength="30" title="2nd Hotel Choice" '
+ 'onfocus="explain2(this, \'exp_hotel\')" onblur="hide(this, \'exp_hotel\')" /></div>'
+ '<div class="r"><label for="pre3_hotel'+num3+'">3rd Choice: </label><input type="text" name="pref3_hotel'+num3+'" id="pref3_hotel'+num3+'" size="10" maxlength="30" title="3rd Hotel Choice" '
+ 'onfocus="explain2(this, \'exp_hotel\')" onblur="hide(this, \'exp_hotel\')" /></div>'
// dynamic radio buttons -->
+ '<label for="hotel_pay_method'+num3+'" style="float: left; padding: 2px 0px; margin: 2px 3px 1px 10px; width: 270px; border-bottom: 1px dotted #DADADA; text-align: left; color: #005A9C;">Method of holding and paying hotel:</label>'
+ '<div class="nr"><fieldset class="sub"><legend class="question">Select One</legend>'
+ '<label for="oc" class="labelRadio compact"><input type="radio" name="hotel_pay_method'+num3+'" id="oc" class="inputRadio" title="One Card" value="One Card" onclick="hidedivs(d1)" />One Card</label><br />'
+ '<label for="ht" class="labelRadio compact"><input type="radio" name="hotel_pay_method'+num3+'" id="ht" class="inputRadio" title="Hotel CTA #" value="Hotel CTA" onclick="hidedivs(d2)" />Hotel CTA #</label><br />'
+ '<label for="db" class="labelRadio compact"><input type="radio" name="hotel_pay_method'+num3+'" id="db" class="inputRadio" title="Direct Bill STO" value="Direct Bill" onclick="hidedivs(d3)" />Direct Bill STO</label></fieldset></div>'
+ '<div id="d1" style="visibility: hidden;"><div class="r"><label for="one_card'+num3+'">Card Number:</label><input type="text" name="one_card'+num3+'" id="one_card'+num3+'" size="10" maxlength="6" title="One Card for Hotel '+num3+'" /></div>'
+ '<div class="r"><label for="one_card_exp'+num3+'">Card Number:</label><input type="text" name="one_card_exp'+num3+'" id="one_card_exp'+num3+'" size="10" maxlength="4" title="One Card Expiration Date for Hotel '+num3+'" /></div></div>';
+ '<div id="d2" style="visibility: hidden;"><div class="r"><label for="hotel_card'+num3+'">Card Number:</label><input type="text" name="hotel_card'+num3+'" id="hotel_card'+num3+'" size="10" maxlength="6" title="Hotel CTA # for Hotel '+num3+'" /></div>'
+ '<div class="r"><label for="hotel_card_exp'+num3+'">Card Number:</label><input type="text" name="hotel_card_exp'+num3+'" id="hotel_card_exp'+num3+'" size="10" maxlength="4" title="Hotel CTA Expiration Date for Hotel '+num3+'" /></div></div>';
+ '<div id="d3" style="visibility: hidden;"><div class="r"><label for="db_address'+num3+'">Card Number:</label><textarea name="db_address'+num3+'" id="db_address'+num3+'" rows="5" cols="10" title="Direct Bill Address for Hotel '+num3+'" /></div></div>';
newdiv.setAttribute('id',divIdName);
newdiv.innerHTML = ' '+hHtml+' <a href=\'#o_'+num3+'\' class="minus" onclick=\'removeElement3(\"'+divIdName+'\");\' title=\'Remove '+divIdName+'\'>Remove '+divIdName+'</a></div>';
ni.appendChild(newdiv);
}
function removeElement3(divNum3) {
var d3 = document.getElementById('hotel');
var olddiv3 = document.getElementById(divNum3);
d3.removeChild(olddiv3);
}
This isn't working and I just get "hidedivs is not defined" error messages. I'm at a dead end and could really use some help as I'm a newbie javascript user.
Thanks for your help!
function addHotel() {
var ni = document.getElementById('hotel');
var numi3 = document.getElementById('hotelValue');
var num3 = (document.getElementById('hotelValue').value -1)+ 2;
numi3.value = num3;
var newdiv = document.createElement('div');
var divIdName = 'Hotel '+num3+'';
function hidedivs(x) {
if(x == 1)
{
y = 2;
}
else
{
y = 1;
}
document.getElementById(x).style.visibility = "hidden";
document.getElementById(y).style.visibility = "visible";
}
var hHtml = '<div class="add"><h3>Hotel '+num3+'</h3><div class="r"><label for="hotel_city'+num3+'">City: </label>'
+ '<input type="text" name="hotel_city'+num3+'" id="hotel_city'+num3+'" size="10" maxlength="30" title="Hotel City '+num3+'" '
+ 'onfocus="explain2(this, \'exp_hotel\')" onblur="hide(this, \'exp_hotel\')" /></div><div class="r"><label for="hotel_in'+num3+'">Check-in Date: </label>'
+ '<input type="text" name="hotel_in'+num3+'" id="hotel_in'+num3+'" size="10" maxlength="10" onfocus="explain2(this, \'exp_hotel\')" onblur="hide(this, \'exp_hotel\')" title="Hotel Check-in Date '+num3+'" />'
+ '<img src="../img/cal.png" class="cal" onclick="displayCalendar(document.forms[0].hotel_in'+num3+',\'mm/dd/yyyy\',this)" />'
+ '</div><div class="r"><label for="hotel_out'+num3+'">Check-out Date: </label>'
+ '<input type="text" name="hotel_out'+num3+'" id="hotel_out'+num3+'" size="10" maxlength="10" onfocus="explain2(this, \'exp_hotel\')" onblur="hide(this, \'exp_hotel\')" title="Hotel Check-out Date '+num3+'" />'
+ '<img src="../img/cal.png" class="cal" onclick="displayCalendar(document.forms[0].hotel_out'+num3+',\'mm/dd/yyyy\',this)" /></div>'
+ '<div class="r"><label for="pre_hotel'+num3+'">Preferred Hotel: </label><input type="text" name="pref_hotel'+num3+'" id="pref_hotel'+num3+'" size="10" maxlength="30" title="Preferred Hotel '+num3+'" '
+ 'onfocus="explain2(this, \'exp_hotel\')" onblur="hide(this, \'exp_hotel\')" /></div>'
+ '<div class="r"><label for="pre2_hotel'+num3+'">2nd Choice: </label><input type="text" name="pref2_hotel'+num3+'" id="pref_hotel'+num3+'" size="10" maxlength="30" title="2nd Hotel Choice" '
+ 'onfocus="explain2(this, \'exp_hotel\')" onblur="hide(this, \'exp_hotel\')" /></div>'
+ '<div class="r"><label for="pre3_hotel'+num3+'">3rd Choice: </label><input type="text" name="pref3_hotel'+num3+'" id="pref3_hotel'+num3+'" size="10" maxlength="30" title="3rd Hotel Choice" '
+ 'onfocus="explain2(this, \'exp_hotel\')" onblur="hide(this, \'exp_hotel\')" /></div>'
// dynamic radio buttons -->
+ '<label for="hotel_pay_method'+num3+'" style="float: left; padding: 2px 0px; margin: 2px 3px 1px 10px; width: 270px; border-bottom: 1px dotted #DADADA; text-align: left; color: #005A9C;">Method of holding and paying hotel:</label>'
+ '<div class="nr"><fieldset class="sub"><legend class="question">Select One</legend>'
+ '<label for="oc" class="labelRadio compact"><input type="radio" name="hotel_pay_method'+num3+'" id="oc" class="inputRadio" title="One Card" value="One Card" onclick="hidedivs(d1)" />One Card</label><br />'
+ '<label for="ht" class="labelRadio compact"><input type="radio" name="hotel_pay_method'+num3+'" id="ht" class="inputRadio" title="Hotel CTA #" value="Hotel CTA" onclick="hidedivs(d2)" />Hotel CTA #</label><br />'
+ '<label for="db" class="labelRadio compact"><input type="radio" name="hotel_pay_method'+num3+'" id="db" class="inputRadio" title="Direct Bill STO" value="Direct Bill" onclick="hidedivs(d3)" />Direct Bill STO</label></fieldset></div>'
+ '<div id="d1" style="visibility: hidden;"><div class="r"><label for="one_card'+num3+'">Card Number:</label><input type="text" name="one_card'+num3+'" id="one_card'+num3+'" size="10" maxlength="6" title="One Card for Hotel '+num3+'" /></div>'
+ '<div class="r"><label for="one_card_exp'+num3+'">Card Number:</label><input type="text" name="one_card_exp'+num3+'" id="one_card_exp'+num3+'" size="10" maxlength="4" title="One Card Expiration Date for Hotel '+num3+'" /></div></div>';
+ '<div id="d2" style="visibility: hidden;"><div class="r"><label for="hotel_card'+num3+'">Card Number:</label><input type="text" name="hotel_card'+num3+'" id="hotel_card'+num3+'" size="10" maxlength="6" title="Hotel CTA # for Hotel '+num3+'" /></div>'
+ '<div class="r"><label for="hotel_card_exp'+num3+'">Card Number:</label><input type="text" name="hotel_card_exp'+num3+'" id="hotel_card_exp'+num3+'" size="10" maxlength="4" title="Hotel CTA Expiration Date for Hotel '+num3+'" /></div></div>';
+ '<div id="d3" style="visibility: hidden;"><div class="r"><label for="db_address'+num3+'">Card Number:</label><textarea name="db_address'+num3+'" id="db_address'+num3+'" rows="5" cols="10" title="Direct Bill Address for Hotel '+num3+'" /></div></div>';
newdiv.setAttribute('id',divIdName);
newdiv.innerHTML = ' '+hHtml+' <a href=\'#o_'+num3+'\' class="minus" onclick=\'removeElement3(\"'+divIdName+'\");\' title=\'Remove '+divIdName+'\'>Remove '+divIdName+'</a></div>';
ni.appendChild(newdiv);
}
function removeElement3(divNum3) {
var d3 = document.getElementById('hotel');
var olddiv3 = document.getElementById(divNum3);
d3.removeChild(olddiv3);
}
This isn't working and I just get "hidedivs is not defined" error messages. I'm at a dead end and could really use some help as I'm a newbie javascript user.
Thanks for your help!