View Full Version : Dynamically added elements question!

12-20-2005, 06: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;
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.innerHTML = ' '+hHtml+' <a href=\'#o_'+num3+'\' class="minus" onclick=\'removeElement3(\"'+divIdName+'\");\' title=\'Remove '+divIdName+'\'>Remove '+divIdName+'</a></div>';

function removeElement3(divNum3) {
var d3 = document.getElementById('hotel');
var olddiv3 = document.getElementById(divNum3);

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!

12-20-2005, 07:40 PM
Not sure, but at first glance, it may be a problem with having a spacing in your id:

var divIdName = 'Hotel '+num3+'';

Trying changing it to:

var divIdName = 'Hotel'+num3; // No space...

EDIT: I also noticed that hidedivs() is located inside the addHotel() function... Try moving it out (the way that removeElement3() is outside of the last '}' of addHotel().

12-20-2005, 08:57 PM
I just re-read what I posted and I think I should restate the problem. The script script works fine to add the divs. the problem is I need to be able show/hide some fomr fields within the dynamically added divs based on radio buttons that are also inside the script within this script. I've tried several different methods and always get the error "function not deifined". Basically I don't understand why none of the show/hide functions I've tried work within this code, but work otherwise. I realize it has something to do with the fact the id's are added dynamically but I don't know what to do about it.