我设计自己的 WooCommerce 结帐。我在页面顶部放置了一个选择项目，客户应该选择他们的预定义信息之一或注册以获取新信息。 我的代码如下：
<?php
$my_user = wp_get_current_user();
?>
<div style="font-weight: bold; font-size: 14px; margin-bottom: 20px; border: solid red 2px; border-radius: 10px; padding: 20px; margin-left: 10px; color: white;">
<label style="color: red;"> Please select one of these addresses </label>
<select name="address" id="address" onchange="change_address(this)" style="margin-top: 20px; width: 100%; height: 90%; font-family: B Roya; font-weight: bold; font-size: 16px;">
<option value="None"> Choosee --- </option>
<option value="address_1">Address1: <?php echo $my_user-> user_address1; ?></option>
<option value="address_2">Adress2: <?php echo $my_user-> user_address2; ?></option>
<option value="address_new">New Address</option>
</select>
</div>
<form name="checkout" method="post" class="checkout woocommerce-checkout" action="<?php echo esc_url( wc_get_checkout_url() ); ?>" enctype="multipart/form-data">
<?php if ( $checkout->get_checkout_fields() ) : ?>
<?php do_action( 'woocommerce_checkout_before_customer_details' );?>
<div class="col2-set" id="customer_details" style="display: flex; margin-bottom: 200px;">
<div class="col-1" style="box-shadow: 12px 12px 12px #555; border: solid 2px red; width: 45%; flex: 3; padding: 20px; border-radius: 15px;">
<p style="font-size: 18px; font-weight: bold; color: red;"> Your Address </p>
<table style="border: none;">
<tr>
<td style="width: 50%; padding-bottom: 30px;">
<label for="billing_first_name" style = "display: block; text-align: right;"> Full name* </label>
<input type="text" name="billing_first_name" id="billing_first_name" value="" style="text-align: right; width:100%; height:30px;" required oninvalid="this.setCustomValidity('این بخش نمی تواند خالی باشد')">
</td>
<td style="width: 50%; padding-bottom: 30px;">
<label for="billing_phone" style = "display: block; text-align: right;"> Mobile* </label>
<input type="text" name="billing_phone" id="billing_phone" value="" style="text-align: left; width:100%; height:30px;" required oninvalid="this.setCustomValidity('این بخش نمی تواند خالی باشد')">
</td>
</tr>
<tr>
<td style="width: 50%; padding-bottom: 30px;">
<label for="billing_state" style="display: block; text-align: right;"> State* </label>
<input type="text" name="billing_state" id="billing_state" value="" style="text-align: right; width:100%; height:30px;" required oninvalid="this.setCustomValidity('این بخش نمی تواند خالی باشد')">
</td>
<td style="width: 50%; padding-bottom: 30px;">
<label for="billing_city" style="display: block; text-align: right;"> City* </label>
<input type="text" name="billing_city" id="billing_city" value="" style="text-align: right; width:100%; height:30px;" required oninvalid="this.setCustomValidity('این بخش نمی تواند خالی باشد')">
</td>
</tr>
<tr>
<td colspan="2"; style="padding-bottom: 30px;">
<label for="billing_address_1" style = "display: block; text-align: right;"> Address* </label>
<input type="text" name="billing_address_1" id="billing_address_1" value="" style="text-align: right; width:100%; height:30px;" required oninvalid="this.setCustomValidity('این بخش نمی تواند خالی باشد')">
</td>
</tr>
<tr>
<td style="width: 50%; padding-bottom: 30px;">
<label for="billing_postcode" style="display: block; text-align: right;"> Postal code* </label>
<input type="text" name="billing_postcode" id="billing_postcode" value="" style="text-align: left; width:100%; height:30px;" required>
</td>
<td style="width: 50%; padding-bottom: 30px;">
<label for="billing_email" style="display: block; text-align: right;"> email </label>
<input type="text" name="billing_email" id="billing_email" value="" style="text-align:left; width:100%; height:30px;">
</td>
</tr>
<tr>
<td colspan="2"; style="padding-bottom: 30px;">
<label for="order_comments" style="display: block; text-align: right;"> Comments </label>
<textarea style="resize:none; text-align: right; width: 100%; height: 150px;" name="order_comments" id="order_comments" placeholder="در صورت نیاز، توضیحات تکمیلی در خصوص ارسال کالا را ثبت فرمایید "></textarea>
</td>
</tr>
</table>
</div>
<div class="col-2" style="box-shadow: 12px 12px 12px #555; border: solid 2px blue; width: 45%; flex: 3; padding: 20px; border-radius: 15px;">
<?php do_action( 'woocommerce_checkout_before_order_review_heading' ); ?>
<h3 id="order_review_heading"><?php esc_html_e( 'Your order', 'woocommerce' ); ?></h3>
<?php do_action( 'woocommerce_checkout_before_order_review' ); ?>
<div id="order_review" class="woocommerce-checkout-review-order">
<?php do_action( 'woocommerce_checkout_order_review' ); ?>
</div>
<?php do_action( 'woocommerce_checkout_after_order_review' ); ?>
</div>
</div>
<?php
do_action( 'woocommerce_checkout_after_customer_details' );
?>
<?php endif; ?>
</form>
<?php do_action( 'woocommerce_after_checkout_form', $checkout ); ?>
<?php //var_dump($checkout->get_checkout_fields()); ?>;
这是我更改信息的脚本：
<script type="text/javascript">
function change_address()
{ //print('Hello');
//Reference the Button.
var sel = document.getElementById("address");
var name = document.getElementById("billing_first_name");
var famil = document.getElementById("billing_last_name");
var phone = document.getElementById("billing_phone");
var state = document.getElementById("billing_state");
var city = document.getElementById("billing_city");
var address = document.getElementById("billing_address_1");
var postcode = document.getElementById("billing_postcode");
var email = document.getElementById("billing_email");
var comment = document.getElementById("order_comments");
var fname = <?php echo json_encode($my_user->account_first_name) ?>;
var lname = <?php echo json_encode($my_user->account_last_name) ?>;
if (sel.value.trim() == "address_1") {
name.value = fname;//.concat(" ").concat(lname);
phone.value = <?php echo json_encode($my_user->user_phone1); ?>;
state.value = <?php echo json_encode($my_user->user_state1); ?>;
city.value = <?php echo json_encode($my_user->user_city1); ?>;
address.value = <?php echo json_encode($my_user->user_address1); ?>;
postcode.value = <?php echo json_encode($my_user->user_postcode1); ?>;
email.value = <?php echo json_encode($my_user->user_email1); ?>;
name.readOnly = "readonly";
phone.readOnly = "readonly";
state.readOnly = "readonly";
city.readOnly = "readonly";
address.readOnly = "readonly";
postcode.readOnly = "readonly";
email.readOnly = "readonly";
}
else if (sel.value.trim() == "address_2") {
name.value = fname.concat(" ").concat(lname);
phone.value = <?php echo json_encode($my_user->user_phone2); ?>;
state.value = <?php echo json_encode($my_user->user_state2); ?>;
city.value = <?php echo json_encode($my_user->user_city2); ?>;
address.value = <?php echo json_encode($my_user->user_address2); ?>;
postcode.value = <?php echo json_encode($my_user->user_postcode2); ?>;
email.value = <?php echo json_encode($my_user->user_email2); ?>;
name.readOnly = "readonly";
phone.readOnly = "readonly";
state.readOnly = "readonly";
city.readOnly = "readonly";
address.readOnly = "readonly";
postcode.readOnly = "readonly";
email.readOnly = "readonly";
}
else {
name.value = "";
phone.value = "";
state.value = "";
city.value = "";
address.value = "";
postcode.value = "";
email.value = "";
name.readOnly = false;
phone.readOnly = false;
state.readOnly = false;
city.readOnly = false;
address.readOnly = false;
postcode.readOnly = false;
email.readOnly = false;
}
famil.value = lname;//name.value;
}
</script>
但按下“订单注册”按钮后，却出现以下错误提示：
奇怪的是，只是忽略了这4项，其他参数都可以。
您的代码存在多个错误。您最好使用 jQuery，因为它默认启用并由 WooCommerce 使用。
在 JavaScript 代码中，您可以直接为选择字段添加“onChange”事件侦听器（然后我们将其从 HTML 中删除）。
因此，在您的 HTML 代码中，替换代码行：
<select name="address" id="address" onchange = "change_address(this)" style="margin-top: 20px; width: 100%; height: 90%; font-family: B Roya; font-weight: bold; font-size: 16px;">
与：
<select name="address" id="address" style="margin-top: 20px; width: 100%; height: 90%; font-family: B Roya; font-weight: bold; font-size: 16px;">
然后你将用以下内容替换你的Javascript：
<script type="text/javascript">
jQuery( function($){
$(document.body).on('change', 'select[name=address]', function() {
const sel = $(this),
name = $('billing_first_name'),
famil = $('billing_last_name'),
phone = $('billing_phone'),
state = $('billing_state'),
city = $('billing_city'),
address = $('billing_address_1'),
postcode = $('billing_postcode'),
email = $('billing_email'),
comment = $('order_comments'),
fname = '<?php echo esc_attr($my_user->account_first_name); ?>',
lname = '<?php echo esc_attr($my_user->account_last_name); ?>';
if ( sel.val() == 'address_1' ) {
name.val(fname).prop('readOnly', true); // Or for complete name use: name.val(fname+' '+lname).prop('readOnly', true);
famil.val(lname).prop('readOnly', true);
phone.val('<?php echo esc_attr($my_user->user_phone1); ?>').prop('readOnly', true);
state.val('<?php echo esc_attr($my_user->user_state1); ?>').prop('readOnly', true);
city.val('<?php echo esc_attr($my_user->user_city1); ?>').prop('readOnly', true);
address.val('<?php echo esc_attr($my_user->user_address1); ?>').prop('readOnly', true);
postcode.val('<?php echo esc_attr($my_user->user_postcode1); ?>').prop('readOnly', true);
email.val('<?php echo esc_attr($my_user->user_email1); ?>').prop('readOnly', true);
} else if ( sel.val() == 'address_2' ) {
name.val(fname).prop('readOnly', true); // Or for complete name use: name.val(fname+' '+lname).prop('readOnly', true);
famil.val(lname).prop('readOnly', true);
phone.val('<?php echo esc_attr($my_user->user_phone2); ?>').prop('readOnly', true);
state.val('<?php echo esc_attr($my_user->user_state2); ?>').prop('readOnly', true);
city.val('<?php echo esc_attr($my_user->user_city2); ?>').prop('readOnly', true);
address.val('<?php echo esc_attr($my_user->user_address2); ?>').prop('readOnly', true);
postcode.val('<?php echo esc_attr($my_user->user_postcode2); ?>').prop('readOnly', true);
email.val('<?php echo esc_attr($my_user->user_email2); ?>').prop('readOnly', true);
} else {
name.val('').prop('readOnly', false);
famil.val('').prop('readOnly', false);
phone.val('').prop('readOnly', false);
state.val('').prop('readOnly', false);
city.val('').prop('readOnly', false);
address.val('').prop('readOnly', false);
postcode.val('').prop('readOnly', false);
email.val('').prop('readOnly', false);
}
});
});
</script>
应该会更好。