使用上一个表单

时间:2016-09-19 14:05:02

标签: php jquery html forms

我手风琴有3种形式,一种用于个人信息,账单信息和送货信息。如果在询问他们的结算和递送信息是否相同时选择了“是”单选按钮,我想在递送信息部分自动填写表单。

我在网上看了一下,在手风琴或同一页面填写表格时似乎找不到任何东西。

这是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>

1 个答案:

答案 0 :(得分:1)

完全假设您提到手风琴时,您的页面不会刷新。

您只需在单选按钮上添加一个事件监听器即可访问所需的字段,然后使用它们在任何需要的位置显示。

同时为输入字段提供正确的ID

你可以这样做;

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

这样你就可以实现它。