CODEWITHSUNDEEP
phpjqueryhtmlforms
Adam
Adam

Reputation: 58

Autofilling a form with data from a previous form

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>

Upvotes: 0

Views: 123

Answers (1)

Zeeshan
Zeeshan

Reputation: 801

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.

Upvotes: 1

Related Questions