Question

Based on several other threads here I think what I’m looking for is json_encode(), though I don’t really understand how the output can be used by my JavaScript function. What I’m trying to do is allow users to add additional select lists as needed and have those select options populated from a PHP function that I use to create the initial select list. Here’s my JavaScript at the moment:

<script type="text/javascript">
var assigneeCounter = <?php print checkdata("assignee_count", $formvalues, "1"); ?>;

function addInput(fieldlabel, inputclasses, inputCounter, fieldtype = 'input', selectoptions = false){
  window[inputCounter]++;
  var cleanlabel = fieldlabel.replace(/[^a-zA-Z 0-9]+/g,'');
  var cleanlabel = cleanlabel.replace(/\s+/g, '_').toLowerCase();
  var newdiv = document.createElement('div');
  newdiv.id = cleanlabel + window[inputCounter];
  if (fieldtype == 'input') {
    newdiv.innerHTML = '<div class="form-item"><label for="' + cleanlabel + '_' + window[inputCounter] + '">' + fieldlabel + ' #' + window[inputCounter] + '</label><input type="text" name="' + cleanlabel + '_' + window[inputCounter] + '" id="' + cleanlabel + '_' + window[inputCounter] + '" value="" class="' + inputclasses + '"><span class="space"><a href="javascript:removeInput(\'' + cleanlabel + '\',\'' + inputCounter + '\',\'' + window[inputCounter] + '\');">Remove</a></span>';
  }
  else if (fieldtype == 'select') {
    alert(selectoptions);
    newdiv.innerHTML = '<div class="form-item"><label for="' + cleanlabel + '_' + window[inputCounter] + '">' + fieldlabel + ' #' + window[inputCounter] + '</label><select name="' + cleanlabel + '_' + window[inputCounter] + '" id="' + cleanlabel + '_' + window[inputCounter] + '" class="' + inputclasses + '">
      <span class="space"><a href="javascript:removeInput(\'' + cleanlabel + '\',\'' + inputCounter + '\',\'' + window[inputCounter] + '\');">Remove</a></span>';
  }
  document.getElementById(cleanlabel + "_additions").appendChild(newdiv);
  document.getElementById(cleanlabel + "_count").value = window[inputCounter];
}
function removeInput(fieldlabel, inputCounter, fieldID){
  var element = document.getElementById(fieldlabel + fieldID);
  document.getElementById(fieldlabel + "_additions").removeChild(element);
  window[inputCounter]--;
  document.getElementById(fieldlabel + "_count").value = window[inputCounter];
}
</script>

I’m calling the function in HTML like so:

<div id="assignee_additions"></div>
<p><a href="javascript:addInput('Assignee','required-text', 'assigneeCounter', 'select', '<?php print json_encode($assignto); ?>');">Add Another Assignee</a></p>

When I set the value of “fieldtype” to input it works great and creates another input field as expected. The remove function does its job too. But what I really need is a select field, not an input field and that’s where my lack of JavaScript knowledge is killing me.

Also, if anyone seems to think that jQuery is a better option here, I’m certainly open to that as well but I don’t know that any better than I do traditional JavaScript.

Thanks in advance!

Answer 1

You can create your JSON in a different php file. Then, from your javascript function, you can use an AJAX call to retrieve generated JSON.

I believe you want to json_encode values and keys for <option> tags, right? So, after successful AJAX call, decode your JSON and for each value build a new option.

Rough code in jQuery can look like this:

$.ajax({
    url: 'giveMeJSON.php',
    dataType: 'json',
    success: function(data){
        $.each(data.options, function(index){
            $('<option>').val($(this).value).text($(this).text).appendTo($('#select_id'));
        }
    }
})

Read about $.ajax and AJAX.