SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot
    Join Date
    Jun 2006
    Posts
    107
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with Appending innerHTML and Form Elements

    Hey everyone,
    I have been trying to figure this out for a while now and thought I would ask to see what the problem is.

    I have this snippet of javascript that is supposed to add additional input fields when a user requests them, which it does just fine. However, when the new field is added, if any of the existing fields had a value, the value gets erased.

    Here is the code:
    Code JavaScript:
    if (document.getElementById('morestores') != null && document.getElementById('initialStore') != null) {
     
    var trid = document.getElementById('morestores');
    var idiv = document.getElementById('initialStore');
     
    //count the divs to get a new id					
    var trs = trid.getElementsByTagName("div");
    var trcount = trs.length;
    var nextid = (trcount + 1);
     
     
    var Icontents = '<div id="s_'+nextid+'" class="itemAttrsExtra"><input type="text" id="'+nextid+'" name="new[]"/></div>';
     
     
    //append it to the div
     trid.innerHTML += Icontents;
     
    }//end if exists

    Any help/feedback would be great,
    Thanks!

  2. #2
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jsbarra View Post
    I have this snippet of javascript that is supposed to add additional input fields when a user requests them, which it does just fine.
    Actually it doesn't. Injecting innerHTML doesn't append elements to the form no matter how it looks, you must use document.createElement. There's the I.E. way and the there's the everything-else way, which have been explained many times. GIYF.
    Tab-indentation is a crime against humanity.

  3. #3
    SitePoint Zealot
    Join Date
    Jun 2006
    Posts
    107
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I did google it, but sometimes when you don't know what to google, nothing gets returned

  4. #4
    SitePoint Enthusiast TriLLi's Avatar
    Join Date
    Feb 2010
    Location
    BiH, Bugojno
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you can do it this way

    Code JavaScript:
    var _obj = document.createElement('div');
     _obj.setAttribute('id', yourID);
     var _input = document.createElement('input');
    _input.setAttribute('id', yourID);
    _input.setAttribute('value', yourValue);
    _obj.appendChild(_input);
     trid.appendChild(_obj);
     
    //and this child will be appended to the end of trid.
    http://www.wiseblog.info
    Programmers don't die, they just GO SUB without return.

  5. #5
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have you tried assigning a unique name attribute for each new input element?

    Form elements are keyed by their name (not their ID) and when they're eventually POST'd to the server, only one value per name is going to be sent.

    If you create a new input element with teh same name, the browser might be resetting the value on every element with that name.

  6. #6
    SitePoint Enthusiast TriLLi's Avatar
    Join Date
    Feb 2010
    Location
    BiH, Bugojno
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    i am experienced web programmer, i didn't gave full solution but I did helped on request, I know that fields without name wont be submitted to a server and if you are using httprequest to server than you can submit it by getting its value by id. but ok, also what I have missed is I didn't use his logic to create input field, but if it's going to be easier I will submit solution. Thanks for remiding me

    Code JavaScript:
    if (document.getElementById('morestores') != null && document.getElementById('initialStore') != null) {
     
    var trid = document.getElementById('morestores');
    var idiv = document.getElementById('initialStore');
     
    //count the divs to get a new id                   
    var trs = trid.getElementsByTagName("div");
    var trcount = trs.length;
    var nextid = (trcount + 1);
     
     
    /*var Icontents = '<div id="s_'+nextid+'" class="itemAttrsExtra"><input type="text" id="'+nextid+'" name="new[]"/></div>';*/
     
    var _obj = document.createElement('div');
     _obj.setAttribute('id', nextid );
     var _input = document.createElement('input');
    _input.setAttribute('id',  'input_'+ nextid);
    _input.setAttribute('name', 'new[]');
    _obj.appendChild(_input);
     trid.appendChild(_obj);               
     
    //append it to the div
    // trid.innerHTML += Icontents;
     
    }//end if exists

    This is final solution.
    http://www.wiseblog.info
    Programmers don't die, they just GO SUB without return.


Tags for this Thread

Bookmarks

Posting Permissions

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