CODEWITHSUNDEEP
javascriptjquery
JasonDavis
JasonDavis

Reputation: 48983

Create form fields programmatically using JavaScript

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?

Upvotes: 1

Views: 235

Answers (4)

Michael Laszlo
Michael Laszlo

Reputation: 12239

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>

Upvotes: 2

Slico
Slico

Reputation: 436

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

Upvotes: 1

rajuGT
rajuGT

Reputation: 6414

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>

Upvotes: 1

SeanLF
SeanLF

Reputation: 131

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

Upvotes: 1

Related Questions