populate a HTML select in form using Javascript

Question

I have a problem by populating a HTML select. This select is in an form that first is loaded into a div. (see the code below)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type"  />
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

    <script>
        function createForm(){
            $("#formdiv").load("Register.html");

            var itemval= '<option value="OT">OT</option>';

            document.getElementById("sel").appendChild(itemval);
        }

        function validateForm(){
            // ...
        }
    </script>   
</head>

<body onload="createForm()">

    <div id="formdiv" >
        // here will be the form
    </div>

</body>

The Register.html is a simple form

<h2>Register</h2>

<form name="registerForm" id="registerForm" onsubmit="validateForm()">

  Select:<select name="sel" id="sel"></select>

  <input type="submit" value="Submit">

</form>

The function createForm() should populate, here as a first test, the select tags. But unfortunately it does not show any option in the browser.

Hope some of you are more experienced than I and can hint me to the solution. Thanks in advance!

I guess i didn't understood you yet, but still why won't you directly put that form inside <div id="formdiv">....</div> ? — divy3993
– divy3993, Commented Nov 22, 2015 at 17:28
@SudiptaMaiti: sorry, changed it for this example, but not in the text. — Martin
– Martin, Commented Nov 22, 2015 at 17:31
@divy3993: it is a part of an actual project of mine. The form is loaded dynamically loaded into the form by an navigationbar — Martin
– Martin, Commented Nov 22, 2015 at 17:32
thanks folks, all your answers are working! thanks for your help, I really appreciate that! — Martin
– Martin, Commented Nov 22, 2015 at 22:39

user5589903 · Accepted Answer · 2015-11-22 17:32:50Z

3

Here the problem is that you use appendChild with a String,

you should use innerHTML to insert a string, or of you want to append

do createElement and then append, appendChild accepts Node as a parameter,

in your case its better use add() method on select

http://www.w3schools.com/jsref/met_select_add.asp

<script type="text/javascript">
    function createForm() {

        var option = document.createElement("option");
        option.text = "OT";
        option.value = "OT";
        document.getElementById("sel").add(option);
    }

    function validateForm() {
        // ...
    }
</script>

<div id="formdiv">
    <form name="registerForm" id="registerForm" onsubmit="validateForm()">

        Select:
        <select name="sel" id="sel"></select>

        <input type="submit" value="Submit">

    </form>
</div>
<h2>Register</h2>

See jsfiffle link: http://jsfiddle.net/qgfbhgwd/

with a working example

answered Nov 22, 2015 at 17:32

user5589903

Sign up to request clarification or add additional context in comments.

2 Comments

divy3993 Over a year ago

I guess the OP wants form to load from external file.

user5589903 Over a year ago

Does not make much difference, issue is in appendChild()

Jose Mato · Accepted Answer · 2015-11-22 17:38:40Z

You have 2 mistakes:

Use jQuery load function because is async so you are creating the content before loading the file register.html
appendChild needs a DOM Element instead of a string

This code fix your problem, hope it helps:

function createForm(){
            var populateSelect = function() {
                var itemsValues = ['OT', 'FOO', 'BAR'];
                var items = document.createDocumentFragment();

                itemsValues.forEach(function(el) {
                    var option = document.createElement("option");
                    option.value = el;
                    option.innerHTML = el;

                    items.appendChild(option);
                });

                document.getElementById("sel").appendChild(items);
            };

            $("#formdiv").load("register.html", populateSelect);
        }

Sudipta Kumar Maiti · Accepted Answer · 2015-11-22 18:07:29Z

1

You can't add <option value="OT">OT</option> directly as appendChild, so use javascript createElement and always better to write a callback function for jquery load() to manipulate DOM.

   function createForm() {
        $("#formdiv").load("Register.html", function () {
            //var itemval = '<option value="OT">OT</option>';
            var itemval = document.createElement("option");
            itemval.setAttribute("value", "OT");
            itemval.innerText = "OT";
            document.getElementById("sel").appendChild(itemval);
        });
    }

edited Nov 22, 2015 at 18:07

answered Nov 22, 2015 at 17:54

Sudipta Kumar Maiti

1,7091 gold badge13 silver badges19 bronze badges

Collectives™ on Stack Overflow

populate a HTML select in form using Javascript

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related