Add select tag with label to HTML for dynamically jQuery

Question

I am writing form in HTML and JQuery. I would like to add the forms fields dynamically, after the page is loaded.

I have this in HTML file:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="index.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="index.js"></script>
</head>
<body>
    <div id="form-database-settings">
        <label for="database_section">Database Settings</label>
        <form id="database_section" class="form-settings">
        </form>
        </div>
</body>
</html>

and this in my JS file:

var dataset_options = [
    {
        text:"text1",
        value:"value1"
    },
    {
        text:"text2",
        value:"value1"
    }
];


window.onload = () => {
    createDatabaseSettingsForm();
}

function createDatabaseSettingsForm(){
    var formDatabaseSettings = $("#database_section")[0];
    var datasetSelect = create_select_button("Dataset", "dataset_selector", "query-form-class", dataset_options)
    formDatabaseSettings.appendChild(datasetSelect);
}

function create_select_button(label_value, select_id, select_class, options){
    var div = document.createElement("div");
    var label = document.createElement("label");
    label.setAttribute("for", select_id);
    label.setAttribute("value", label_value);
    div.appendChild(label);

    var select = document.createElement('select');
    select.setAttribute("id", select_id);
    select.setAttribute("class", select_class);

    for (var option_index in options){
        select.append($('<option value=${options[i].value}>${options[i].text}</option>'));
        // select.append($("<option value=3>this is a text</option>"));
    }

    div.appendChild(select);

    return div;
}

this is the output. I would like to have a label, and elements in the select element. What am I doing wrong?

Answer 1

Hope this help you.

 var dataset_options = [{ text: "text1", value: "value1" }, { text: "text2", value: "value1" } ]; window.onload = () => { createDatabaseSettingsForm(); } function createDatabaseSettingsForm() { var formDatabaseSettings = $("#database_section")[0]; var datasetSelect = create_select_button("Dataset", "dataset_selector", "query-form-class", dataset_options) formDatabaseSettings.appendChild(datasetSelect); } function create_select_button(label_value, select_id, select_class, options) { var div = document.createElement("div"); var label = document.createElement("label"); label.setAttribute("for", select_id); label.setAttribute("value", label_value); div.appendChild(label); var select = document.createElement('select'); select.setAttribute("id", select_id); select.setAttribute("class", select_class); for (var i in options) { console.log(options); var option = document.createElement("option"); option.text = options[i].text; option.value = options[i].value; select.append(option); // select.append($("<option value=3>this is a text</option>")); } div.appendChild(select); return div; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="form-database-settings"> <label for="database_section">Database Settings</label> <form id="database_section" class="form-settings"> </form> </div>

Answer 2

You can't mix jQuery and Vanilla JS because this is not easily readable and you are making a spaghetti code and this is not good practice. I modified your code and I added example with VanillaJS and jQuery ( jquery also on codesandobx )

https://codesandbox.io/s/serene-mestorf-1wq9u

VanillaJS

 const dataset_options = [ { text: "text1", value: "value1" }, { text: "text2", value: "value1" } ]; function createDatabaseSettingsForm() { const formDatabaseSettings = document.querySelector("#database_section"); console.log(formDatabaseSettings); const datasetSelect = createSelectButton( "Dataset", "dataset_selector", "query-form-class", dataset_options ); formDatabaseSettings.appendChild(datasetSelect); } function createSelectButton(label_value, select_id, select_class, options) { const div = document.createElement("div"); const label = document.createElement("label"); label.setAttribute("for", select_id); label.setAttribute("value", label_value); div.appendChild(label); const select = document.createElement("select"); select.setAttribute("id", select_id); select.setAttribute("class", select_class); for (const option in options) { const optionEl = document.createElement("option"); optionEl.setAttribute("value", options[option].value); optionEl.innerHTML = options[option].text; select.appendChild(optionEl); } div.appendChild(select); return div; } createDatabaseSettingsForm();

 <div id="form-database-settings"> <label for="database_section">Database Settings</label> <form id="database_section" class="form-settings"></form> </div>

jQuery

 const dataset_options = [ { text: "text1", value: "value1" }, { text: "text2", value: "value1" } ]; $(document).ready(() => { createDatabaseSettingsForm(); }); function createDatabaseSettingsForm() { const formDatabaseSettings = $("#database_section"); const datasetSelect = createSelectButton( "Dataset", "dataset_selector", "query-form-class", dataset_options ); formDatabaseSettings.append(datasetSelect); } function createSelectButton(label_value, select_id, select_class, options) { const div = $("<div/>"); const label = $("<label/>"); label.attr("for", select_id); label.attr("value", label_value); div.append(label); const select = $("<select />"); select.attr("id", select_id); select.attr("class", select_class); for (const option in options) { select.append( $( `<option value=${options[option].value}>${ options[option].text }</option>` ) ); } div.append(select); return div; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="form-database-settings"> <label for="database_section">Database Settings</label> <form id="database_section" class="form-settings"></form> </div>

Add select tag with label to HTML for dynamically jQuery

Question

2 answers

solution1
1 2020-02-23 14:54:21

solution2
1 ACCPTED 2020-02-23 15:14:16

Add select tag with label to HTML for dynamically jQuery

Question

2 answers

solution1 1 2020-02-23 14:54:21

solution2 1 ACCPTED 2020-02-23 15:14:16

solution1
1 2020-02-23 14:54:21

solution2
1 ACCPTED 2020-02-23 15:14:16