2 Forms calling the same Javascript function?

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 &rho;<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 &Phi;:</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;
}

M Khalid Junaid · Accepted Answer · 2013-08-13 11:53:52Z

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;
}

Alexander Støver · Accepted Answer · 2013-08-13 11:30:26Z

0

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

answered Aug 13, 2013 at 11:30

Alexander Støver

6453 silver badges7 bronze badges

Comments

MajorCaiger · Accepted Answer · 2013-08-13 11:30:59Z

0

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

answered Aug 13, 2013 at 11:30

MajorCaiger

1,9231 gold badge12 silver badges18 bronze badges

Comments

Teshan N. · Accepted Answer · 2013-08-13 12:05:36Z

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 &Phi;:</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.

Collectives™ on Stack Overflow

2 Forms calling the same Javascript function?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related