Show a form-field dynamically on option select

Question

This is my fiddle : DEMO

I am adding the template ID read-only fields, based on selection of option. 1 for SMS, 2 for email etc..

Since there is a provision to add new category, how to dynamically add template IDs to newly added options?

//Adding Template ID based on option
$('#categoryevent').on('click', function() {
  $('.actionConfig').empty();
  var z = $("#categoryevent option:selected").text();  
  if (z == 'sms') {
    var smsConfig = '<div class=form-group><label class="col-sm-2 control-label"for=templateId>Template ID: </label><div class=col-sm-8><input class=form-control id=templateId name=templateId value="1" readonly="readonly"></div></div>';
    $('.actionConfig').append(smsConfig);
  }
});

Answer 1

Welcome to SO, you can do something like this,

Set value of option as Template-Id 1,2,3 now when you add new category maintain counter and add it as value of newly added option.

Now keep other things same just get template id from option value.

something like this,

var opval = get option value here..
     var smsConfig = '<div class=form-group><label class="col-sm-2 control-label"for=templateId>Template ID: </label><div class=col-sm-8><input class=form-control id=templateId name=templateId value="+opval+" readonly="readonly"></div></div>';
        $('.actionConfig').append(smsConfig);

Hope this helps.

Edit:

answer jsfiddle

Answer 2

Instead of checking for the textual representation of the option, you should check for the value attribute. Since you did not add the value attributes yet for the options you hardcoded, you will have to do this as well, ie change:

<option>SMS</option>

to

<option value="0">SMS</option>

Alternatively, if you don't want to use the standard value attribute (eg because you want to avoid default beheviour) you can instead go for <option data-selectionId="1">SMS</option> . Obviously increment the id for each option you have in your select.

Now if you create a new option, you will have to set this data:

  var val = $("#new-option-event").val().trim();
  var opt = '<option value="'+ globalCounterVariable +'">' + val + '</option>';
  globalCounterVariable += 1; 

  $('#categoryevent').append(opt);
  $('#categoryevent').val(val);
  $('#new-option-event').val('');

You will have to define a global veriable (actually outside of the scope of the .addevent handler is enough) that you initially will have to set to 3 (the number of hardcoded options).

Now you can do this:

$('#categoryevent').on('change', function() {
      var selection = $(this).val(); //this is reference to the changed element, i.e. the select with Id 'categoryeveny'. 

      var html = '<div class="form-group"><label class="col-sm-2 control-label" for="templateId">Template ID: </label><div class="col-sm-8"><input class="form-control" id="templateId" name="templateId" readonly="readonly"></div></div>';

      $(html).find("input").val(selection);

      $(".actionConfig").empty();
      $('.actionConfig').append(html);
});

Note how I removed the need for all the if clauses, because you did the same logic each branch. Simply parameterize whatever you want to inject and this is all you need.

If you want to show different values for each selection (so different data than 1,2,3,... etc), you will have to either make that an option in the input where you create a new option, or hardcode generic logic in the change event, where you decide what content is shown based on the value of selection.

Answer 3

Here is the answer fiddle : DEMOanswer

$('#categoryevent').on("click", function(ev) {
        //  alert(ev.target.selectedIndex);
        var value = ev.target.selectedIndex;
        $('.actionConfig').empty();
        var z = $("#categoryevent option:selected").text();

        z = z.toLowerCase();

        var templateId = '<div class=form-group><label class="col-sm-2 control-label"for=templateId>Template ID: </label><div class=col-sm-8><input class=form-control id=templateId value="' + value + '" name=templateId readonly="readonly"></div></div>';
        $('.actionConfig').append(templateId);

    });