Create form fields programmatically using JavaScript

Question

I have a number between 1 and 100 stored in a JavaScript variable:

var number_units = 3;`

I want to take the value of number_units and create this HTML selection field that many times:

var html = '<select class="form-control input-sm">'+
    '<option value="1">1</option>'+
    '<option value="2">2</option>'+
    '<option value="3">3</option>'+
    '<option value="4">4</option>'+
'</select>';

If number_units is 3, my code should create the selection field 3 times.

I then save the form that these selection fields are part of using AJAX to a PHP backend. So I need to figure out how to get all the selection values when my AJAX post is made and create a separate database entry for each value.

I need help with the JavaScript to create the selection field number_units times.

I can probably store in a hidden form field the count of selection fields and then give them a name with an increment number and iterate to that number in my back end to save each one. How would I go on from here?

Michael Laszlo · Accepted Answer · 2015-09-17 20:27:37Z

2

You can use jQuery's $.parseHTML() to turn your field HTML into a DOM node. If you set an id value using a loop counter, you can refer to the fields later using the id.

In the following snippet, the id for each field has the form select-<number>. The first field is select-1, the second field is select-2, and so on. (I have changed the variable name number_units to numberUnits in keeping with JavaScript naming customs.)

var numberUnits = 3;

var fieldHTML = '<select class="form-control input-sm">' +
    '<option value="1">1</option>' +
    '<option value="2">2</option>' +
    '<option value="3">3</option>' +
    '<option value="4">4</option>' +
    '</select>';

window.onload = function () {
  var form = document.getElementById('bigForm'),  // Field container.
      fields = [];
  for (var i = 1; i <= numberUnits; ++i) {        // Iterate numberUnits times.
    var field = $.parseHTML(fieldHTML)[0];        // Make field.
    field.id = 'select-' + i;                     // Set field ID.
    fields.push(field);
  }
  // Insert all fields at front of form.
  $('#bigForm').prepend(fields);
  
  // Test: set fields 2 and 3 to values 2 and 3.
  $('#select-2').val(2);
  $('#select-3').val(3);
};

#bigForm select {
  margin: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="bigForm"></form>

edited Sep 17, 2015 at 20:27

answered Sep 17, 2015 at 20:19

Michael Laszlo

12.2k3 gold badges33 silver badges47 bronze badges

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

3 Comments

JasonDavis Over a year ago

I like your example, This JSFiddle shows more of my desired end goal which takes the var numberUnits value and creates a couple different selection fields for each unit number: jsfiddle.net/j5vL8nrj/1 What I need help with is also pre-populating ther selected values when they exist from a database. So basically on 1 modal window a user can select the number of units. ON another it shows these 2 option fields for each unit. It allows them to save to a DB and if already saved it would then need to load in the previous saved values. Any Idea how to fill in existing saved values?

JasonDavis Over a year ago

I think I got it figured out in this one jsfiddle.net/j5vL8nrj/2 thanks for your help, gotta love JS

JasonDavis Over a year ago

Also I see your demo already shows how to select a value as well, nice!

SeanLF · Accepted Answer · 2015-09-17 20:10:35Z

// Get your form
var form = document.getElementById('#form');

// Repeat n times
for(var i = 0; i < number_units; i++){
  // Create select element and assign it the class name
  var select= document.createElement('select');
  select.className = 'form-control input-sm';

  // Create 4 option elements with value and text
  var o1 = document.createElement('option');
  o1.value = '1';
  o1.text = '1';
  var o2 = document.createElement('option');
  o2.value = '2';
  o2.text = '2';
  var o3 = document.createElement('option');
  o3.value = '3';
  o3.text = '3';
  var o4 = document.createElement('option');
  o4.value = '4';
  o4.text = '4';

  // Append the option elements to the select element
  select.appendChild(o1);
  select.appendChild(o2);
  select.appendChild(o3);
  select.appendChild(o4);

  // Append the select element to the form element
  form.appendChild(s);
}

rajuGT · Accepted Answer · 2015-09-17 20:15:06Z

1

Check this fiddle http://jsfiddle.net/vgp8kx4g/

var number_units = window.prompt("Enter the number of options", 2);

if(number_units * 1 > 0) {
    var html = '<select class="form-control input-sm">';
    for(var i=1; i<= number_units; i++) {
        html += '<option value="' + i + '">' + i + '</option>';
    }
    html += '</select>';
    document.body.innerHTML = html;
}

Instead of document.body you can insert the html into any valid DOM element. If multiple values are taken change tag to <select multiple>

answered Sep 17, 2015 at 20:15

rajuGT

6,4442 gold badges30 silver badges44 bronze badges

Comments

Slico · Accepted Answer · 2015-09-17 20:18:40Z

1

Don't know if this is what you are looking for but check this Fiddle

$("#save").on("click", function () {
    $(".form-control").each(function () {
        alert("Selected values: " + $(this).val());
    });
});

answered Sep 17, 2015 at 20:18

Slico

4362 silver badges16 bronze badges

Collectives™ on Stack Overflow

Create form fields programmatically using JavaScript

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related