CODEWITHSUNDEEP
javascripthtmlforms
Martin
Martin

Reputation: 644

populate a HTML select in form using Javascript

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!

Upvotes: 2

Views: 1864

Answers (3)

Sudipta Kumar Maiti
Sudipta Kumar Maiti

Reputation: 1709

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

Upvotes: 1

Jose Mato
Jose Mato

Reputation: 2799

You have 2 mistakes:

  1. Use jQuery load function because is async so you are creating the content before loading the file register.html
  2. 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);
        }

Upvotes: 1

user5589903
user5589903

Reputation:

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

Upvotes: 3

Related Questions