javascript: adding form elements

Discussion in 'Javascript' started by domas, Dec 14, 2005.

  1. domas

    domas Guest

    Hi,
    I can't get my semi-dynamic form to work. Maybe you could help.

    I've got a simple form with a select box. And a button that, when
    clicked, creates another copy if the select box and places it in a
    specified div.

    <select name="tst[]" id="tst">
    <option value=1>1</option>
    <option value=2>6</option>
    </select>
    <input type="button" value="Add"
    onclick="createNew(document.getElementById('tst'),
    document.getElementById('pasl'));">

    here's the script:
    function createNew(sel, div) {
    spNew = document.createElement("span");
    selNew = sel.cloneNode(true);
    spNew.appendChild(selNew);

    spNew.innerHTML = spNew.innerHTML + "<input type=\"button\"
    value=\"Drop\"
    onclick=\"alert(\'ok\');\" id=\"btn\" >";

    sp = div.appendChild(spNew);
    };

    It works ok in IE, but under firefox, the value of the new select is
    not submitted. The div that I add the select to is a child of the form,
    so this should work, right? What could I have missed?

    Another question would be: what is the correct way to specify the event
    for a dinamically created button?

    Thanks in advance,
    Domas
     
    domas, Dec 14, 2005
    #1
    1. Advertising

  2. domas

    RobG Guest

    domas wrote:
    > Hi,
    > I can't get my semi-dynamic form to work. Maybe you could help.
    >
    > I've got a simple form with a select box. And a button that, when
    > clicked, creates another copy if the select box and places it in a
    > specified div.
    >
    > <select name="tst[]" id="tst">
    > <option value=1>1</option>
    > <option value=2>6</option>
    > </select>
    > <input type="button" value="Add"
    > onclick="createNew(document.getElementById('tst'),
    > document.getElementById('pasl'));">
    >
    > here's the script:
    > function createNew(sel, div) {
    > spNew = document.createElement("span");


    You should test for support for such features before using them. There
    does not seem to be any reason to make spNew (or selNew) global, so keep
    them local with the 'var' keyword:

    var spNew = document.createElement("span");
    var seNew = ...


    > selNew = sel.cloneNode(true);


    You now have two selects with the same ID, which will create invalid
    markup as soon as you add the second one to the document. The identical
    names may be an issue too (or not).

    selNew.id = 'someNewId';


    > spNew.appendChild(selNew);
    >
    > spNew.innerHTML = spNew.innerHTML + "<input type=\"button\"
    > value=\"Drop\"
    > onclick=\"alert(\'ok\');\" id=\"btn\" >";


    Not a good idea to mix non-standard innerHTML and DOM, particularly when
    adding onclick attributes:

    var inpNew = document.createElement('input');
    inpNew.type = 'button';
    inp.onclick = function (){alert('OK')}
    ip.id = 'btn';
    spNew.appendChild(inp);


    >
    > sp = div.appendChild(spNew);


    Here you create another global variable 'sp' that is a reference to the
    newly added node (i.e. spNew). If it isn't used for anything, then:

    div.appendChild(spNew);


    will do the job.


    > };
    >
    > It works ok in IE, but under firefox, the value of the new select is
    > not submitted. The div that I add the select to is a child of the form,
    > so this should work, right? What could I have missed?
    >
    > Another question would be: what is the correct way to specify the event
    > for a dinamically created button?


    I guess you mean add an event - you can use the method above, or use
    addEventListener/attachEvent, the above is simpler and usually sufficient.

    You can also do something like:


    function createNew(...) {

    ...
    inp.onclick = sayHi;
    ...

    }

    function sayHi(){
    alert('OK');
    }



    --
    Rob
     
    RobG, Dec 14, 2005
    #2
    1. Advertising

  3. domas

    domas Guest

    thanks. But it didn't help. I just tried a small experiment: I added a
    simple text input box to the div and its value does not get submitted
    either.
    It seems that I need to somhow attach the dynamically created input to
    the form.

    Thanks,
    Domas
     
    domas, Dec 14, 2005
    #3
  4. domas

    RobG Guest

    domas wrote:
    > thanks. But it didn't help. I just tried a small experiment: I added a
    > simple text input box to the div and its value does not get submitted
    > either.
    > It seems that I need to somhow attach the dynamically created input to
    > the form.
    >


    Here's a quick 'n dirty example, it will only add one input properly but
    shows the basics.

    You need to specify unique IDs for each new element, plus the reference
    to the node to clone is by name so you need to create new names too
    (note that if you have multiple controls with the same name,
    form.controlName will return a collection not a single element):


    <script type="text/javascript">

    function addInput(el){
    if (!document.createElement) {
    alert('Sorry, my script doesn\'t support creating new elements'
    + ' for your browser');
    return;
    }

    var d = el.parentNode; // d is now a reference to 'divA'
    var newInput = el.cloneNode(false);
    newInput.value = '';

    // Make sure unique IDs are specified for all elements
    newInput.id = 'textB';
    newInput.name = 'textB';
    d.appendChild(newInput);

    var newBut = document.createElement('input');
    newBut.type = 'button';
    newBut.value = 'Say blah';
    newBut.onclick = function(){alert('blah')}
    d.appendChild(newBut);
    }

    </script>

    <form action="">
    <div id="divA">
    <input type="text" name="textA" id="textA">
    <input type="button" value="Add input"
    onclick="addInput(this.form.textA)"><br>
    </div>
    <div>
    <input type="submit">
    </div>
    </form>



    --
    Rob
     
    RobG, Dec 14, 2005
    #4
  5. RobG wrote:

    > domas wrote:
    >> spNew.appendChild(selNew);
    >>
    >> spNew.innerHTML = spNew.innerHTML + "<input type=\"button\"
    >> value=\"Drop\"
    >> onclick=\"alert(\'ok\');\" id=\"btn\" >";

    >
    > Not a good idea to mix non-standard innerHTML and DOM, particularly when
    > adding onclick attributes:
    >
    > var inpNew = document.createElement('input');
    > inpNew.type = 'button';
    > inp.onclick = function (){alert('OK')}
    > ip.id = 'btn';
    > spNew.appendChild(inp);


    While I strongly agree with you about that (and the rest of your posting),
    it has to be clarified that

    1. The term "DOM" is not and has never been restricted to "W3C DOM":
    `innerHTML' is a part of proprietary DOMs. Therefore the statement
    "Do not mix non-standard innerHTML and DOM." is nonsense :)

    2. Assigning a Function object reference to `inp.onclick' is not more or
    less standard than `innerHTML' is. The HTMLInputElement interface does
    not have an `onclick' attribute in W3C DOM Level 2 HTML and W3C DOM
    Level 2 Events does not specify that attribute either. If you would
    want to be strictly standards compliant, you would have to write

    inp.addEventListener('click', functionObjectReference, false);

    but then you would run into problems with IE, for example.


    Regards,
    PointedEars
     
    Thomas 'PointedEars' Lahn, Dec 14, 2005
    #5
    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. P
    Replies:
    1
    Views:
    1,191
    Joe Kesselman
    Jul 7, 2006
  2. Ken Fine
    Replies:
    2
    Views:
    13,147
    Ken Fine
    Sep 25, 2006
  3. Adding Form elements

    , Feb 11, 2005, in forum: Perl Misc
    Replies:
    8
    Views:
    136
  4. Replies:
    5
    Views:
    207
  5. Replies:
    4
    Views:
    202
Loading...

Share This Page