Q: Explanation needed regarding JavaScript arrays and how they are being implemented I have some JavaScript written by someone else and I'm trying to figure our exactly where some values are coming from, how they are formatted and what is being done with them. The values in question are citNumFirst, dateFirst, cdValues and cnValues.
This JavaScript is used to recursively open form fields for numbers and dates, then make an Ajax request (I think), but the Ajax data doesn't make any sense (value is: data: "countCitNum=" + countCitNum,)
Here is the code I need help with. Again, I'm trying to figure out where these values citNumFirst, dateFirst, cdValues and cnValues are coming from as these are what are being sent through the form submission (according to Fiddler).
My thinking is that this can all be done more efficiently with PHP, but I'm curious if the Ajax is even doing anything here, and if not are the values "cdValues" and "cnValues" being send as Javascript Arrays, or objects using the input forms.
$(document).ready(function() {
  var citArray = [];
  var thisCount = 1;
  varcountCitNum = -1;
  var cnArray = [];
  var citNum = '';
  var cnFirst = '';
  var cdArray = [];
  var issueDate = '';

$("#cnValues").val(cnArray);
$("#cdValues").val(cdArray);

  function addCitNumber(){
     var citNumField = document.getElementById("citNumFirst");

      if(citNumField.value ==''){
          var addfield_msg = "<span style='color:#F00;'>Please enter <br />Citation Number</span>";
           $('#addfield_error').removeClass('hideCat');
          $('#addfield_error').append(addfield_msg);

          return false;
      }else{

     countCitNum++;
     var addHTML = '';
     var addDateHTML = ''

     $.ajax({
             type: "POST",
                     url: "/ci/ajaxCustom/addCitNum",
                     data: "countCitNum=" + countCitNum,                         
                     success: function(results){
                         if(results){
                            countCitNum = results;
                         }

                        addHTML = '<div id="newCitNum_'+countCitNum+'"><br /><strong>Citation Number:</strong><br /><input type="text" id="citNumInput_'+countCitNum+'" onchange="setCitNum(this,'+countCitNum+')"/></div>';

                        addDateHTML = '<div id="newDate_'+countCitNum+'"><br /><strong>Citation Issue Date:</strong><br /><input type="text" id="citDateInput_'+countCitNum+'" class="date" onchange="setIssueDate(this,'+countCitNum+')" readonly="readonly"/><a href="javascript:void(0)" onclick="subtractCitNumber('+countCitNum+');"><img src="/euf/assets/themes/standard/images/delete_x.gif" width="29" height="23" border="0" class="imgDelete"/>Delete Citation Number</a></div>';
                         $('#anotherCitNum').append(addHTML);

                         $('#anotherCitDate').append(addDateHTML);
                          document.getElementById("#citDateInput_"+countCitNum);
                          $("#citDateInput_"+countCitNum).attr("disabled",true);
                         $(".date").datepicker();
                     }
     });
    }
     data="";
  }


*//******
 Set Additional Citation Numbers and enable the date input
******/

function setCitNum(obj, countCitNum){
        if(obj.value !='')
        {
            cnArray[countCitNum] = obj.value;
            $("#cnValues").val(cnArray);
            $("#citDateInput_"+countCitNum).removeAttr("disabled");
        }else{
            $('#citDateInput_'+countCitNum).val('');
            $("#citDateInput_"+countCitNum).attr("disabled", true);
        }
}

/******
 Set Issue Date of additonal citations
******/

  function setIssueDate(obj, countCitNum){
    if(obj.value !=''){
    cdArray[countCitNum] = obj.value;
    }else{
    cdArray[countCitNum] = '';
    }
    $("#cdValues").val(cdArray);
}

/******
 Set Citation Number and enable date input unless Citation Number is blank
******/

function setFirstNum(obj){
    cnFirst = obj.value;
    $('#addLink').empty();

    if(obj.value !='')
        {
            $("#citNumFirst").val(cnFirst);
            $("#dateFirst").removeAttr("disabled");
            $('#addfield_error').empty();
            $('#addfield_error').addClass('hideCat');
            var addLinkHTML = "<a href='javascript:void(0)' onclick='addCitNumber();'>Click here to add another Citation Number</a>"
            $('#addLink').append(addLinkHTML);
        }else{
            $('#dateFirst').val('');
            $("#dateFirst").attr("disabled", true);
        }
}

/******
 Set Issue Date of citation
******/

  function setFirstDate(obj){
            var issueDate = obj.value;
            $("#dateFirst").val(issueDate);
}

Here is the associated HTML
       <input type="hidden" name="cnValues" id="cnValues" />
      <input type="hidden" name="cdValues" id="cdValues" />
      <input type="text" id="citNumFirst" onblur="setFirstNum(this)" value=""/></div>
                <div id="addfield_error" class="hideCat"></div>
      </div>
      <div id="anotherCitDate" style="float:left; padding-left:15px">
     <input type="text" id="dateFirst" class="date" onchange="setFirstDate(this)" value="" readonly="readonly"/>


A: As far as I can tell, this is what's happening:


*

*citNumFirst and dateFirst are the initial inputs. When citNumFirst input is changed (note: this definitely needs input validation), "Click here to add another" link appears. Clicking it will increment countCitNum, send that to the Ajax call, and if it's successful, display an additional set of date/number inputs which can be used to create a new citation number.

*Ajax call: I'm not entirely sure what's going on here because what it's passing is the index of the input fields (countCitNum) that will be added (starting with zero and not counting the initial set). It's not passing the actual number or date, and it looks like it's expecting to receive that same index as results.

*cnValues and cdValues store cnArray and cdArray, which are used to store the numbers and dates, respectively, of citations added using these newly created input fields. cnArray[0] corresponds to the value in input #newCitNum_0; cdArray[0] corresponds to #newDate_[0]. Any updates made to these input fields result in changes to the array, but I'm not seeing them being used anywhere in your code snippet (but since they are hidden inputs, they are probably being used after form submit).
