getting values from dynamic form elements with javascript

Question

I'm creating a dynamic form with javascript which contains a drop down list and an input text as below :

$(document).ready(function() {  
    document.write("<FORM>");

    document.write("<SELECT NAME='SelectMenu'>");
    for (var i = 1; i <= 3; i++)
    document.write("<OPTION>" +"one"+"</OPTION>");
    document.write("<OPTION>" +"two"+"</OPTION>");
    document.write("<OPTION>" +"three"+"</OPTION>");

    document.write('</SELECT>');
    document.write("<br>Entry  <input type='text' name='myInputs[]'>");
    document.write("<button onClick="ChoixDeQuestion()">Show</button>");

    document.write('</FORM>');
}); 

The problem here is that I can't access those fields since they don't even exist in the source code of the page. I want to get the entered text value and the selected item of the list. So Any idea please!!

Thanks

Answer 1

Instead of using the basic syntax "document.write(...)", you should use dynamic elements and creating new HTML elements.

Document.write only actually displays the text without really inserting it. If you want to edit your HTML later on, you need the element to be created and added to the document.

Using, for example, the "CreateElement" syntax. Here's a good tutorial to get you started on how to create a form dynamically. Afterwards you can append elements to it, and create many more elements that way.

Answer 2

Using document.write should be avoided. Its not a good practice.

You are using jQuery and its very easy to dynamically create elements in jQuery.

You can do something like this,

$(document).ready(function() {  
    var options = '';
    for (var i = 1; i <= 3; i++)
    options +='<option>one</option>';
    options +='<option>two</option><option>three</option>';
    var html = '<select>' + options + '</select><br>Entry <input type="text" name="myInputs[]" />';
    var button = $('<button>Show</button>').click(function(e){
        // Code to be executed when button is clicked

        e.preventDefault();  // since by default button submits the form
        alert('button is clicked');
    });
    $("<form></form>").append(html).append(button).appendTo('body');
});

jsFiddle

If you know a basic jQuery, everything is self explained, but do let me know if something bothers you :)

Answer 3

If you're already using jQuery, make more use of it:

$(document).ready(function() {
    var form = $('<form />'),
    dropdown = $('<select />', {
        name: 'SelectMenu'
    }),
    textbox = $('<input />', {
        type: 'text',
        name: 'myInputs[]'
    }),
    button = $('<button />', {
        text: 'Show'
    }).on('click', ChoixDeQuestion);

    for (var i = 1; i <= 3; i++) {
        $('<option />', {
            text: i
        }).appendTo(dropdown);
    }

    form
        .append(dropdown)
        .append('<br />Entry')
        .append(textbox)
        .append(button)
        .appendTo('body');
});

This is creating all the nodes and inserting them into the DOM in a nice way; you can also just create one big string contents with your html, and then do this:

$(contents).appendTo('body');