Form_property_enhancement

Question

I have a web booking form (Private Details):
The corresponding code for the form is as follows:
<fieldset>
                 <legend>Private Details</legend>                             
                     <p>
                       <label for="pax">No. of Passengers:</label>
                       <input name="pax" type="text" id="pax" tabindex="120" onblur="calculate();" value="1" size="2" maxlength="4" readonly="readonly" />
                       Must correspond to requested occupancy! </p>                 
                 <p>
                   <label>
                     Title:
                     <input name="title" type="radio" id="title_0" value="married couple" checked="checked" />
                     Mr & Mrs</label>
                   <label>
                     <input type="radio" name="title" value="male" id="title_1" />
                     Mr</label>
                   <label>
                     <input type="radio" name="title" value="female" id="title_2" />
                     Mrs</label>
                   <label>
                     <input type="radio" name="title" value="single female" id="title_3" />
                     Ms</label>
                   <label>
                     <input type="radio" name="title" value="family x members" id="title_4" />
                     Family</label>
                   <label>
                     <input type="radio" name="title" value="group x members" id="title_5" />
                     Group</label>
                 </p>
                 <ol id="pers_info">                 
                   <li>
                     <p>
                       <label for="surname"> Surname:</label>
                       <span id="sprytextfield1">
                       <input name="surname" type="text" class="text" id="surname" tabindex="130" />
                       <span class="textfieldRequiredMsg">Please enter your surname above!</span><img src="_images/page_decos/correct5.png" class="textfieldValidMsg" /></span></p>
                       </li>
                       <li>
                     <p>
                       <label for="firstname">Given Name:</label>
                       <span id="sprytextfield2">
                       <input name="firstname" type="text" class="text" id="firstname" tabindex="140" />
                       <span class="textfieldRequiredMsg">Enter your first name above!</span><img src="_images/page_decos/correct5.png" class="textfieldValidMsg" /></span></p>
                   </li>
                   <li>
                     <p>
                       <label for="birthdate">Date of Birth:</label>
                       <span id="sprytextfield3">
                       <input name="birthdate" type="text" class="text" id="birthdate" tabindex="150" />
                       <span class="textfieldRequiredMsg">Please use the format YYYY-MM-DD.</span> <span class="textfieldInvalidFormatMsg">Please use the format YYYY-MM-DD.</span><img src="_images/page_decos/correct5.png" class="textfieldValidMsg" /></span></p>
                   </li>
                  <li>
                    <p>
                       <label for="nat">Nationality:</label>
                       <span id="sprytextfield4">
                       <input name="nat" type="text" class="text" id="nat" tabindex="160" />
                       <span class="textfieldRequiredMsg">Your nationality please!</span><img src="_images/page_decos/correct5.png" class="textfieldValidMsg" /></span></p>
                 </li>
                  <li>
                   <p>
                       <label for="Occupation">Occupation:</label>
                       <span id="sprytextfield5">
                       <input name="Occupation" type="text" class="text" id="Occupation" tabindex="170" />
                       <span class="textfieldRequiredMsg">Enter your occupation above.</span><img src="_images/page_decos/correct5.png" class="textfieldValidMsg" /></span></p>
                  </li>
                  <li>
                   <p>
                       <label for="Permanent Address">Permanent Address:</label>
                       <span id="sprytextarea1">
                       <textarea name="address" rows="4" class="textarea" id="address" tabindex="180" ></textarea>
                       <span id="countsprytextarea1"> </span><span class="textareaMinCharsMsg">Min. number of characters not met!</span><span class="textareaRequiredMsg">Enter permanent address above!</span><span><img src="_images/page_decos/correct5.png" class="textareaValidMsg" /></span><span class="textareaMaxCharsMsg">Exceeded max number of characters.</span></span></p>
                   <blockquote>
                     <p><em>Street+House#, City+Zip, State, Country (30 characters min)</em></p>
                     </blockquote>
                 </li>
               </ol>
               </fieldset>
Payment can be made for more than one person, but there is a Personal Details form for only one person. Details of other passengers are also required for purchase of air tickets, hotel bookings etc.
To meet this requirement, I want to place a button at the bottom (within the fieldset) which pop opens a blank form (fields: Surname to Permanent Address) which can be filled and saved as a small list of links up to 16 pax) containing the trekkers names. When clicked it should show editable form contents, in case some detail needs to be changed. Otherwise, it is there as a link. When the completed form is submitted, we receive the list of passenger names etc.
Any ideas how I could achieve this using JQ, PHP etc.?
Regards,
zabberwan

Answer 1

hi evna..
As of now.. just for trial purpose im putting the same values that i retrieved. Pretty sure... Im passing a String array to the setter method.