Dynamically created hidden form fields

Dynamically created hidden form fields

I'm not even sure this can be done, and i have wrecked my brain trying to find an answer.

I have a form, in that form I have a button "Meter" that opens up a dialog, when the dialog opens it displays a select menu that asks how many meters?...depending on what the user picks it creates that amount of text inputs, let's say they pick 2, it creates 2 text inputs, that is not a problem, i loop thru the number and create the inputs and name them meternumber0, meternumber1 and so on depending on their choice, i append the newly created hidden fields to the main form on the page that called the dialog, again not a problem there.
The problem comes in when I want to capture the information the user enters in the said text inputs and assign it to the corresponding hidden field.
Any and all help would be greatly appreciated. I have condesed the code as much as possible
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title><?php echo $page_title; ?></title>
  5.     <!-- the three things that jQuery Mobile needs to work -->
  6. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
  7.   <link rel="stylesheet" href="css/properties_css.css" />
  8. <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  9. <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>    
  10.     <meta name="viewport" content="width=device-width"/>
  11.     <script>
  12.       $(function(){
  13.         $( "[data-role='header'], [data-role='footer']" ).toolbar();
  14.       });      
  15.     </script>
  16. </head>
  17. <body>
  18. <div id="newproperty" data-role="page">
  19. <?php
  20. include ("panel.html");
  21. include ("header.php");
  22. ?>    
  23.     <div class="ui-content">
  24.         <form method="post" action="set_meter_session.php" id="new_property_form" data-ajax="false">
  25.             <label for="basicfield" class="ui-hidden-accessible">Job Number:</label>
  26.                 <input type="text" name="job_number" id="job_number" value="" placeholder="Job Number"/>

  27.             <label for="job_name" class="ui-hidden-accessible">Property Name:</label>
  28.                 <input type="text" name="job_name" id="job_name" value="" placeholder="Property Name"/>
  29.           
  30.             <label for="job_address" class="ui-hidden-accessible">Address:</label>
  31.                 <input type="text" name="job_address" id="job_address" value="" placeholder="Property Address"/>

  32.             <label for="job_contact" class="ui-hidden-accessible">Contact:</label>
  33.                 <input type="text" name="job_contact" id="job_contact" value="" placeholder="Contact"/>

  34.             <label for="job_phone" class="ui-hidden-accessible">Phone:</label>
  35.                 <input type="text" name="job_phone" id="job_phone" value="" placeholder="Phone"/>

  36.             <label for="job_email" class="ui-hidden-accessible">eMail:</label>
  37.                 <input type="text" name="job_email" id="job_email" value="" placeholder="eMail"/>

  38.         
  39.             <div class="ui-grid-a">
  40. <div class="ui-block-a"><a href="#meters_dialog" data-rel="dialog" class="ui-shadow ui-btn ui-corner-all">Meter</a></div>
  41. <div class="ui-block-b"><a href="#" class="ui-shadow ui-btn ui-corner-all">Backflow</a></div>
  42.             </div><!-- /grid-a -->

  43.             <div class="ui-grid-a">
  44.             <div class="ui-block-a"><a href="#" class="ui-shadow ui-btn ui-corner-all" id="meter_btn">Controller</a></div>
  45.             <div class="ui-block-b"><button type="submit" data-theme="b" data-icon="check" name="submit">Submit</button></div>
  46.         </div>


  47.     </div>
  48. <?php
  49. include ("footer.html");
  50. ?>
  51. </div>

  52. <!-- meter dialog page -->
  53. <div data-role="page" id="meters_dialog">
  54. <?php include("header_dialog.php"); ?>
  55.     <div class="ui-content">
  56.     <form name="meters_form" action="" method="post" data-ajax="false">
  57.         <select name="numofmeters" id="numofmeters">
  58.             <option value="">Number of Meters</option>
  59.             <option value="1">1</option>
  60.             <option value="2">2</option>
  61.             <option value="3">3</option>
  62.             <option value="4">4</option>
  63.             <option value="5">5</option>
  64.             <option value="6">6</option>
  65.             <option value="7">7</option>
  66.             <option value="8">8</option>
  67.             <option value="9">9</option>
  68.             <option value="10">10</option>
  69.             </select>
  70.         <div id="meterinput" style="display:none">
  71.         
  72.         </div>
  73.         

  74.         <div class="ui-grid-a">
  75.             <div class="ui-block-a"><button type="submit" data-theme="b" data-icon="check" name="saveit">Save It</button></div>
  76.             <div class="ui-block-b"><button id="cancelit">Cancel</button></div>
  77.         </div><!-- /grid-b -->  
  78.         </form>
  79.    
  80.     </div>
  81. <script>
  82. $(document).ready(function(){
  83.         $(function() {
  84.             $("select[name='numofmeters']").change(function() {
  85.                 var optionValue = $("select[name='numofmeters']").val();
  86.   //alert(optionValue);
  87. for(var i = 0, b = 1; i< optionValue ; i++, b++){
  88. $('<input>').attr({
  89. type: 'hidden',
  90. id: "num_of_meters_field",
  91.   name: "num_of_meters_field"
  92. }).appendTo('#new_property_form');
  93. $('#num_of_meters_field').trigger('create');
  94. $('input[name=num_of_meters_field]').val(optionValue);
  95. $('<input type="text" placeholder="Number of Meter # ' + b + '" id="meter_number' + i + '" name="meter_number' + i + '"></input>').appendTo('#meterinput');    
  96. $('<input>').attr({
  97. type: 'hidden',
  98. id: "meter_num_field" + i,
  99.   name: "meter_num_field" + i,
  100. }).appendTo('#new_property_form');
  101. $('#meter_num_field' + i).trigger('create');
  102. }
  103. $('[type="text"]').textinput();
  104. $('#meterinput').css('display', '');
  105. $( "#numofmeters" ).selectmenu( "disable" );
  106. });

  107.         });
  108. $(function() {
  109. $('#cancelit').click(function() {
  110. $('#meters_dialog').dialog("close");
  111. });
  112. });
  113. });

  114.     </script>
  115. </div>
  116. </body>
  117. </html>    

4