Question

I have a web form and I am using JQuery to pull values the user has input and display them on the screen with an additional string added to it. The problem is that only two of the values are being displayed. When I look at the debugger, I can see the variables are populated but they aren’t showing up on the screen.

My web form:

<form method="POST" id="sas_form" action="#">
  <select name="var_type" id="var_type">
    <option value="1">1</option>
  </select>
  <input type="text" name="name" id="name">
  <input type="text" name="value" value="0" id="value">
  <input type="text" name="something" id="something">
  <a href="#" id="add-row">Add Another row</a>

  <div id="renderArea"></div>
</form>

My Javascript:

$(document).ready(function() {
  var i = 0;
  $('#add-row').click(function() {
    var var_type = $('#var_type').val();
    var name = $('#name').val();
    var value = $('#value').val();
    var something = $('#something').val();

    $('#renderArea').append({'-Var VarType="'+var_type+'" Position="'+i+'"    
            Name="'+ name +'"><Imputed Value>' + value + '</Imputed Value>
            Something = ' + something});

    // increment the position
    i += 1;
  })
});

Answer 1

You need to change your .append() statement to something like:

var html = '-Var VarType="' + var_type + '" Position="' + i + 
           '" Name="' + name + '"><Imputed Value>' + value + '</ImputedValue>' +
           'Something = ' + something;

$('#renderArea').append(html);

Note – <Imputed Value></Imputed Value> is not valid XML. No spaces in tag names. Since you’re outputting it as HTML – that probably matters.

Your issue is likely to do with the fact that you were putting your .append() parameters inside a {} – which is not necessary.