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
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.     <title><?php echo $page_title; ?></title>
  6.     <!-- the three things that jQuery Mobile needs to work -->
  7. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
  8.   <link rel="stylesheet" href="css/properties_css.css" />
  9. <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  10. <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>    
  11.     <meta name="viewport" content="width=device-width"/>
  12.     <script>
  13.       $(function(){
  14.         $( "[data-role='header'], [data-role='footer']" ).toolbar();
  15.       });      
  16.     </script>
  17. </head>
  18. <body>
  19. <div id="newproperty" data-role="page">
  20. <?php
  21. include ("panel.html");
  22. include ("header.php");
  23. ?>    
  24.     <div class="ui-content">
  25.         <form method="post" action="set_meter_session.php" id="new_property_form" data-ajax="false">
  26.             <label for="basicfield" class="ui-hidden-accessible">Job Number:</label>
  27.                 <input type="text" name="job_number" id="job_number" value="" placeholder="Job Number"/>

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

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

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

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

  44.         
  45.             <div class="ui-grid-a">
  46. <div class="ui-block-a"><a href="#meters_dialog" data-rel="dialog" class="ui-shadow ui-btn ui-corner-all">Meter</a></div>
  47. <div class="ui-block-b"><a href="#" class="ui-shadow ui-btn ui-corner-all">Backflow</a></div>
  48.             </div><!-- /grid-a -->

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


  56.     </div>
  57. <?php
  58. include ("footer.html");
  59. ?>
  60. </div>

  62. <!-- meter dialog page -->
  63. <div data-role="page" id="meters_dialog">
  64. <?php include("header_dialog.php"); ?>
  65.     <div class="ui-content">
  66.     <form name="meters_form" action="" method="post" data-ajax="false">
  67.         <select name="numofmeters" id="numofmeters">
  68.             <option value="">Number of Meters</option>
  69.             <option value="1">1</option>
  70.             <option value="2">2</option>
  71.             <option value="3">3</option>
  72.             <option value="4">4</option>
  73.             <option value="5">5</option>
  74.             <option value="6">6</option>
  75.             <option value="7">7</option>
  76.             <option value="8">8</option>
  77.             <option value="9">9</option>
  78.             <option value="10">10</option>
  79.             </select>
  80.         <div id="meterinput" style="display:none">
  81.         
  82.         </div>
  83.         

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

  123.         });
  126. $(function() {
  127. $('#cancelit').click(function() {
  128. $('#meters_dialog').dialog("close");
  129. });
  130. });
  132. });

  134.     </script>
  135. </div>
  136. </body>
  137. </html>    

4