2个窗体调用相同的Javascript函数

2 Forms calling the same Javascript function?

本文关键字：Javascript 函数 窗体 调用 2个      更新时间：2023-09-26

我有一个包含两个公式的页面。每一个都有自己的带有输入等的表单。它们在键向上时都调用相同的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;
}

HTML属性id应该是唯一的

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

尝试更改这些id，而不是使用类

以下是解决方案，将所有字段id更改为类，表单id应该不同，并将表单的参数id作为参数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;
}

在应该使用类的情况下使用ID。

您需要避免为多个元素分配相同的id属性。元素的ID应该是唯一的。

不要对多个元素使用相同的id。这是HTML中的一个基本概念。标识应该是唯一和相同的。因此，在任何HTML页面中都不能有任何重复的ID。所以请更改第二个表单的ID，

<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函数时，相应地更改ID。

我通过在每个ID的末尾添加2来重命名所有ID。使每个ID都是唯一的。

相关文章：