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 4 of 4

Thread: Dynamic form

  1. #1
    New Coder
    Join Date
    Aug 2010
    Posts
    49
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Dynamic form

    Hello

    I am looking to create a dynamic form for some input...

    I want to be able to enter a number and create an input form with that number of inputs...

    So if I enter 6 I would like a table generated with 6 inputs that when submitted will give me an array containing the values of those 6 inputs

    Help would be appreciated

    Thanks

  • #2
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    9
    Thanks
    0
    Thanked 1 Time in 1 Post
    is this waht yu need??

    Code:
    <label for="selector">Type Here:</label>
    <input id="selector" name="selector">
    <input type="button" value="Submit" onClick="arrayGenerator()">
    
    _______________________________________________________________
    
    function arrayGenerator(){
      var arrayM = new Array ("anything","you","want","here","want","to","do"),
          checker = /1|2|3|4|5|6/,
           getter =  document.getElementById("selector").value;
           checkerFinder = getter.search(checker);
      if(checkerFinder === 0){
       getter = getter -1;
       var setter = arrayM[getter];
       document.write(setter);
    } 
    else if(getter.search(/\D/) === 0 || getter === "" || null)
        {
    alert("Please" + " " + "type" + " " + "a" + " " + "number!!");
    }
    
    else {
        alert("please" + " " + "type" +" " + "less" +" " + "than" + " " +  "six"  + " " + "numbers.");
    }
    };

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,919
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    You might prefer something more flexible, but you could adapt this:-

    Code:
    <html>
    <head>
    
    <body onload = "showhide()">
    <form>
    
    <span id = "button" style="display:none;"><input type = "button" id = "but1" style=background-color:"#99FFFF" value = "Add A New Input Field" onclick = "addfield()"></span><br>
    
    <span id = "sp1" >Input 1 <input type = "text" name = "txt1" id = "txt1"></span><br>
    <span id = "sp2" >Input 2 <input type = "text" name = "txt2" id = "txt2"></span><br>
    <span id = "sp3" >Input 3 <input type = "text" name = "txt3" id = "txt3"></span><br>
    <span id = "sp4" >Input 4 <input type = "text" name = "txt4" id = "txt4"></span><br>
    <span id = "sp5" >Input 5 <input type = "text" name = "txt5" id = "txt5"></span><br>
    <span id = "sp6" >Input 6 <input type = "text" name = "txt6" id = "txt6"></span><br>
    <span id = "message" style = "color:red"></span><br><br>
    </form>
    More stuff here
    
    <script type = "text/javascript">
    
    var count = 1;
    var maxfields = 6;
    
    function showhide() {
    // reverse visibility for javascript-enabled browsers - others see six input fields and no button
    document.getElementById("button").style.display="block";
    for (var i=2; i<=maxfields;i++) {
    var val = "sp" + i;
    document.getElementById(val).style.visibility="hidden";
    }
    }
    
    function addfield() {
    count ++;
    if (count > maxfields) {
    document.getElementById("message").innerHTML = "Maximum of " + maxfields + " Input Fields";
    document.getElementById("but1").style.backgroundColor = "red";
    document.getElementById("but1").value = "Max number of fields is " + maxfields;
    setTimeout('document.getElementById("message").innerHTML = "" ', 3000);  // erase message after 3 seconds
    return false;
    }
    
    var val = "sp" + count;
    document.getElementById(val).style.visibility="visible";
    }
    
    </script>
    
    "If you are a widow, for whatever reason,....." - Ed Balls, former UK goverment member
    
    </body>
    
    </body>
    </html>

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,918
    Thanks
    56
    Thanked 546 Times in 543 Posts
    it seems to be fairly simple, except for the bit where you want the array of values on submission. Do you want to stay on the same page, and use those values, or do you want to submit that array to the server? Here's a start, anyway...
    Code:
    <html>
    <head>
    </head>
    <body>
    Enter number of inputs:<input type="text" id="num"><br>
    <input type = "button" value = "Show Fields" onclick = "showFields()"><br>
    <form id="theform">
    </form>
    <script type = "text/javascript">
    function showFields() {
    document.getElementById("theform").innerHTML="";
    var numFlds=Number(document.getElementById("num").value);
    if (!isNaN(numFlds)){
    for (var i=0; i<numFlds;i++) {
    var inp=document.createElement("input");
    inp.type="input";
    inp.name="inp"+i;
    document.getElementById("theform").appendChild(inp);
    document.getElementById("theform").appendChild(document.createElement("br"));
    		}
    	}
    var sub=document.createElement("input");
    sub.type="submit"
    document.getElementById("theform").appendChild(sub);
    }
    </script>
    </body>
    </html>


  •  

    Posting Permissions

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