Question

我正在更新我之前的问题：

用户必须在文本框中输入金额：amt1，amt2，amt3 如果他们选择支付“自我”价值“S”的选项，他们需要预付款“广告”为“是”，那么文本框adv1应显示amt1 + amt2 + amt 3 + $ 750的总和。在任何其他情况下，adv1中的值应为0.00，当然文本框totalAmt应总是具有金额的总和。

我已尝试使用javascript获取选项onChange的值并尝试评估。但是，值未传递。

HTML

<table width="800" border="1" cellspacing="0" cellpadding="0">
   <tr>
        <th>Estimated Travel Cost</th>
        <th>AED</th>
        <td>
            <input name="total" type="text" id "totalAmt"value="" readonly="true" style="text-align:center"/>
        </td>
  </tr>
  <tr>
      <th>Amount (AED)</th>
      <th>Arranged By</th>
  </tr>
  <tr>
      <td>Arrival (incl Taxes)</td>
      <td>
        <input name="amt1" id="amt1" type="text" value="0" style="text-align:center"/>
      </td>
      <td>
            <select name = "drop1" id = "str" onChange="updateTextVal()">
            <option value="S">Self</option>
            <option value="C">Company</option>
        </select>
        </td>
  </tr>
  <tr>
       <td>Local Travel</td>
       <td>
        <input name="amt2" type="text" value="" style="text-align:center"/>
       </td>
        <td>
             <select name="drop2">
             <option>Self</option>
             <option>Company</option>
             </select>
      </td>
  </tr>
  <tr>
       <td>Accomodation</td>
       <td>
        <input name="amt3" type="text" value="" style="text-align:center"/>
      </td>
      <td>
        <select name="drop3">
            <option>Self</option>
            <option>Company</option>
            </select>
     </td>
  </tr>
       <td>Estimated Total Cost</td>
       <td>
        <input name="amt6" type="text" value="" style="text-align:center" />
        </td>
        <td>
                <select name="drop6">
                <option>Self</option>
                <option>Company</option>
                </select>
        </td>
    </tr>
    <tr>
        <td>Advance Required</td>
        <td>
                <select name="advReq" id="ad">
        <option value="n">No</option>
                    <option value="y">Yes</option>     
        </select>
    </td>
    <td>
        <input name="adv1" type="text" id="adv1"  value="0" readonly="readonly" style="text-align:center"/>
    </td>
  </tr>

</table>

的JavaScript

<script>

 function updateText() {
  var str = this.value;
  var $vel = parseInt(document.getElementById("amt1"));
  var $el = document.getElementById("adv1");
  var val = document.getElementById('ad').value;
  var $eval = document.getElementById('str').value;

    if(val == 'y'){ 
        if($eval == 's'){        
             $el.value = "750" + $vel;
         } else {
             $el.value = "0";
        }
    }
 }
</script>

Answer 1

您应该编写一个收集amt1，drop1和advReq值的函数，并将适当的值设置为adv1。然后在加载页面时调用它或者在amt1中释放键或者更改drop1 / advReq选择值。不要忘记amt1中的值可能为空或不是实际数字。

Answer 2

HTML：

<table>
      <tr>
      <td><input name="amt1" id="txtAmt" type="text" value="" align="left"  style="text-align:center" /></td>
      <td><select name = "drop1" id="sc"><option value="S">Self</option><option value="C">Company</option></select></td>
      </tr>          
         <tr>
           <td>Advance Required</td>
           <td><select name="advReq" id="ad">
               <option value="y">Yes</option>
               <option value="n">No</option>
               </select>
           </td>
           <td><input id='re' name="adv1" type="text" readonly="readonly" value="" /></td>
       </tr>

   </table>

的Javascript

   document.getElementById('txtAmt').onkeyup = function(){
    var txtV = parseInt(this.value);
    var re = document.getElementById('re');
    var ad = document.getElementById('ad').value;
    var sc = document.getElementById('sc').value;
    if(ad == 'y'){
        // Yes in Advance Required
        if(sc == 'S'){
            // Self
            re.value = 'Self: ' + (txtV + 750) + '$';
        }
        else{
            re.value = 'Company: ' + (txtV + 750) + '$';
        }
    }
    else{
        // No in Advance Required
        if(sc == 'S'){
            re.value = 'Self: ' + '0.00';
        }
        else{
            re.value = 'Company: ' + '0.00';
        }
    }
}

这是demo

Answer 3

只需将onClick函数添加到定义为

的onclick="calculateAdvance()"的每个选择元素中

function calculateAdvance()
{
if(document.forms[0].drop1.getSelectedValue == 'S' && document.forms[0].advReq.getSelectedValue == 'y')
{
var sum = eval(document.forms[0].amt1.value) + 750;
document.forsm[0].amt1.value = sum;

}
}

并将 HTML 更改为

<td><select name = "drop1" onchange="calculateAdvance()"><option value="S">Self</option><option value="C">Company</option></select></td>

和

<select name="advReq" id="ad" onchange="calculateAdvance()">

在下拉列表中显示包含条件的文本

3 个答案: