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

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 🙂