CODEWITHSUNDEEP
javascriptjqueryhtml
Kenny Smith
Kenny Smith

Reputation: 889

Add select tag with label to HTML for dynamically jQuery

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

enter image description here

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

Upvotes: 0

Views: 381

Answers (2)

Piotr Glejzer
Piotr Glejzer

Reputation: 278

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>

Upvotes: 1

vadivel a
vadivel a

Reputation: 1794

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>

Upvotes: 1

Related Questions