2 Формы, вызывающие одну и ту же функцию Javascript?

Question

У меня есть страница с двумя формулами одна. Каждый из них имеет свою собственную форму со входом и т. Д. Они оба называют одну и ту же функцию Javascript на клавиатуре.

Только первый работает, я понимаю, почему, но я не могу найти разрешение, я слишком новичок в Javascript, чтобы узнать, как решить эту проблему. Я не могу сильно изменить структуру JS-файла, поскольку другие уравнения на других страницах зависят от этой настройки.

Есть ли обходной путь?

Укороченный 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> 

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

Атрибут идентификатор HTML должен быть уникальным

1. <div id="formula">
2. <form id="formula" name="formula">
3. <input type="hidden" id="formulaName" name="formulaName" value="porosityRhob"/>
4. <input type ="text" name="input" id="input" onkeyup="calculatePEFormula()"/>
5. <input type="text" id="result" name="result">

Попробуйте изменить эти идентификаторы вместо этого использовать классы

Вот изменение решения всех полей идентификаторов класса и идентификатор формы должны быть различными и передать идентификатор параметра формы, как параметр onkeyup="calculatePEFormula('form#formula1')" и onkeyup="calculatePEFormula('form#formula2')" Сейчас в 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

Вы используете идентификаторы, когда вы должны использовать классы.

Answer 3

Вам нужно избегать назначения одного и того же атрибута id нескольким элементам. Идентификатор элемента должен быть уникальным.

Answer 4

Никогда не используйте один и тот же идентификатор для нескольких элементов. Это базовая концепция в HTML. Идентификация должна быть уникальной и идентичной. Поэтому внутри любой HTML-страницы не может быть дублированных идентификаторов. Поэтому, пожалуйста, измените идентификаторы 2-й формы,

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

Измените идентификаторы соответственно при вызове той же функции js.

Я переименовал все идентификаторы, добавив 2 в конце каждого ID. Сделайте каждый идентификатор уникальным.