title: jQuery - acquiring variables from dynamic form for multiple functions
body: <p>I have started using jQuery few days ago, and although I found information on how to solve any problems that I have encountered (or at least get it working by some workarounds), I seem to be stuck on the current issue:</p>
  
  <p>I have a form that has a variable number of fields - the number of fields may change depending on user input at any point, and I achieved that using AJAX; Since I want to preserve the information user entered every time form is regenerated, I post data from the form fields and use it to repopulate newly generated fields every time the number of fields is changed; This all works (although I know I am doing it not the <em>right</em> way, more on it further).</p>
  
  <p>What I need to do is use the values from form fields for another AJAX call to generate another table on the page; I use the following code to acquire the field values for the first AJAX call, it is generated by php and spans from jq_calc11 to jq_calc99 (depending on number of fields). I understand that this is probably not the <em>correct</em> way, yet I could not figure out how to post a two-dimensional array using jQuery. </p>
  
  <pre><code>$('#ts_addfields').change(function()
  {   
   var comp_select=$('#ts_addfields').val();
  var jq_calc11=$('#tb_calc11').val(); 
   var jq_calc21=$('#tb_calc21').val(); 
   var jq_calc31=$('#tb_calc31').val(); 
   var jq_calc41=$('#tb_calc41').val(); 
   var jq_calc51=$('#tb_calc51').val(); 
   var jq_calc61=$('#tb_calc61').val(); 
   var jq_calc71=$('#tb_calc71').val(); 
   var jq_calc81=$('#tb_calc81').val(); 
   $('#calculator_input').load('/elements/AJAX-addfields.php',{addFields: comp_select, pCalc11:jq_calc11, pCalc21:jq_calc21, pCalc31:jq_calc31, pCalc41:jq_calc41, pCalc51:jq_calc51, pCalc61:jq_calc61, pCalc71:jq_calc71, pCalc81:jq_calc81});    
     });
  </code></pre>
  
  <p>My question now is, how can I re-use the values of these variables for a different AJAX call? I don't think having another potential 99 lines to be generated via php for another function is a good idea, so I looked into possibility of placing these values in a seperate function, and call it from inside the <code>$('#ts_addfields').change(function()</code> or another function. 
  I've tried various variations of the following, yet I cannot find a way how to run the function that would read the variables;</p>
  
  <pre><code>jQuery.fn.calcVars = function(){
   var jq_calc11=$('#tb_calc11').val(); 
   var jq_calc21=$('#tb_calc21').val(); 
   var jq_calc31=$('#tb_calc31').val(); 
   var jq_calc41=$('#tb_calc41').val(); 
   var jq_calc51=$('#tb_calc51').val(); 
   var jq_calc61=$('#tb_calc61').val(); 
   var jq_calc71=$('#tb_calc71').val(); 
   var jq_calc81=$('#tb_calc81').val(); 
   };
  
  $('#ts_addfields').change(function()
  {   
   var comp_select=$('#ts_addfields').val();
   $(this).calcVars();
  $('#calculator_input').load('/elements/AJAX-addfields.php',{addFields: comp_select, pCalc11:jq_calc11, pCalc21:jq_calc21, pCalc31:jq_calc31, pCalc41:jq_calc41, pCalc51:jq_calc51, pCalc61:jq_calc61, pCalc71:jq_calc71, pCalc81:jq_calc81});    
     });
  </code></pre>
  
  <p>Any code I've tried returns "jq_calc*xx*" not defined error on firebug.</p>
  
  <p>Could someone point me to the right direction?</p>