SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Addict
    Join Date
    Jan 2007
    Location
    Romania
    Posts
    203
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    dynamic generated input fields not visible in form

    Hello,

    I'll start from the begining: I have a tabel with 3 rows, every row has 1 column containing <span id="unique_id">what ever</span>. This table is contained by a form. When I click on the table column I get the value of the span ("what ever") clear the innerHTML of that column and new innerHTML = "<input type=\"text\" ... >". Now, the problem is that when I click submit the fields generated dynamic are not visible, it's like those were never created. Is there a solution for this problem, other than using Ajax to submit data and redirect the page when submiting is complete?

    Thanks!

  2. #2
    SitePoint Addict mmanders's Avatar
    Join Date
    Jul 2006
    Location
    Edinburgh, Scotland
    Posts
    358
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's a good point. I'm working towards a similar idea. I wonder whether form submission only takes into account the original markup, and corresponding form values. This would explain why added elements aren't apparent when you submit the form. If this is the case, how does one submit a form that includes elements that were added to the DOM using JavaScript? Ideally without using AJAX - is this even possible?!

  3. #3
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you mean that once the page reloads (after a submit to save the form contents) - all the fields added by the user are gone?

    that is to be expected. Why dont you create those fields using a server side language, since on the server you already have that information.

  4. #4
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @mmanders:
    There are problems with the NAME attribute when you create input elements using DOM methods - at least in internet explorer. To get around that you need to use a non standard .createElement call like this:

    Code:
    var myInput = document.createElement("<input type='text' name='product'>");
    hope that helps

  5. #5
    SitePoint Addict
    Join Date
    Jan 2007
    Location
    Romania
    Posts
    203
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jimfraser View Post
    Do you mean that once the page reloads (after a submit to save the form contents) - all the fields added by the user are gone?

    that is to be expected. Why dont you create those fields using a server side language, since on the server you already have that information.
    I see we don't talk about the same problem here, so I'll try to be more explicit: I have a form, table and columns. Every column has <span id="some_id">some text</span>. So, when the user clicks on the column, I create, on the fly, an <input type="text" value="some text"> (value of input = innerHTML of the span). Because this table is contained by a form, and those inputs were created to modify a value, I expect when clicking submit to send values of those fields created on the fly, by post, to a script (server side) and work with those values. I can do it by Ajax, but I thought that maybe there is another solution.

  6. #6
    SitePoint Addict
    Join Date
    Jan 2007
    Location
    Romania
    Posts
    203
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jimfraser View Post
    @mmanders:
    There are problems with the NAME attribute when you create input elements using DOM methods - at least in internet explorer. To get around that you need to use a non standard .createElement call like this:

    Code:
    var myInput = document.createElement("<input type='text' name='product'>");
    hope that helps
    You were right, it works in IE. What about Opera, Mozilla...?

  7. #7
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What about Opera, Mozilla...?
    Do Opera/Mozilla have the same problem that you originally posted? If so... good question. I'm sure someone here has an answer

  8. #8
    SitePoint Addict
    Join Date
    Apr 2001
    Location
    Devon, UK
    Posts
    333
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If possible, you really should avoid using non-standard calls or innerHTML. It's better to use the standard document.createElement then appendChild or removeChild as appropriate.

    Perhaps a simpler alternative would be to have the <input> code always available in the source, but hide or show them as necessary.

  9. #9
    SitePoint Addict
    Join Date
    Jan 2007
    Location
    Romania
    Posts
    203
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ceeb View Post
    If possible, you really should avoid using non-standard calls or innerHTML. It's better to use the standard document.createElement then appendChild or removeChild as appropriate.

    Perhaps a simpler alternative would be to have the <input> code always available in the source, but hide or show them as necessary.
    I agree with you in not to use non-standard dom properties. About innerHTML... I don't know to much about, so I can't tell why is better to use this or that.

    Related to innerHTML: If I don't use innerHTML to populate table cells with inputs, and instead I use document.createElement("input") I get the values of the inputs (because are automatic generated as <input type="text">). I don't like that I can't set the type attribute on IE.

    jimfraser, I don't see any problem related to the name of an input in IE.

  10. #10
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by MSDN Library
    Attributes can be included with the sTag as long as the entire string is valid HTML. You should do this if you wish to include the NAME attribute at run time on objects created with the createElement method.
    from
    http://msdn.microsoft.com/workshop/a...asp?frame=true

  11. #11
    SitePoint Addict
    Join Date
    Jan 2007
    Location
    Romania
    Posts
    203
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I agree with you, it's working on IE but it's not a DOM standard. It's IE specific.

  12. #12
    SitePoint Addict
    Join Date
    Apr 2001
    Location
    Devon, UK
    Posts
    333
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Although innerHTML is really handy and easy to use, it's non-standard, and could cause problems, especially if your HTML is badly formed.

    It's possible to do anything with DOM scripting by adding, removing or changing nodes and their attributes. It does take more code, but it's far safer and will work in all browsers. For example, to add a password field:

    Code:
    // create password input
    var p = document.createElement("input");
    p.setAttribute("type", "password");
    p.setAttribute("maxlength", 20);
    
    // find somewhere to put it
    var loc = document.getElementById("putpasswordhere");
    
    // append the node
    if (loc) loc.appendChild(p);
    It's worth spending some time with DOM scripting: it's very powerful and the basis of most online applications.

  13. #13
    SitePoint Addict
    Join Date
    Jan 2007
    Location
    Romania
    Posts
    203
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ceeb, it's not working. You can't set type of an input field either by old element.type or the setAttribute method. I'm talking about IE here. I think it's a matter of security.

  14. #14
    SitePoint Addict
    Join Date
    Apr 2001
    Location
    Devon, UK
    Posts
    333
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by iulian View Post
    ceeb, it's not working. You can't set type of an input field either by old element.type or the setAttribute method. I'm talking about IE here. I think it's a matter of security.
    Yes, you're right - many apologies. (Although it sounds more like an IE bug than a security issue!)

    There are various solutions on the web, but perhaps the easiest would be to create all the elements then show/hide them as necessary. I'm also wondering whether cloneNode would work on any input field?


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
  •