用以前的表单中的数据自动填充表单


Autofilling a form with data from a previous form

我在手风琴中有3个表单,一个用于个人详细信息,账单信息和交付信息。如果在询问他们的账单和交付信息是否相同时选择了'yes'单选按钮,我想在交付信息部分自动填写表单。

我在网上找过了,似乎找不到任何关于在手风琴或同一页面上填写表格的内容。

下面是HTML:

详细信息
        <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>

这是完全假设,正如您提到的手风琴,您的页面没有刷新

您可以简单地在您的Radio按钮上添加一个事件侦听器来访问必需的字段,然后使用它们来显示需要的地方。

也给你的输入字段适当的id

你可以这样做;

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