Textfield

[star_lavender]

hi..let's say I have 3 textfields, texfield A must be filled first, then textfield B and textfield C can be filled either one. If textfield B is filled, then for example (textfield A * textfield B), the answer will be shown at textfield C or vice versa.

Below is part of my code.

<script type="text/javascript">
function calculate()
{
	if(form.textfieldC.value != "")
	{
		var p_Deposit = document.getElementById("textfieldB").value = ((document.form.textfieldC.value / document.form.textfieldA.value) * 100);
	}
	
	else if(form.textfieldB.value != "")
	{
		var a_Deposit = document.getElementById("textfieldC").value = (document.form.textfieldA.value * (document.form.textfieldB.value/100));	
	}
}
</script>

<td><input type="text" name="e_percent" id="e_percent"  onKeyUp="calculate()"><span class="font"> (%)</span></td>
<td><input type="text" name="e_amount" id="e_amount" onKeyUp="calculate()"></td>

This doesn't work because since the textfield A is filled out first, then the rest two textfields is empty, the javascript will detect they are in empty state, so it directly read the else statement. Is anybody know the solution to solve this problem? Thanks in advance.

[Taywin]

Your question is a bit obscure. What type of value are you expecting a user to enter? What would you do if a user enter value in text 'A' and 'B', and then delete the value in text 'A' afterward? Do you want it to recompute all the time? Please be more clear when you ask a question in the future. You need to think more about 'what if' and ask them all at once. It is tricky when it comes to implementation in order to meet the requirement.

There are many ways to implement this, but I will try to make it as much intuitive as I can. Below is a sample code that will accept all text IDs and an identifier string indicates which input you are entering. All values here are assumed as float type.

What it does is that if a user enters a value in textA and the value is not a number (isNaN()), it will delete both textB and textC values. If the value is a number, it will do nothing. If textA is not empty and value is a number, it will attempt to compute the value and replace it in either textB or textC when a user is entering value in either textB (value appears in textC) or textC (value appears in textB). If a user enters a not-a-number value in either textB or textC, it will display '0' in the other's value.

//Javascript part
<script type="text/javascript">
function calculate(textAId, textBId, textCId, whichInput) {
  var aEl = document.getElementById(textAId)
  var bEl = document.getElementById(textBId)
  var cEl = document.getElementById(textCId)
  if (aEl && bEl && cEl) {  // elements exist
    switch (whichInput) {
      case 'a':  // from textA
        if (isNaN(aEl.value)) {
          bEl.value = 0
          cEl.value = 0
        }
        break
      case 'b':  // from textB
        if (isNaN(aEl.value) || isNaN(bEl.value)) { cEl.value = 0 }
        else { cEl.value = parseFloat(aEl.value)*parseFloat(bEl.value) }
        break
      case 'c':  // from textC
        if (isNaN(aEl.value) || isNaN(cEl.value)) { bEl.value = 0 }
        else { bEl.value = parseFloat(aEl.value)*parseFloat(cEl.value) }
        break
    }
  }  // all elements exist
}  // calculate()
</script>

//HTML part
Text A: <input type="text" id="textA" name="textA" onkeyup="calculate('textA', 'textB', 'textC', 'a')">
<br>
Text B: <input type="text" id="textB" name="textB" onkeyup="calculate('textA', 'textB', 'textC', 'b')">
<br>
Text C: <input type="text" id="textC" name="textC" onkeyup="calculate('textA', 'textB', 'textC', 'c')>

[star_lavender]

Hi, Taywin. Thanks for the reply and advices. I will try to think more after this before I start to implement my project. Thanks again for your help and the coding is really work for me and you are right because I have to think more for what things will happen to textfieldA. So what should I do if the user change the value at textfieldA since all the value for the others textfields will depends on it? I don't want to recompute again. Any solutions to solve this problem? Thanks in advance.

Your question is a bit obscure. What type of value are you expecting a user to enter? What would you do if a user enter value in text 'A' and 'B', and then delete the value in text 'A' afterward? Do you want it to recompute all the time? Please be more clear when you ask a question in the future. You need to think more about 'what if' and ask them all at once. It is tricky when it comes to implementation in order to meet the requirement.

There are many ways to implement this, but I will try to make it as much intuitive as I can. Below is a sample code that will accept all text IDs and an identifier string indicates which input you are entering. All values here are assumed as float type.

What it does is that if a user enters a value in textA and the value is not a number (isNaN()), it will delete both textB and textC values. If the value is a number, it will do nothing. If textA is not empty and value is a number, it will attempt to compute the value and replace it in either textB or textC when a user is entering value in either textB (value appears in textC) or textC (value appears in textB). If a user enters a not-a-number value in either textB or textC, it will display '0' in the other's value.

//Javascript part
<script type="text/javascript">
function calculate(textAId, textBId, textCId, whichInput) {
  var aEl = document.getElementById(textAId)
  var bEl = document.getElementById(textBId)
  var cEl = document.getElementById(textCId)
  if (aEl && bEl && cEl) {  // elements exist
    switch (whichInput) {
      case 'a':  // from textA
        if (isNaN(aEl.value)) {
          bEl.value = 0
          cEl.value = 0
        }
        break
      case 'b':  // from textB
        if (isNaN(aEl.value) || isNaN(bEl.value)) { cEl.value = 0 }
        else { cEl.value = parseFloat(aEl.value)*parseFloat(bEl.value) }
        break
      case 'c':  // from textC
        if (isNaN(aEl.value) || isNaN(cEl.value)) { bEl.value = 0 }
        else { bEl.value = parseFloat(aEl.value)*parseFloat(cEl.value) }
        break
    }
  }  // all elements exist
}  // calculate()
</script>

//HTML part
Text A: <input type="text" id="textA" name="textA" onkeyup="calculate('textA', 'textB', 'textC', 'a')">
<br>
Text B: <input type="text" id="textB" name="textB" onkeyup="calculate('textA', 'textB', 'textC', 'b')">
<br>
Text C: <input type="text" id="textC" name="textC" onkeyup="calculate('textA', 'textB', 'textC', 'c')>

[Taywin]

It all depends on your preference. For me, I would add a button call 'compute' instead of using event 'onkeyup'. Then the computation will become easier. I would delete both values in textB and textC if a user enter invalid value to textA. I would also delete both textB and textC value if a user enter values in all textA, textB, and textC. Just a thought...