CODEWITHSUNDEEP
javascriptjqueryforms
maarcs
maarcs

Reputation: 115

javascript add multiple form fields with unique names and ID's

Is this the best way to add multiple input fields in a same time?

function add(){
   counter++;
   if (counter > 10){counter = 10;
   } else {
     document.getElementById("counter").value=counter;
     document.getElementById("addpackage").innerHTML+=
     "<div class='sent-item'><h3>Papildus sūtījums Nr."+counter+"</h3><div class=form-group row'><label for='when' class='col-sm-2 control-label'></label><div class='col-sm-5'><label for='when-today' class='right-pad'>Aizvest šodien</label><input type='radio' name='when["+counter+"]'></div><div class='col-sm-5'><label for='when-notoday' class='right-pad'>Aizvest rīt</label><input type='radio' name='when["+counter+"]'></div></div><div class='form-group row extra-space'><label class='col-sm-2 control-label'>No? <span>*</span></label><div class='col-sm-6'><input type='text' class='textbox_1 form-control' id='from-company' name='from-company["+counter+"]'placeholder='Uzņēmuma nosaukums' style='margin-bottom: 5px;'><input type='text' class='textbox_1 form-control' id='from-address' name='from-address["+counter+"]' placeholder='Adrese' style='margin-bottom: 5px;'><input type='text' class='textbox_1 form-control' id='from-info' name='from-info["+counter+"]' placeholder='Kontaktinfo' ></div><div class='col-sm-4 center'><input id='enable_from' name='enable_from["+counter+"]' type='checkbox' /><label class='form-label col-sm-12'>No mums!</label></div></div>";

   }
}

HTML I want to add is so big that it is hard to manage it.

Upvotes: 1

Views: 1331

Answers (2)

Arun
Arun

Reputation: 142

Add like this

function add(){
   counter++;
   if (counter > 10){counter = 10;
   } else {
     document.getElementById("counter").value=counter;

     var selectItem = $('<div class="'"sent-item"'"></div>');
    $('<h3>Papildus sūtījums Nr."+counter+"</h3>').appendTo(selectItem);
    var row = $('<div class="form-group row">').appendTo(selectItem);
        $('<label for='when' class='col-sm-2 control-label'></label>').appendTo(row);
        var col5_1 = $('<div class='col-sm-5'></div>').appendTo(row);
            $('<label for='when-today' class='right-pad'>Aizvest šodien</label>').appendTo(col5_1);
            $('<input type='radio' name='when["+counter+"]'>').appendTo(col5_1);
        var col5_2 = $('<div class='col-sm-5'></div>').appendTo(row);
            $('<label for='when-notoday' class='right-pad'>Aizvest rīt</label>').appendTo(col5_2);
            $('<input type='radio' name='when["+counter+"]'>').appendTo(col5_2);


     document.getElementById("addpackage").innerHTML+= selectItem;


   }

Upvotes: 1

Kat
Kat

Reputation: 4695

Well, obviously the code you posted won't work because there's no loop (which I presume is what you meant to write). If it were a loop, it would work. You could format the string to be more readable and that would be more or less maintainable. Main issue is that formatting HTML inside of JS can be messy. ES6 has template strings that would make this much more managable.

A templating library such as Mustache.js could also make for cleaner code. Note that Mustache templates do not allow logic inside the templates. As a result, in order to have something following a counter, you'd have to provide a list of IDs (which would be trivial to generate).

Eg, your template would be something like:

<div id="target">Loading...</div>
<script id="template" type="x-tmpl-mustache">
    {{#ids}}
        <div id="div_{{id}}">
            ...
        </div>
    {{/ids}}
</script>

And then the code to use the template would be something like:

$(document).ready(function () {
  var template = $('#template').html();
  var data = {ids: [
    {id: 1},
    {id: 2},
    {id: 3}
  ]};
  var rendered = Mustache.render(template, data);
  $('#target').html(rendered);
});

The JS here is a little more verbose than necessary to show the potential of passing in more than just the counter (but you have to pass the counter in -- can't calculate it in the template).

This would create 3 divs with IDs like div_1, div_2, etc.

JSFiddle.

Upvotes: 1

Related Questions