Autofilling a form with data from a previous form

Question

I have 3 forms in an accordion, one for personal details, billing info and delivery info. I want to autofill the form in the delivery info section if the 'yes' radio button is selected when being asked if their billing and delivery info are the same.

I've looked on the web and can't seem to find anything on filling in a form in an accordion or on the same page.

Here is the HTML:

Details

        <img class="editcheckoutbtn" src="<?php echo ROOT; ?>/Images/Buttons/rentals_84x25_edit.png">
        <div class="inputsection details">
          <form id="detailsform">
            <label for="firstname">First Name*</label>
            <input type="text" name="forename" />
            <label for="lastname">Last Name*</label>
            <input type="text" name="surname" />
            <label for="email">Email*</label>
            <input type="email" name="email" />
            <label for="contactnumber">Contact Number*</label>
            <input type="text" name="contactnumber"/>
            <p class="marketingtext">Do you wish to be contacted by Interski with future promotions?</p>
            <label>
              <input type="radio" name="marketing" value="yes"/>Yes
            </label>
            <label>
              <input type="radio" name="marketing" value="no"/>No
            </label>
            <div class="confirmdetailsbtn">
              <input type="image" src="<?php echo ROOT; ?>/Images/Buttons/rentals_84x25_confirm.png">
            </div>
          </form> 
        </div> 

        <h3>billing address</h3>
        <img class="editcheckoutbtn" src="<?php echo ROOT; ?>/Images/Buttons/rentals_84x25_edit.png">
        <div class="inputsection billing">
          <form id="billingform">
            <label for="firstaddress">1st line of Address*</label>
            <input type="text" name="firstaddress"/>
            <label for="secondaddress">2nd line of Address</label>
            <input type="text" name="secondaddress"/>
            <label for="town">Town*</label>
            <input type="text" name="town" />
            <label for="postcode">Postcode*</label>
            <input type="text" name="postcode" />
            <label for="country">Country*</label>
            <select name="country"> 
              <option></option>
            </select>
            <p class="billingtext">Is your delivery address the same as your billing address?</p>
            <label>
              <input type="radio" id="deliveryyes" name="deliveryradio" value="yes"/>Yes
            </label>
            <label>
              <input type="radio" id="deliveryno" name="deliveryradio" value="no"/>No
            </label>
            <div class="confirmbillingbtn">
              <input type="image" src="<?php echo ROOT; ?>/Images/Buttons/rentals_84x25_confirm.png">
            </div>
          </form>  
        </div>

        <h3>Delivery Address</h3>
        <img class="editcheckoutbtn" src="<?php echo ROOT; ?>/Images/Buttons/rentals_84x25_edit.png">
        <div class="inputsection delivery">
          <form id="deliveryform">
            <label for="firstaddress">1st line of Address*</label>
            <input type="text" name="delfirstaddress" required/>
            <label for="secondaddress">2nd line of Address</label>
            <input type="text" name="delsecondaddress"/>
            <label for="town">Town*</label>
            <input type="text" name="deltown" />
            <label for="postcode">Postcode*</label>
            <input type="text" name="delpostcode" />
            <label for="country">Country*</label>
            <select name="delcountry"> 
              <option></option>
            </select>
            <div class="confirmdeliverybtn">
              <input type="image" src="<?php echo ROOT; ?>/Images/Buttons/rentals_84x25_confirm.png">
            </div>

            <div id="confirmbtn">
              <input type="image" src="<?php echo ROOT; ?>/Images/Buttons/rentals_200x38_proceed_to_payment.png">
            </div>

i am sure somebody will have a better answer, but you could just use JavaScript to copy the values ... -> document.getElementById("deliveryform").getElementByName("deltown").value = document.getElementById("billingform").getElementByName("town").value — Doktor OSwaldo, Sep 19 '16 at 14:13
This should get you started. http://icode4you.net/website-forms-use-javascript-to-auto-fill-one-field-with-the-values-from-two-other-fields/ it's just basic javascript that you need, to copy values from one to the other. — ADyson, Sep 19 '16 at 14:15
A pretty straight forward bit of javascript, so should we assume you want someone to do it for you for free? — RiggsFolly, Sep 19 '16 at 14:22
@RiggsFolly no, as you can see I am still learning and didn't ask for the exact code. Thanks for your useful input, I would of thought someone with such high rep would have had a more mature answer. — Adam, Sep 19 '16 at 14:31

score 1 · Accepted Answer · answered Sep 19 '16 at 14:16

This is in complete assumption that as you mentioned its accordion,your page is not refreshed.

You can simply add an event listener on your Radio button to access the required fields and then use them to show wherever required.

Also give proper id's to your input fields

You can do it like this;

$("#deliveryyes").on('click',function(){
    var firstaddress = $("#firstaddress").val();
    ...
    // Use those values to populate other fields like
    $("#delfirstaddress").val(firstaddress );
    ...
});

This way you can achieve it.

Autofilling a form with data from a previous form

Details

1 Answers1