0

1 つのコンボ ボックスと 3 つのテキスト ボックスを持つフォームがあります。3 つのテキストボックスは計算用です。最初のテキストボックスは金額、2 番目のテキストボックスは受け取り、最後のテキストボックスは残高を示す読み取り専用で、コンボには値 (全額、一部、なし) があります。ユーザーがフルを選択すると、受信したテキストボックスは読み取り専用になり、金額テキストボックスに入力された金額が受信したテキストボックスに表示されます。ユーザーが部分を選択した場合、ユーザーが金額を入力できるようにテキストボックスが利用可能になるはずです。ユーザーが [なし] を選択した場合、残高のテキスト ボックスには、金額のテキスト ボックスに入力された値が入力されます。

<select id="pay" name="pay" tabindex="12">
    <option value=""></option>                           
    <option value="1">Full</option>                           
    <option value="2">Part</option>
    <option value="3">None</option>                            
</select>
<input type="text" id="amt" name="amt" value="" 
    size ="8" onblur="calculateText()" 
    style="background-color:transparent; color:blue; text-align:right" 
    tabindex="17"/>
<input type="text" id="resc" name="resc" value="" 
    disabled="disabled" size ="8" onblur="calculateText()"  
    tabindex="18"/>
 <input type="text" id="bal" name="bal"  
    readonly="readonly" value="" size ="8" 
    onblur="calculateText()" tabindex="19"/>

jsFiddle を追加しました: http://jsfiddle.net/MackieeE/fjXzY/1/

4

2 に答える 2

0

jsfiddleのjavascriptフレームに次のコードを記述し、それが必要かどうかを確認してください。

function UpdatePay( n ) {

     if(n.options[n.selectedIndex].value==2){
         document.getElementById('amt').style.display='none';
        document.getElementById('resc').disabled = false;
        }
      if(document.getElementById('pay').value==3){
        document.getElementById('bal').value=document.getElementById('amt').value
        document.getElementById('resc').value=document.getElementById('amt').value
    }
    if(document.getElementById('pay').value==2){
        document.getElementById('bal').value=document.getElementById('resc').value
    }

}       document.getElementById('resc').value=document.getElementById('amt').value
    }
    if(document.getElementById('pay').value==2){
        document.getElementById('bal').value=document.getElementById('resc').value
    }

}
于 2013-03-04T12:31:08.447 に答える
0

ここから始めましょう。それは多かれ少なかれあなたが求めたことを行います.すべてのケースで何をすべきかを述べていないため、いくつかのユーザビリティの問題があります,限られたケースのセットのみ. あなたが望むようにそれを機能させるために、私はあなたに任せます。

<script>

function calculateText(el) {
  var form = el.form;
  var idx = form.pay.selectedIndex;

  if (idx <= 0) {
    form.reset();
    return;
  }

  if (form.pay.value == 1) {
    form.resc.disabled = true;
    form.resc.value = form.amt.value;
    form.bal.value = 0;

  } else if (form.pay.value == 2) {
    form.resc.disabled = false;
    form.bal.value = form.amt.value - form.resc.value;

  } else if (form.pay.value == 3) {
    form.resc.disabled = true;
    form.resc.value = 0;
    form.bal.value = form.amt.value;
  }
}

</script>

<form>
  <select name="pay" onchange="calculateText(this);">
    <option selected>Please select an option</option>                           
    <option value="1">Full                   
    <option value="2">Part
    <option value="3">None
  </select><br>
  Amount: <input name="amt" onblur="calculateText(this)"><br>
  Received: <input name="resc" disabled onblur="calculateText(this)"><br>
  Balance: <input name="bal" readonly><br>
  <input type="reset">
</form>
于 2013-03-04T12:38:52.213 に答える