2 Forms calling the same Javascript function? - php

Question

I've a page with two formulas one. Each one has it's own form with inputs etc. They both call the same Javascript function on key up.
Only the first one works, I kind of understand why but I can't find a resolution, I'm too new to Javascript to know how to tackle the problem. I can't change the structure of the JS file a great deal as other equations on other pages depend on this set up.
Is there a workaround?
Shortened HTML:
<div id="formula">
<p>To find ρ<sub>b</sub>:</p>
<form id="formula" name="formula">
<input type="hidden" id="formulaName" name="formulaName" value="porosityRhob"/>
<div>
<label>$\rho_{fl}$:</label>
<input type ="text" name="input" id="input" onkeyup="calculatePEFormula()"/>
</div>
<div>
<label>Result:</label>
<input type="text" id="result" name="result">
</div>
</form>
</div>
<br/>
<div id="formula">
<p>To find Φ:</p>
<form id="formula" name="formula">
<input type="hidden" id="formulaName" name="formulaName" value="porosityPhi"/>
<div>
<label>$\rho_{ma}$:</label>
<input type ="text" name="input" id="input" onkeyup="calculatePEFormula()"/>
</div>
<div>
<label>Result:</label>
<input type="text" id="result" name="result">
</div>
</form>
</div>
THE JS:
function PEFormula(result, formulaName){
this.result = result;
this.formulaName = formulaName;
}
function calculatePEFormula(){
var PEObject = new PEFormula($("#result"), $("#formulaName"));
var formulaName = $("#formulaName").val();
switch(formulaName){
case "porosityRhob" : PEObject.porosityRhoB();
break;
case "porosityPhi" : PEObject.porosityPhi();
break;
}
PEFormula.prototype.porosityPhi = function(){
var input = parseFloat($("#input").val());
//logic
return r;
}

Answer 1

The HTML attribute id is supposed to be unique
<div id="formula">
<form id="formula" name="formula">
<input type="hidden" id="formulaName" name="formulaName" value="porosityRhob"/>
<input type ="text" name="input" id="input" onkeyup="calculatePEFormula()"/>
<input type="text" id="result" name="result">
Try changing these ids instead use classes
Here is the solution change all field ids to class and form id should be different and pass parameter id of form as parameter onkeyup="calculatePEFormula('form#formula1')" and onkeyup="calculatePEFormula('form#formula2')" Now in js
function PEFormula(result, formulaName){
this.result = result;
this.formulaName = formulaName;
}
function calculatePEFormula(form_id){
var PEObject = new PEFormula($(form_id+" .result"), $(form_id+" .formulaName"));
var formulaName = $(form_id+" .formulaName").val();
switch(formulaName){
case "porosityRhob" : PEObject.porosityRhoB();
break;
case "porosityPhi" : PEObject.porosityPhi();
break;
}
PEFormula.prototype.porosityPhi = function(){
var input = parseFloat($(form_id+" .input").val()); //provide the form id here
//logic
return r;
}

Answer 2

You're using ID's when you should be using classes.

Answer 3

You need to avoid assigning the same id attribute to multiple elements. An element's ID should be unique.

Answer 4

Never use the same id for multiple elements. That's a basic concept in HTML. An identification should be unique and identical. So there cannot be any duplicated IDs inside any HTML page. So please change the ids of 2nd form,
<div id="formula2">
<p>To find Φ:</p>
<form id="formula2" name="formula">
<input type="hidden" id="formulaName2" name="formulaName" value="porosityPhi"/>
<div>
<label>$\rho_{ma}$:</label>
<input type ="text" name="input" id="input2" onkeyup="calculatePEFormula()"/>
</div>
<div>
<label>Result:</label>
<input type="text" id="result2" name="result">
</div>
</form>
</div>
Change the IDs accordingly when calling the same js function.
I have renamed all the IDs by adding 2 at the end of each ID. Make every ID unique.