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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Dynamically added elements question!

    Hi this is my first post here. I am looking for some help with some dynamically added form fields generated by Dustin Diaz. 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 The code I am using is:
    PHP Code:
    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(
    == 1)
    {
    2;
    }
    else
    {
    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!

  • #2
    Regular Coder
    Join Date
    Sep 2005
    Posts
    535
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Not sure, but at first glance, it may be a problem with having a spacing in your id:
    Code:
      var divIdName = 'Hotel '+num3+'';
    Trying changing it to:
    Code:
      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().
    Last edited by Pyth007; 12-20-2005 at 06:46 PM.
    If you want answers, write a smart question.

    Yes, someone probably does know how...

    Oh, and if you want to learn, STFW!

  • #3
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

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