How to change data in multiple textfields dynamically

[StarLavender]

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="textfeildB" id="textfeildB"  onKeyUp="calculate()"><span class="font"> (%)</span></td>
<td><input type="text" name="textfeildC" id="textfeildC" 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.

[Dormilich]

I wouldn’t allow text field C to be editable, but only used for result display. further, I’d use the blur event since this guarantees the user finished typing.

[RamananKalirajan]

You can do it pa. That's not a big deal. You can do it.

Sample HTML:

<input type="text" id="A" name="A" />
<input type="text" id="B" name="B" onKeyUp="calculate(this.value,document.getElementById('C'))"/>
<input type="text" id="C" name="C" onKeyUp="calculate(this.value,document.getElementById('B'))"/>

Sample Script

function calculate(val, tgtEl){
  var aVal = document.getElementById('A').value;
  if(aVal!="")
  {
     tgtEl.value = val*aVal;
  }
  else{
     alert("Please enter the value for A");
  }
}

I guess by this way you can solve your problem.

Note: The above code is what I have typed. I am not sure whether it will run when you copy the code.

Thanks and Regards
Ramanan Kalirajan

[StarLavender]

Hi, Dormilich, thanks for the reply. Ya, I know I should allow one of the textfield to be editable only, but in this case, the user is allowed to decide whether textfield B is going to fill or textfield C. So is there any other methods to solve this problem?

[StarLavender]

Hi, Ramanan Kalirajan, thanks for the reply. I have two different equations and these two different equations is based on user input in which textfield. So I still have the problem about this. Besides, I am not really clear about the variables that you used (val, tgtEl).

[RamananKalirajan]

The variable val and tgtEl are value of the current element and the target element object. If you see the HTML code you would find the parameter passed to the function.

For you problem, then have two different functions in the input. So if the user is entering text in textbox B means value will be displayed in textbox C and vice versa.

Thanks and Regards
Ramanan Kalirajan

[StarLavender]

Hi, Ramanan Kalirajan, thanks for the reply. I had solved my problem already without using any variables. Is there any weaknesses without using any variables? Because I find that most of the programmers will use variables to solve this kind of problem. Thanks again for your solution.

[StarLavender]

Hi, I have another question which related to the question above. For now, I have a drop down menu and new textfield D.

<select name="type" id="type">
<option value="">-- Please select --</option>
<option value="typeA" onChange="selectA()">Type A</option>
<option value="typeB" onChange="selectB()">Type B</option>
</select>
<input type="text" name="textfieldD" id="textfieldD">
 

The type selected by the user will affect on different functions. For example, if type A was chosen, then the result will display on textfield D will be based on the function selectA().

<script type="text/javascript">
function selectA()
{
   calculate();
   document.getElementById("textfieldD").value = a_Deposit; //a_Deposit is a variable that I used before this for the value of textfieldC
}
</script>
 

But if user select the type B, then the result which will display on textfield D will be based on the function selectB().

<script type="text/javascript">
function selectB()
{
   calculate();
   document.getElementById("textfieldD").value = a_Deposit * 10;
}
</script>
 

My problem is the value of textfieldA, textfieldB and textfieldC are not affected by the selection of the user from drop down menu. But the value of textfieldD will affect by drop down menu and textfieldC. That means I need to make sure that the change on the selection of drop down menu by the user should be detect in the beginning, start from the value of textfieldA (since textfieldA will affect the value of textfieldB and textfieldC, after that textfieldC will affect textfieldD). But I am not sure what I can do to solve this problem? Besides, I just try to create function selectA() and selectB() but it doesn't work. Do anyone know how to solve this problem? Thanks in advance.

[RamananKalirajan]

The problem is onchange event should be given to Select not to the option. Fix that one. It will solve.

Thanks and Regards
Ramanan Kalirajan

[StarLavender]

Thanks. Now I implement my coding as below.

<script type="text/javascript">
function calAmount()
{
    if(document.getElementById("textfieldA").value != "")
    {
        var a = document.getElementById("textfieldC").value = (document.getElementById("textfieldA").value * (document.getElementById("textfieldB").value/100));    
    }
 
    else
    {
        alert("Please insert a value.");
        document.getElementById("textfieldB").value = "";
        main.textfieldA.focus();
    }
}
 
function calPercent()
{
    if(document.getElementById("textfieldA").value != "")
    {
        var p = document.getElementById("textfieldB").value = ((document.getElementById("textfieldC").value / document.getElementById("textfieldA").value) * 100);
    }
 
    else
    {
        alert("Please insert a value.");
        document.getElementById("textfieldC").value = "";
        main.textfieldA.focus();
    }
}
 
function selectType()
{
    if(document.main.type.options[document.form.type.selectedIndex].value == "TypeA")
    {
        if(document.getElementById("textfieldB").value != "")
        {
            calAmount();
        }
 
         else if(document.getElementById("textfieldC").value != "")
        {
            calPercent();
        }        
   }
 
   else if(document.main.type.options[document.form.type.selectedIndex].value == "TypeB")
   {}    
}
</script>
 

<select name="type" id="type" onChange="selectType()">
<option value="">-- Please select --</option>
<option value="typeA">Type A</option>
<option value="typeB">Type B</option>
</select>
 

However, I am facing the problem when insert the value into each textfield. Is there any problem with my coding? Thanks in advance.