add to <input> to <form> with javascript?

Discussion in 'Javascript' started by Ben, May 9, 2005.

  1. Ben

    Ben Guest

    Here's my form:
    <form name="aForm" method='post'>
    <input type=file name=file1 onkeypress='KeyPress()'><br>
    <a
    id='attachMoreLink'
    href='javascript:AddFileInput()">Attach More Files
    </a>
    <input type=submit value='Done'>
    </form>


    Question:
    How can I add an <input> field to a <form> when I click on "Attach More Files"?

    so, after first button click, the form becomes...
    <form name="aForm" method='post'>
    <input type=file name=file1 onkeypress='KeyPress()'><br>
    <input type=file name=file2 onkeypress='KeyPress()'><br>
    <a
    id='attachMoreLink'
    href='javascript:AddFileInput()">Attach More Files
    </a>
    <input type=submit value='Done'>
    </form>

    and so on.... until I click "DONE"

    thanks....

    Ben
    Ben, May 9, 2005
    #1
    1. Advertising

  2. Ben

    DJ Craig Guest

    DJ Craig, May 9, 2005
    #2
    1. Advertising

  3. Ben

    RobB Guest

    Ben wrote:
    > Here's my form:
    > <form name="aForm" method='post'>
    > <input type=file name=file1 onkeypress='KeyPress()'><br>
    > <a
    > id='attachMoreLink'
    > href='javascript:AddFileInput()">Attach More Files
    > </a>
    > <input type=submit value='Done'>
    > </form>
    >
    >
    > Question:
    > How can I add an <input> field to a <form> when I click on "Attach

    More Files"?
    >
    > so, after first button click, the form becomes...
    > <form name="aForm" method='post'>
    > <input type=file name=file1 onkeypress='KeyPress()'><br>
    > <input type=file name=file2 onkeypress='KeyPress()'><br>
    > <a
    > id='attachMoreLink'
    > href='javascript:AddFileInput()">Attach More Files
    > </a>
    > <input type=submit value='Done'>
    > </form>
    >
    > and so on.... until I click "DONE"
    >
    > thanks....
    >
    > Ben


    There have been some support issues with Node.cloneNode() in the past
    but they may have been resolved...if so:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <style type="text/css">

    div.container {
    width: 222px;
    font: normal 12px arial;
    text-align: center;
    padding: 4px;
    margin: 2px;
    border: 1px #000 solid;
    background: #ccc;
    }
    div.container input {
    margin-left: 2px;
    }
    input.button {
    font: normal 11px arial;
    margin: 2px 0;
    }

    </style>
    <script type="text/javascript">

    var filenum = 1;

    function addfile(els)
    {
    var container,
    lastipt = els['file' + filenum],
    newipt = lastipt.cloneNode(true);
    newipt.name = 'file' + ++filenum;
    if (container = document.getElementById('upfiles'))
    {
    var span = document.createElement('span');
    span.appendChild(document.createTextNode(filenum));
    container.appendChild(document.createElement('br'));
    container.appendChild(span);
    container.appendChild(newipt);
    els[newipt.name] = newipt; //IE, yech...
    }
    }

    function delfile()
    {
    if (filenum > 1)
    {
    var container, i = 3;
    if (container = document.getElementById('upfiles'))
    {
    while (i--)
    {
    container.removeChild(container.lastChild);
    }
    --filenum;
    }
    }
    }

    function ipt_onkeypress()
    {
    window.status = 'foo';
    }

    </script>
    </head>
    <body>
    <form name="aForm" method="post" action="">
    <div id="upfiles"
    class="container">1<input
    class="button"
    type="file"
    name="file1"
    onkeypress="ipt_onkeypress()"></div>
    <div class="container"
    style="background:#aaa;">
    <input
    class="button"
    type="button"
    value="Attach More Files"
    onclick="return addfile(this.form.elements)">
    <input
    class="button"
    type="button"
    value="Delete Last"
    onclick="return delfile()">
    </div>
    <div class="container"
    style="background:#888;">
    <input
    class="button"
    type="submit"
    value="Done">
    </div>
    </form>
    </body>
    </html>

    ie5/mac may require adding that event handler 'manually'.
    RobB, May 9, 2005
    #3
  4. Ben

    RobB Guest

    RobB wrote:
    > Ben wrote:
    > > Here's my form:
    > > <form name="aForm" method='post'>
    > > <input type=file name=file1 onkeypress='KeyPress()'><br>
    > > <a
    > > id='attachMoreLink'
    > > href='javascript:AddFileInput()">Attach More Files
    > > </a>
    > > <input type=submit value='Done'>
    > > </form>
    > >
    > >
    > > Question:
    > > How can I add an <input> field to a <form> when I click on "Attach

    > More Files"?
    > >
    > > so, after first button click, the form becomes...
    > > <form name="aForm" method='post'>
    > > <input type=file name=file1 onkeypress='KeyPress()'><br>
    > > <input type=file name=file2 onkeypress='KeyPress()'><br>
    > > <a
    > > id='attachMoreLink'
    > > href='javascript:AddFileInput()">Attach More Files
    > > </a>
    > > <input type=submit value='Done'>
    > > </form>
    > >
    > > and so on.... until I click "DONE"
    > >
    > > thanks....
    > >
    > > Ben


    (snip)

    On 2nd thought...#:=(

    Think a list might be more appropriate.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <style type="text/css">

    body {
    margin: 40px;
    background: #eee;
    }
    form {
    width: 250px;
    }
    div.container {
    width: 98%;
    font: normal 12px arial;
    text-align: center;
    padding: 1px;
    margin: 2px 0;
    border: 1px #000 solid;
    }
    div.container ol {
    margin: 0;
    }
    div.container input {
    font: normal 11px arial;
    margin: 3px 0;
    }

    </style>
    <!--[if IE]>
    <style type="text/css">
    div.container li {
    margin-left: 22px;
    }
    </style>
    <![endif]-->
    <script type="text/javascript">

    var filenum = 1;

    function addfile(els)
    {
    var container, template;
    if ((container = document.getElementById('uplist'))
    && (template = container.getElementsByTagName('li')[0]))
    {
    var newitem = template.cloneNode(true);
    var newipt = newitem.getElementsByTagName('input')[0];
    newipt.name = 'file' + ++filenum;
    container.appendChild(newitem);
    els[newipt.name] = newipt;
    }
    }

    function remfile()
    {
    if (filenum > 1)
    {
    var container;
    if (container = document.getElementById('uplist'))
    {
    container.removeChild(container.lastChild);
    --filenum;
    }
    }
    }

    function ipt_onkeypress()
    {
    window.status = 'foo';
    }

    function init()
    {
    if (document.getElementById
    && document.createElement)
    {
    var badd, bdel;
    if ((badd = document.getElementById('addf'))
    && (bdel = document.getElementById('delf')))
    {
    badd.disabled = false;
    badd.onclick = function()
    {
    return addfile(this.form.elements);
    }
    bdel.disabled = false;
    bdel.onclick = function()
    {
    return remfile();
    }
    }
    }
    }

    window.onload = init;

    </script>
    </head>
    <body>
    <form name="aForm" method="post" action="">
    <div class="container" style="background:#ccc;">
    <ol id="uplist">
    <li>
    <input
    type="file"
    name="file1"
    onkeypress="ipt_onkeypress()">
    </li>
    </ol>
    <div class="container" style="background:#aaa;">
    <input
    id="addf"
    type="button"
    style="width:110px;"
    value="Attach More Files"
    disabled="disabled">
    <input
    id="delf"
    type="button"
    style="width:110px;"
    value="Remove Last File"
    disabled="disabled">
    </div>
    <div class="container" style="background:#888;">
    <input
    type="submit"
    value="Done">
    </div>
    </div>
    </form>
    </body>
    </html>
    RobB, May 10, 2005
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Guy
    Replies:
    5
    Views:
    2,820
    brucie
    Dec 13, 2003
  2. Matt MC
    Replies:
    2
    Views:
    506
    Thomas 'PointedEars' Lahn
    May 25, 2005
  3. yawnmoth
    Replies:
    2
    Views:
    451
    Peter Flynn
    Aug 18, 2008
  4. fochie
    Replies:
    0
    Views:
    311
    fochie
    Feb 1, 2005
  5. Replies:
    23
    Views:
    499
    Tim Streater
    Dec 18, 2013
Loading...

Share This Page