如何将下拉选择值传递至PayPal按钮的item_name字段？

问题根源 #

1. 下拉框事件绑定语法错误：select标签的onchange属性写法错误，导致updateitemname()函数从未被触发
2. 表单提交逻辑顺序错误：UpdateForm函数中，obj1.submit()执行后页面跳转，后续的item_name文本拼接代码无法运行

修正步骤 #

1. 修复下拉框的onchange事件

将错误的事件绑定写法：

<select id="membership" onchange="func()"; "updateitemname()">

改为：

<select id="membership" onchange="func(); updateitemname()">

2. 调整表单提交的代码顺序

把obj1.submit()移到所有字段赋值逻辑之后，确保item_name的拼接完成后再提交表单：

修正后的UpdateForm函数：

function UpdateForm (obj1) { 

var themessage = "You are required to complete the following fields: ";

if (obj1.amount.value=="") {
themessage = themessage + " - Amount";
}

if (obj1.firstname.value=="") {
themessage = themessage + " - First Name";
}

if (obj1.lastname.value=="") {
themessage = themessage + " - Last Name";
}

if (obj1.address1.value=="") {
themessage = themessage + " - Address";
}

if (obj1.city.value=="") {
themessage = themessage + " - City";
}

if (obj1.state.value=="") {
themessage = themessage + " - state";
}

if (obj1.zip.value=="") {
themessage = themessage + " - Zip";
}

//alert if fields are empty and cancel form submit
if (themessage == "You are required to complete the following fields: ") {
  // 先完成所有字段赋值，再提交表单
  obj1.item_name.value = "Application for: " + obj1.item_name.value;
  obj1.os0.value = obj1.firstname.value + " " + obj1.lastname.value + " Address: " + obj1.address1.value +  " " + obj1.address2.value + ", " + obj1.city.value + ", " + obj1.state.value +  " " + obj1.zip.value;
  obj1.os1.value = obj1.class_year.value;
  obj1.submit();
}
else {
alert(themessage);
return false;
   }
}

3. 优化updateitemname函数（可选）

当前updateitemname设置的是下拉框的金额值，若需要显示选项文本（如"Option1"），可修改函数获取选项的文本内容：

function updateitemname(){
  var dropdown = document.getElementById("membership");
  // 获取选中选项的文本内容
  var selectionText = dropdown.options[dropdown.selectedIndex].text.split(" ")[0];
  console.log(selectionText);
  var item_name = document.getElementById("item_name");
  item_name.value = selectionText;
}

完整修正后的代码 #

<script type="text/javascript"> 

function updateitemname(){
        var dropdown = document.getElementById("membership");
        // 获取选中选项的文本（比如Option1/Option2）
        var selectionText = dropdown.options[dropdown.selectedIndex].text.split(" ")[0];
        console.log(selectionText);
        var item_name = document.getElementById("item_name");
        item_name.value = selectionText;
      }

function func(){
        var dropdown = document.getElementById("membership");
        var selection = dropdown.value;
        console.log(selection);
        var amount = document.getElementById("amount");
        amount.value = selection;
      }
        
function UpdateForm (obj1) { 

var themessage = "You are required to complete the following fields: ";

if (obj1.amount.value=="") {
themessage = themessage + " - Amount";
}

if (obj1.firstname.value=="") {
themessage = themessage + " - First Name";
}

if (obj1.lastname.value=="") {
themessage = themessage + " - Last Name";
}

if (obj1.address1.value=="") {
themessage = themessage + " - Address";
}

if (obj1.city.value=="") {
themessage = themessage + " - City";
}

if (obj1.state.value=="") {
themessage = themessage + " - state";
}

if (obj1.zip.value=="") {
themessage = themessage + " - Zip";
}

//alert if fields are empty and cancel form submit
if (themessage == "You are required to complete the following fields: ") {
  // 先赋值再提交
  obj1.item_name.value = "Application for: " + obj1.item_name.value;
  obj1.os0.value = obj1.firstname.value + " " + obj1.lastname.value + " Address: " + obj1.address1.value +  " " + obj1.address2.value + ", " + obj1.city.value + ", " + obj1.state.value +  " " + obj1.zip.value;
  obj1.os1.value = obj1.class_year.value;
  obj1.submit();
}
else {
alert(themessage);
return false;
   }
}

</script>

<!-- content -->
        <form method="post" name="donationform" id="donationform" action="https://www.sandbox.paypal.com/" onsubmit="this.target='paypal'; return UpdateForm(this);">
<input type="hidden" name="business" value="sb-fzhc018066100@business.example.com">
<input type="hidden" name="no_shipping" value="1">
  <input type="hidden" name="cmd" value="_xclick">
<table width="550" border="1" cellspacing="1" cellpadding="1">
<tr>
  <td width="122">Membership:</td>
  <td width="268">
    <select id="membership" onchange="func(); updateitemname()">
        <option selected="selected"></option>
            <option value="10.00">Option1 $10.00 USD</option>
            <option value="100.00">Option2 $100.00 USD</option>
         </select></td>
<td width="168"><input name="amount" type="text" id="amount" maxlength="6" /></td>  
</tr>

<!--<tr>
<td>For:</td>
<td><input type="text" name="item_name" size="38" value=""></td>
</tr>
 --><tr>
  <td>First Name:</td>
  <td><input name="firstname" type="text" id="firstname" size="38" value="" ></td>
  <td>&nbsp;</td>
</tr>
<tr>
  <td>Last Name :</td><td><input name="lastname" type="text" id="lastname" size="38" value="" ></td>
  <td>&nbsp;</td>
</tr>
<tr>
  <td>Address 1 :</td><td><input name="address1" type="text" id="address1"  size="38" value="" ></td>
  <td>&nbsp;</td>
</tr>
<tr>
  <td>Address 2 :</td><td><input name="address2" type="text" id="address2"  size="38"></td>
  <td>&nbsp;</td>
</tr>
<tr>
  <td>City:</td><td><input name="city" type="text" size="38"  id="city" value="" ></td>
  <td>&nbsp;</td>
</tr>
<tr>
  <td>State:</td><td><input name="state" type="text" size="38"  id="state" value="" ></td>
  <td>&nbsp;</td>
</tr>
<tr>
  <td>Zip:</td><td><input name="zip" type="text" size="38"  id="zip" value="" ></td>
  <td>&nbsp;</td>
</table>    

<input type="hidden" name="no_note" value="1">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="tax" value="0">
<input type="hidden" name="item_name" id="item_name" value="" />
<input type="hidden" name="on0" value="Member">
<input type="hidden" name="os0" value="">
<input type="hidden" name="bn" value="PP-DonationsBF">
<input type="hidden" name="on1" value="Class Year">
<input type="hidden" name="os1" value="">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="lc" value="US">
<br /><br />
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
<img alt="" border="0" src="/pixel.gif" width="1" height="1">
</form>

内容的提问来源于stack exchange，提问作者BBlyden