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

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

• javascript
• html
• cordova

Share Improve this question Follow edited May 31, 2012 at 14:29 Jashwant 29k1616 gold badges7676 silver badges108108 bronze badges asked May 31, 2012 at 14:15 MarwaInsatMarwaInsat 29311 gold badge44 silver badges1717 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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 :)

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.

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');