1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Javascript Dynamic Input Box Generatation

Discussion in 'JavaScript' started by drewbe121212, Aug 7, 2006.

  1. #1
    Hello all, I have been trying to get something to work, but have come not anywhere near what I want to do. Basically, I have a list of input boxes, i need to push a button to "add another input box". I have tried several different ways, and failed each time. I have decided that innerHTML is not a feasible solution for this particular case.
    SEMrush
    The biggest problem I have is that when a user clicks the "add more fields" button, I can add a count++ to the current amount of inputs, or add another field to an array. The only problem is how to recycle through this without re-writing everything over again? If anyone has any good tutorials that they know of to look at, please feel more then free to let me know!

    Thanks,
    Drew
     
    drewbe121212, Aug 7, 2006 IP
    SEMrush
  2. giraph

    giraph Guest

    Messages:
    484
    Likes Received:
    27
    Best Answers:
    0
    Trophy Points:
    0
    #2
    
    <script type="text/javascript">
    function addInput()
    {
    	var x = document.getElementById("inputs");
    	x.innerHTML += "<input type=\"text\" />";
    }
    </script>
    
    
    <input type="button" onmousedown="addInput();" />
    <div id="inputs"></div>
    
    Code (markup):
     
    giraph, Aug 8, 2006 IP
  3. mjamesb

    mjamesb Member

    Messages:
    88
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    48
    #3
    The most reliable way to do this without using .innerHTML is to use the DOM. If you do a search on "document.createElement" you should find many tutorials. It is a bit more coding than using .innerHTML but you can do a lot using the DOM instead.
     
    mjamesb, Aug 13, 2006 IP
  4. drewbe121212

    drewbe121212 Well-Known Member

    Messages:
    733
    Likes Received:
    20
    Best Answers:
    0
    Trophy Points:
    125
    #4
    I actually had alot of problems figuring this out. I now went a server side solution / javascript. While the input boxes are determined server side (page reload), the preview of what everything is going to look like is done through javascript. Thank you for the heads up on the DOM as well. I cannot wait until innerHTML = standard :)
     
    drewbe121212, Aug 14, 2006 IP
  5. saneinsight

    saneinsight Guest

    Messages:
    159
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    hi giraph, thanks for the great example code. how do I actually reference the new input fields? Usually I'd get the param within a perl cgi script.

    thanks
    Sane
     
    saneinsight, Mar 4, 2007 IP
  6. love_bug

    love_bug Member

    Messages:
    46
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    41
    #6
    hi nice script, I am looking for exactly the same solution...
    if you could show how to increase field name also.. such as "field1", field2, field3
    it would be greatly appreciated.
    thanks..
     
    love_bug, Oct 7, 2008 IP
  7. Logic Ali

    Logic Ali Active Member

    Messages:
    170
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    58
    #7
    Try FieldClone which has name incrementation technology.
     
    Logic Ali, Oct 9, 2008 IP
  8. jgarrison

    jgarrison Peon

    Messages:
    66
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Please see your other posting about this. http://forums.digitalpoint.com/showthread.php?t=1057277
    Let me know if that's what you're looking for.
    Thanks.
    -Jim
     
    jgarrison, Oct 13, 2008 IP