#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2002
    Posts
    155
    Rep Power
    13

    Question Using Javascript to dynamically add form elements


    Hi all. I'm looking for some help in dynamically creating form elements.

    What's happening is this:

    I have two select lists: one contains available menu items, the other published menu items.

    Once the user has added the menu items he/she wants to the published list, I need to submit the form and have ALL text and values of the published item list passed over for processing.

    I was figuring that before submitting the form I could loop through the select list, and create a hidden input to hold an array of the text representations (using the PHP fieldname[] notation for grouping form elements together), and another hidden input to hold an array of the option values.

    Then on the processing page I could just manipulate these two arrays as necessary.

    Right now I'm trying this:

    Code:
    function build_menu() {
    	var published = document.CMS_edit_menu.published_items;
    	for (i=0;i<published.length;i++) {
    		var menu_text = document.createElement('<input type="hidden" name="new_menu_text[]" value="'+published.options[i].text+'">');
    		document.body.insertBefore(menu_text);
    		var menu_value = document.createElement('<input type="hidden" name="new_menu_value[]" value="'+published.options[i].value+'">');
    		document.body.insertBefore(menu_values);
    	}
    	// code which submits form omitted...
    }
    However when I process the $_POST values the new inputs aren't showing up.

    I tried creating them as text inputs to see where they would be rendered, and they seem to be rendered at the end of the page, and after the form has closed. So, it makes sense that they wouldn't be passed through via $_POST.

    Does anyone now how I can set it up such that they are created within the form, so I can have them submitted with the rest of the form?

    I know with select lists I can easily add new options using the add method, but I just tried adding an element to a form using this method and it's not supported.

    Any help or ideas anyone has regarding this would be greatly appreciated.

    Thanks in advance,

    Pablo
  2. #2
  3. No Profile Picture
    Senior Citizen
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2001
    Location
    leftcoast
    Posts
    2,019
    Rep Power
    16
    pablo.gosse...

    You'll save yourself a lot of teeth-gnashing if you read the links I posted here (and http://www.brainjar.com/dhtml/intro/ as well). document.createElement() isn't innerHTML (i.e., it's not parsed as HTML); you don't feed it a string of markup, just an string with the element name you'd care to generate. document.createTextNode() does take a string of text as argument - but, again, it becomes a text node, and isn't parsed.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2002
    Posts
    155
    Rep Power
    13
    Hi Adios. Thanks for the tip. I got the idea for passing in the html of the input from Microsoft's site:

    "You can also specify all the attributes inside the createElement method itself by using an HTML string for the method argument." (http://msdn.microsoft.com/library/de...ateelement.asp).

    Microsoft give bad advice? Noooooooo.........;o)

    However what you say makes sense, and I can see how using the DOM I can easily get the results I'm looking for.

    Thanks for the tip!

    Cheers,
    Pablo
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jan 2002
    Location
    Seattle WA
    Posts
    863
    Rep Power
    14
    You CAN pass attributes to createElement, but not html.
    Code:
    // legal:
    document.createElement('textarea name="foo"');
    // illegal:
    document.createElement('<textarea name="foo">Default Text</textarea>');
    See the difference?
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2002
    Posts
    155
    Rep Power
    13
    Yup, but the code I got was actually copied directly from Microsoft's site, including the passing of html code as an attribute to the createElement() method.

    However, I have to say I'm not surprised that something incorrect (at least incorrect outside Microsoft's world) came from their site.

    Thanks again.

    P.
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2002
    Posts
    155
    Rep Power
    13
    Hi all. Thanks very much for your tips.

    By using the DOM instead of innerHTML I got it working very quickly.

    However, I'm curious as to why it's not accepted to pass html to the createElement method, yet still it works.

    Right now, here's the code I've got that's working:

    Code:
    function build_menu() {
    	var published = document.CMS_edit_menu.published_items;
    	for (i=0;i<published.length;i++) {
    		var menu_text = document.createElement('<input type="hidden" name="new_menu_text[]" value="'+published.options[i].text+'">');
    		var menu_vals = document.createElement('<input type="hidden" name="new_menu_vals[]" value="'+published.options[i].value+'">');
    		var insertHere = document.getElementById('new_elements');
    		insertHere.parentNode.insertBefore(menu_text,insertHere);
    		insertHere.parentNode.insertBefore(menu_vals,insertHere);
    	}
    	set_form_action('CMS_edit_menu','<?php echo $this->CMS_homepage; ?>?action=_mods/menus/cms.menus.act','update_menu');
    }
    On the processing page I have the two arrays which were created, and which I can now merge into a menu.

    Is this working only because I'm looking at it in IE?

    (*This happens to be a case where the application I'm developing will require IE5.5+ so if this is why it works, that's okay with me, but if the other method works in more browsers, then that's obviously the better choice in most situations)

    Thanks again.

    Pablo
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jan 2002
    Location
    Seattle WA
    Posts
    863
    Rep Power
    14
    Hmmm. I'm way too tired right now, but I could swear I saw somewhere that you could pass arguments to createElement (in all modern browsers). Can't get my previous example to work now though, and I'm too tired to troubleshoot though...

IMN logo majestic logo threadwatch logo seochat tools logo