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

    Dynamic form building

    Rather new at this, have just been doing backend dev and winform apps but thought Ill try my hand at abit frontend web stuff.

    What Im trying to do is build a family tree webapp. Everything has been going good but now im stuck.

    Basically you come in and create a new branch inside the branch I want to be able to create a list of members and for each member create a list of children.

    Really stuck and dont know what to do anymore.

  • #2
    New to the CF scene
    Join Date
    Jan 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    What i currently have is an textbox for the name of the family member and another textbox that i use to build a list of siblings. Now I need a way of repeating this for every family member and his siblings.

    Here is my code sofar

    Code:
    <form id="frm" action="" method="post">
    <input type="text" name="member" id="member" />
      Sibilings:<br/>
      <select name="sel_list" id="sel_list" size="2" onchange="adOption.selOpt(this.value, 'optval')"></select><br/><br/>
      Add an option: <input type="text" name="optval" id="optval" /><br /><br/>
      <input type="button" id="addopt" name="addopt" value="Add Option" onclick="adOption.addOption('sel_list', 'optval');" /> &nbsp;
      <input type="button" id="del_opt" name="del_opt" value="Delete Option" onclick="adOption.delOption('sel_list', 'optval');" />
    </form>
    <script type="text/javascript"><!--
    // Free JavaScript course - coursesweb.net
    
    // create the object with methods to add and delete <option></option>
    var adOption = new Object();
      // method that check if the option is already in list
      // receives the id of the <select></select> list, and box with the value for <option>
      adOption.checkList = function(list, optval) {
        var re = 0;           // variable that will be returned
    
        // get the <option> elements
        var opts = document.getElementById(list).getElementsByTagName('option');
    
        // if the option exists, sets re=1
        for(var i=0; i<opts.length; i++) {
          if(opts[i].value == document.getElementById(optval).value) {
            re = 1;
            break;
          }
        }
    
        return re;         // return the value of re
       };
    
       // method that adds <option>
      adOption.addOption = function(list, optval) {
        // gets the value for <option>
        var opt_val = document.getElementById(optval).value;
    
        // check if the user adds a value
        if(opt_val.length > 0) {
          // check if the value not exists (when checkList() returns 0)
          if(this.checkList(list, optval) == 0) {
            // define the <option> element and adds it into the list
            var myoption = document.createElement('option');
            myoption.value = opt_val;
            myoption.innerHTML = opt_val;
            document.getElementById(list).insertBefore(myoption, document.getElementById(list).firstChild);
    
            document.getElementById(optval).value = '';           // delete the value added in text box
          }
          else alert('The value "'+opt_val+'" already added');
        }
        else alert('Add a value for option');
      };
    
      // method that delete the <option>
      adOption.delOption = function(list, optval) {
        // gets the value of <option> that must be deleted
        var opt_val = document.getElementById(optval).value;
    
        // check if the value exists (when checkList() returns 1)
        if(this.checkList(list, optval) == 1) {
           // gets the <option> elements in the <select> list
          var opts = document.getElementById(list).getElementsByTagName('option');
    
          // traverse the array with <option> elements, delete the option with the value passed in "optval"
          for(var i=0; i<opts.length; i++) {
            if(opts[i].value == opt_val) {
              document.getElementById(list).removeChild(opts[i]);
              break;
            }
          }
        }
        else alert('The value "'+opt_val+'" not exist');
      }
    
      // method that adds the selected <option> in text box
      adOption.selOpt = function(opt, txtbox) { document.getElementById(txtbox).value = opt; }
    --></script>


  •  

    Posting Permissions

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